jQuery map up array with exisiting table

Question

In the ready DOM i have an existing table consisting of a number of rows.

Asynchronously I then get a json list of elements.

Now, the amount of elements in the json array will always equal the amount of rows in the table.

Further, the first element in the json array will always "belong" to the first row in the table, the second element to the second row and so on.

So basically having a table with 3 rows, would mean I would get a json list:

$.each(list,function(k,v){
    console.log(v.item);
});

that in turn would return three item values:

foo bar baz

What I need is (sticking with the example above) that "foo" get appended to the first tr (append a td), "bar" to the second, and "baz" to the third.

So a table looking like this:

Would look like this afterwards:

Any pointers is much appreciated, have a feeling I've gone blind.

Eric Guan · Accepted Answer · 2016-02-27 21:05:17Z

1

Alright let's solve this step by step. Use the appropriate table selector.

var $rows = $('#myTableId tr'); //store list of rows in a variable

$.each(list,function(index,val){ //for each value in the list
    $rows.eq(index).append('<td>'+val+'</td>') 
    //get each row by index. 
    //This works naturally since first item goes into first row, and etc.
    //append a td element with the content inside.
})

answered Feb 27, 2016 at 21:05

Eric Guan

16.1k10 gold badges53 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery map up array with exisiting table

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related