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 &lt; data.length; i++) // for each row
    {
        var columns = '';

        for (var b = 0; b &lt; Object.keys(data[i]).length; b++) // for each column
        {
            var content = data[i][Object.keys(data[i])[b]];

            columns += '&lt;td&gt;' + content + '&lt;/td&gt;';
        }

        var row = columns;

        row = '&lt;tr&gt;\
                    &lt;td&gt;&lt;input type="checkbox"&gt;&lt;/td&gt;\
                    &lt;td&gt;\
                        &lt;div class="dropdown"&gt;\
                            &lt;a class="buildMenu" data-toggle="dropdown"&gt;&lt;span class="arrow"&gt;&lt;span class="icon action small"&gt;Actions&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;\
                        &lt;/div&gt;\
                    &lt;/td&gt;\
                    ' + columns + '\
                &lt;/tr&gt;';

        rows =+ row;

    }

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


The JSON looks like this (for those curious):

"data": [{
        "id": 1,
        "name": "&lt;a href=\"#\"&gt;Sheffield University&lt;/a&gt;",
        "departments": ["Software", "Recruitment", "Consulting"],
        "locations": ["Sheffield", "Rotherham", "London", "New York"]
    }, {
        "id": 2,
        "name": "&lt;a href=\"#\"&gt;Sheffield College&lt;/a&gt;",
        "departments": "",
        "locations": ["Hillsborough", "City Centre", "Crystal Peaks"]
    }, {
        "id": 3,
        "name": "&lt;a href=\"#\"&gt;Sheffield High School&lt;/a&gt;",
        "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; &lt;- This drove me nuts, it is rows += row;, your code does not work
HTML in your JavaScript, say it aint so. You could use either true HTML 5 templates or write your own &lt;span&gt; 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": "&lt;a href=\"#\"&gt;Sheffield University&lt;/a&gt;",
        "departments": ["Software", "Recruitment", "Consulting"],
        "locations": ["Sheffield", "Rotherham", "London", "New York"]
    }, {
        "id": 2,
        "name": "&lt;a href=\"#\"&gt;Sheffield College&lt;/a&gt;",
        "departments": "",
        "locations": ["Hillsborough", "City Centre", "Crystal Peaks"]
    }, {
        "id": 3,
        "name": "&lt;a href=\"#\"&gt;Sheffield High School&lt;/a&gt;",
        "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 &lt; data.length; i++) // for each row
    {
        cells =  keys.map( function(key){ return data[i][key]; } ).join('&lt;/td&gt;\n&lt;td&gt;');
        rows += template.replace( 'DataFromJson' , cells );
    }

    $(rows.trim()).appendTo('body');
}
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;template id="mytemplate" style="display:none"&gt;  
&lt;tr&gt;
  &lt;td&gt;&lt;input type="checkbox"&gt;&lt;/td&gt;
  &lt;td&gt;
    &lt;div class="dropdown"&gt;
      &lt;a class="buildMenu" data-toggle="dropdown"&gt;
        &lt;span class="arrow"&gt;&lt;span class="icon action small"&gt;
          Actions
        &lt;/span&gt;&lt;/span&gt;
      &lt;/a&gt;
    &lt;/div&gt;
  &lt;/td&gt;
  &lt;td&gt;DataFromJson&lt;/td&gt;
&lt;/tr&gt;
&lt;/template&gt;