Speed up loop through JSON

I have the following function that takes JSON and turns it into table rows:

function addDataFromJson(json) {
    var data = json.data;
    var rows = '';
    $('.uiGridContent tbody').html('');

    for (var i = 0; i ' + content + '';
        }

        var row = columns;

        row = '\
                    \
                    \
                        \
                            Actions\
                        \
                    \
                    ' + columns + '\
                ';

        rows =+ row;

    }

    $(rows).appendTo('.uiGridContent tbody');
}

The JSON looks like this (for those curious):

"data": [{
        "id": 1,
        "name": "Sheffield University",
        "departments": ["Software", "Recruitment", "Consulting"],
        "locations": ["Sheffield", "Rotherham", "London", "New York"]
    }, {
        "id": 2,
        "name": "Sheffield College",
        "departments": "",
        "locations": ["Hillsborough", "City Centre", "Crystal Peaks"]
    }, {
        "id": 3,
        "name": "Sheffield High School",
        "departments": ["Medical", "Family", "Criminal"],
        "locations": ["Sheffield", "Rotherham"]
    }...

However if I pass back 1000+ records then the JavaScript struggles and it takes a few seconds to do it and causes the browser to lock up.

Any ideas on how to improve this code?

It seems to be the line where I append the rows to the page:

$(rows).appendTo('.uiGridContent tbody');

As if I comment that line out, then it's really fast...

Fun question,

there is really nothing much you can do about this, adding a thousand rows in an HTML table will take a few second and might lock your browser. Browser were not meant for that. Moore's law is on your side though, so at it'll be fine at some point. Consider implementing paging ( with say 100 items per page ), and you app will be much snappier.

Other than that;

• rows =+ row;

• HTML in your JavaScript, say it aint so. You could use either true HTML 5 templates or write your own ` as a template






• You are retrieving Object.keys far too many times, I would suggest you get it ones for the first row and cache it






• It is considered better practice to have all your var's in place, and chain them

This is my counter proposal:



var data = { "data": [{
"id": 1,
"name": "Sheffield University",
"departments": ["Software", "Recruitment", "Consulting"],
"locations": ["Sheffield", "Rotherham", "London", "New York"]
}, {
"id": 2,
"name": "Sheffield College",
"departments": "",
"locations": ["Hillsborough", "City Centre", "Crystal Peaks"]
}, {
"id": 3,
"name": "Sheffield High School",
"departments": ["Medical", "Family", "Criminal"],
"locations": ["Sheffield", "Rotherham"]
}]};

addDataFromJson( data );

function addDataFromJson(json) {
var template = $('#mytemplate').html(),
data = json.data,
keys = Object.keys( data[0] ),
rows = '',
cells;

$('body').html('');

for (i = 0; i \n');
rows += template.replace( 'DataFromJson' , cells );
}

$(rows.trim()).appendTo('body');
}








Actions




DataFromJson



StackExchange Code Review Q#73458, answer score: 2