CODEWITHSUNDEEP
javascriptjqueryjsonhtml
Terran Brown
Terran Brown

Reputation: 519

Faster Way To Parse JSON String To HTML5 Code

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

Upvotes: 1

Views: 7447

Answers (3)

Terran Brown
Terran Brown

Reputation: 519

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

Upvotes: 0

Marcelo De Zen
Marcelo De Zen

Reputation: 9497

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.

Upvotes: 2

Wolfram
Wolfram

Reputation: 8052

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

Upvotes: 0

Related Questions