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

Answer 1

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