CODEWITHSUNDEEP
jqueryjson
Fatal Error
Fatal Error

Reputation: 23

How to parse JSON data from web more faster

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 ?

Upvotes: 2

Views: 317

Answers (2)

Nicholas E.
Nicholas E.

Reputation: 109

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() );
}

Upvotes: 0

Brad
Brad

Reputation: 163262

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.

Upvotes: 3

Related Questions