How to parse JSON data from web more faster

Question

I have json inventory inventory.json on the server like this:

[ { "body" : "SUV",
    "color" : { "ext" : "White diamond pearl",
        "int" : "Taupe"
      },
    "id" : "276181",
    "make" : "Acura",
    "miles" : 35949,
    "model" : "RDX",
    "pic" : [ { "full" : "http://images1.dealercp.com/90961/000JNBD/001_0292.jpg" } ],
    "power" : { "drive" : "Front wheel drive",
        "eng" : "2.3L DOHC PGM-FI 16-VALVE",
        "trans" : "Automatic"
      },
    "price" : { "net" : 29488 },
    "stock" : "6942",
    "trim" : "AWD 4dr Tech Pkg SUV",
    "vin" : "5J8TB2H53BA000334",
    "year" : 2011
  },
  { "body" : "Sedan",
    "color" : { "ext" : "Premium white pearl",
        "int" : "Taupe"
      },
    "id" : "275622",
    "make" : "Acura",
    "miles" : 40923,
    "model" : "TSX",
    "pic" : [ { "full" : "http://images1.dealercp.com/90961/000JMC6/001_1765.jpg" } ],
    "power" : { "drive" : "Front wheel drive",
        "eng" : "2.4L L4 MPI DOHC 16V",
        "trans" : "Automatic"
      },
    "price" : { "net" : 22288 },
    "stock" : "6945",
    "trim" : "4dr Sdn I4 Auto Sedan",
    "vin" : "JH4CU2F66AC011933",
    "year" : 2010
  } ]

here are two index, There are almost 5000 index like this. I parsed this json like this:

var url = "inventory/inventory.json";
$.getJSON(url, function(data){
  $.each(data, function(index, item){ //straight-forward loop
    if(item.year == 2012) {
      $('#desc').append(item.make + ' ' + item.model + ' ' + '<br/>' + item.price.net + '<br/>' + item.pic[0].full); 
    }         
  });
});

This is working fine.But the problem is that, this searching and fetching process is little bit slow as there are 5000 indexes already and it's increasing day by day. It seems that, it is a straight-forward loop to parse the data and a normal brute-force method.

Now I want to know if there any time efiicient way to parse more faster.Any faster method to parse instead of straight-forward loop ?

Consider organizing your data by year. You can then do data[2012] and get all of the items for 2012 without having to iterate over unnecessary items. — Blender
– Blender, Commented Dec 15, 2012 at 4:42
Reduce the amount of data being sent to the browser. Use Ajax to dynamically request just the information needed instead of retrieve everything they could possibly need. — the Tin Man
– the Tin Man, Commented Dec 15, 2012 at 4:56

Brad · Accepted Answer · 2012-12-15 04:39:29Z

3

The data is going to parse as fast as it is going to parse. Not much you can do about that, since jQuery will use the native JSON.parse() method when available.

The real problem here has to do with how you're appending data to the DOM.

First, cache your selected element in a variable for re-use:

var $desc = $('#desc');

Then inside your loop, you can just use $desc.append().

Next, I would only add your elements to the DOM when you have all of them ready to go. Making only one append should give you some speed improvement, but that may change from browser to browser.

answered Dec 15, 2012 at 4:39

Brad

164k57 gold badges380 silver badges559 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nicholas E. · Accepted Answer · 2012-12-15 05:47:12Z

0

If you want to speed things up a bit, I have a few suggestions.

As Brad suggested, cache the element in a variable. Look-ups to the DOM are expensive, it's far better to only do it once than in each iteration of the loop.

Second, instead of using the jquery .each method, use a standard loop. It is notably faster than any library foreach or map method.

Third, instead of making so many calls to append, first build the entire string, then append that. Each function call comes at a cost, usually very minimal, but in a long loop, the fewer the better. DOM manipulation is especially costly, so doing it once will be much faster.

$.getJSON(url, function(data){
  var $desc = $('#desc');
  var toAppend = [];
  for (var i = 0, len = data.length; i < len; i++) {
    //build the html here
    var current = data[i];
    toAppend.push( current.make + 'etc...' );

  }
  $desc.append( toAppend.join() );
}

edited Dec 15, 2012 at 5:47

answered Dec 15, 2012 at 5:04

Nicholas E.

1094 bronze badges

1 Comment

Beetroot-Beetroot Over a year ago

Waaaaaaagh, no! At least not as coded above. Building a string with += should definitely be avoided as it leaves a trail of strings behind for an overworked Garbage Collection to deal with at some indeterminate point in the future. If you want to build the entire string, then do so in an array and finally put the pieces together with arr.join('').

Collectives™ on Stack Overflow

How to parse JSON data from web more faster

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related