Faster Way To Parse JSON String To HTML5 Code

Question

First of all this code does work and when its dealing with a few items it works very quickly. How ever when the JSON it is parsing though has say 50 + items it can be resource intensive when testing on a phone.

Could any one suggest a feature or function I could look at in the JAVAScript or JQUERY world ?

Ideally I think if I cant speed this up I'd like to be able to either a) Split the JSON up on retrieval and be able to have a 'more' button to load up say the next 25 entries or... b) only parse each entry when it is needed to be displayed on the screen.

I'd appreciate your thoughts.

TIA

EDIT Just to add I could do this server side ( limited resources ) OR limit the entries ( again server side ) how ever I am trying to aim to download for offline use the data and process on the handset ( or browser )....

function showResultjsonp() {
    var retrieveddodlocaldata = localStorage.getItem(jsonpservice);
    var json_parsed = $.parseJSON(retrieveddodlocaldata);

    for (var d = 0; d < json_parsed.svccurrentaiot_jsonp.length; d++) {
        var parseddata = json_parsed.svccurrentaiot_jsonp[d];


        $('#eventlist')
            .append($('<div data-role="collapsible" data-collapsed="true">')
            .html('<h3><img alt="' + parseddata.dataitem.1 + '" src="images/icons/' + parseddata.dataitem.2 + '.gif">  ' + parseddata.dataitem.2 + '</h3><p>' + parseddata.dataitem.9 + '</p>Event ' + parseddata.dataitem.4 + ' ' + unittype + '<br/>Retricted ' + parseddata.dataitem.5 + '<br/>Impact ' + parseddata.dataitem.6 + '<br/>Delay <br/>Lat / Long ' + parseddata.dataitem.7 + ' / ' + parseddata.dataitem.7 + '<br/>Valid to  ' + parseddata.dataitem.8 + '</div>'));
    }

    $('div[data-role=collapsible]').collapsible();
};

Solution thanks to the contributions on this page & http://twitter.github.com/hogan.js/

    function showResultjsonp() {
 var retrieveddodlocaldata = localStorage.getItem(jsonpservice);
 var json_parsed = $.parseJSON(retrieveddodlocaldata);
 var datatemplate = Hogan.compile('<div data-role="collapsible" data-collapsed="true"><h3><img alt="{{item}}" src="images/trafficicons/{{item}}.gif"></div>');
 // store for all rendered items
 var result = "";
 for (var d = 0; d < json_parsed.svccurrentaiot_jsonp.length; d++) {
    var parseddata = json_parsed.svccurrentaiot_jsonp[d];
   //result += render(parseddata);
result += datatemplate.render({"item" : parseddata.dataitem.item});
console.log(result);    
}

My first thought would be, use templates. My guess is it has to do with your constant use of .innerHTML, which I believe is behind $.html(), so $.clone() might also provide an improvement.
In addition to what Jared said, you could create an empty jQuery object first, add all the new elements to it, and then add them to the page at once. This avoids page reflows.
Also, cache your $('#eventlist') DOM selection outside the loop.
Hi Jarred - thanks for your comments - could you expand a bit on "use templates" ? Not sure it it comes across in the code but I'm trying to dynamically create a collapsed and populated li....
not only is parsing json slow, but reading from localStorage can be slow, especially on a phone: nczonline.net/blog/2012/03/07/in-defense-of-localstorage. Maybe you would be better off to store sets of 50 items in localStorage that can be parsed one-by-one.

devundef · Answer 1 · 2012-08-05 10:07:07Z

jQuery is expensive dealing with a not so large amount of DOM elements. I strongly recommend you to use some template engine that compiles the template text into a javascript function. You can use hogan by twitter. It compiles a mustache template into a javascript function that you can reuse as many times you need.

Here is a simple example:

var template = "<div><span>{{some-value-from-template}}</span> </div>";

Then you compile:

var templ = hogan.compile(template);

Then use it:

var result = templ.render({"some-value-from-template": "hello world"});
$(result).appendTo("#someElementInTheDom");

Mustache has a pretty simple and elegant template notation.

Mustache: http://mustache.github.com/

Hogan: http://twitter.github.com/hogan.js/

EDIT:

Like jared and felix said in comments. You must improve other things in order to gain the perfomance you want.

// create template
var template = "<div>....</div>";
// compile
var templ = hogan.compile(template);
// store for all rendered items
var result = "";

for (...)
   result += templ.render(currentJsonParsedElement);
}

// and then, insert all items at once in the DOM
$("#eventlist").append(result);

Actually mustache can do the for loop for you. Take a look at mustache documentation for details.

Thanks all Espe Devundef..... looking at it on paper this looks like the best option. I'll get my head down in the next day or so and try it out.... /phpwassomucheasierlol
For those interested I found this as another example complete with a jsFiddle. stackoverflow.com/questions/9864679/…
Getting Uncaught TypeError: object is not a function with the 2nd example there.... found lots of good examples for single line data but none using the for (...) method..... I can call Hogan using var template = "Hogan.compile(<div>....</div>"); how ever this method would give me the same effect of rendering each line at the time rather than storing ready for a single render. Any thoughts ?
Update - its "Uncaught ReferenceError: render is not defined" which is the actual error
@TerranBrown I change the question. There is a ".render" missing there.

Wolfram · Answer 2 · 2012-07-30 23:10:06Z

In addition to templates, you might want to look into using a DocumentFragment to insert your HTML nodes. Instead of putting them one by one into the DOM (which is "expensive"), you can create a fragment, add several elements to it without touching the DOM and then insert them together in one operation. This example is from Google's page Speeding up JavaScript: Working with the DOM:

function addAnchors(element) {
  var anchor, fragment = document.createDocumentFragment();
  for (var i = 0; i < 10; i ++) {
    anchor = document.createElement('a');
    anchor.innerHTML = 'test';
    fragment.appendChild(anchor);
  }
  element.appendChild(fragment);
}

Terran Brown · Accepted Answer · 2012-08-05 10:36:31Z

Solution thanks to the contributions on this page & http://twitter.github.com/hogan.js/

function showResultjsonp() {
 var retrieveddodlocaldata = localStorage.getItem(jsonpservice);
 var json_parsed = $.parseJSON(retrieveddodlocaldata);
 var datatemplate = Hogan.compile('<div data-role="collapsible" data-collapsed="true"><h3><img alt="{{item}}" src="images/trafficicons/{{item}}.gif"></div>');
 // store for all rendered items
 var result = "";
 for (var d = 0; d < json_parsed.svccurrentaiot_jsonp.length; d++) {
    var parseddata = json_parsed.svccurrentaiot_jsonp[d];
   //result += render(parseddata);
result += datatemplate.render({"item" : parseddata.dataitem.item});
console.log(result);    
}

asked	8 months ago
viewed	1651 times
active	8 months ago

Faster Way To Parse JSON String To HTML5 Code

3 Answers

Your Answer

Not the answer you're looking for? Browse other questions tagged javascript jquery json html5 or ask your own question.

Linked

Faster Way To Parse JSON String To HTML5 Code

3 Answers

Your Answer

Sign up or log in

Post as a guest

Not the answer you're looking for? Browse other questions tagged javascript jquery json html5 or ask your own question.

Linked

Related