jquery .each looping through JSON to create table rows and elements

I'm currently looping through JSON data returned from $.getJSON to create a table row and its elements, as follows:

$.each(json.DATA, function(i,col) {
 $('#joblist tbody').append('<tr id="' + col[1] + '"><td title="This is a ' + col[2] + ' office job; the code for the job team is ' + col[1] + '"><input type="checkbox" class="' + col[4] + ' ' + col[5] + '" name="remove" value="' + col[1] + '" />' + col[0] + ': ' + col[3] + '</td></tr>');
}

My question is, is there a better (faster) way to do this?
ShanghaiDAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

ProculopsisCommented:
Probalby not faster but different (jsfiddle).
0
Lalit ChandraCommented:
yes. you can do it in a more faster way.
As you might know that Every DOM Manipulation  hinders the performance. So, we should take care of it in the script to maintain the speed of the script.

in your code, you are manipulating the dom many times.and all of the time same DOM element is modified.So, this time you can tune your code to perform better than it is doing right now.

What can you is, just append all the string to a single string variable in the loop,then after completition of the loop,simply update the DOM with the resultant string.

What i want to say is , simply replace your statement

$.each(json.DATA, function(i,col) {
 $('#joblist tbody').append('<tr id="' + col[1] + '"><td title="This is a ' + col[2] + ' office job; the code for the job team is ' + col[1] + '"><input type="checkbox" class="' + col[4] + ' ' + col[5] + '" name="remove" value="' + col[1] + '" />' + col[0] + ': ' + col[3] + '</td></tr>');
}


WITH the following statements

var strHTML="";
$.each(json.DATA, function(i,col) {
 strHTML=strHTML +('<tr id="' + col[1] + '"><td title="This is a ' + col[2] + ' office job; the code for the job team is ' + col[1] + '"><input type="checkbox" class="' + col[4] + ' ' + col[5] + '" name="remove" value="' + col[1] + '" />' + col[0] + ': ' + col[3] + '</td></tr>');
}
 $('#joblist tbody').append(strHTML);

So, in my code,   in the loop, i simple append all the html string to a variable,then at the end i simple update the DOM element.So, in that code, DOM manupulation is done atmost one single time.It does't depend on the data or the loop.

So, if you measure the performence, the second code will be perform better as the amount t of data in the JSON will increase.

Hope you understand that.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
ShanghaiDAuthor Commented:
Your answer is very clear and, yes, it is faster than my old code.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.