Javascript data into table

Question

I have some HTML, JSON, and Javascript. I want to render a table consisting of 3 rows (as of JSON). Problem is that all my data comes out in TD's in one tr

<table>
<tbody>
    <tr>
        <td>car</td>
        <td>1000</td>
        <td>2000</td>
        <td>1500</td>
        <td>1000</td>
        <td>house</td>
        <td>500</td>
        <td>600</td>
        <td>700</td>
        <td>800</td>
        <td>internet</td>
        <td>100</td>
        <td>200</td>
        <td>2350</td>
        <td>1940</td>
    </tr>
</tbody>
</table>

I want

<table>
<tbody>
    <tr>
        <td>car</td>
        <td>1000</td>
        <td>2000</td>
        <td>1500</td>
        <td>1000</td>
    </tr>
    <tr>
        <td>house</td>
        <td>500</td>
        <td>600</td>
        <td>700</td>
        <td>800</td>
    </tr>
    <tr>
        <td>internet</td>
        <td>100</td>
        <td>200</td>
        <td>2350</td>
        <td>1940</td>
    </tr>
</tbody></table>

Here is my code HTML

<div class="calc"></div>

JSON

{
"item": [
    {
        "name": "car",
        "cost": [1000, 2000, 1500, 1000]
    },
    {
        "name": "house",
        "cost": [500, 600, 700, 800]
    },
    {
        "name": "internet",
        "cost": [100, 200, 2350, 1940]
    }
]
}

Javascript

$.getJSON("calc.json", function(data) {

    var $table = $('<table/>'),
        $row = $('<tr/>');

    for(var i = 0; i < data.item.length; i ++){
        $row.append( '<td>' + data.item[i].name + '</td>' );

        for (var cost = 0; cost < data.item[i].cost.length; cost ++) {
            $row.append( '<td>' + data.item[i].cost[cost] + '</td>' );
        }
    }

    $('.calc').append($table.append($row));

});

EDIT a less code intensive version

$.getJSON("calc.json", function(data) {

    var $table = $("<table/>");

    $.each(data.item, function(k,v) {
        var $row = $("<tr/>");
        $row.append("<td>" + v.name + "</td>");

        $.each(v.cost, function(k,v) {
            $row.append("<td>" + v + "</td>");
        });

        $table.append($row);

    });

    $(".calc").append($table);

});

The outer FOR loop needs to be creating the <tr> tags. I can't produce a complete answer right now, but that might get you going. — Bob Brown
– Bob Brown, Commented Jul 21, 2014 at 9:11

Devendra Soni · Accepted Answer · 2014-07-21 09:14:50Z

3

Hi i have changed you function a little but now you can use below given function:-

$.getJSON("calc.json", function(data) {

        var $table = $('<table/>');


        for(var i = 0; i < data.item.length; i ++){
           var $row = $('<tr/>');
            $row.append( '<td>' + data.item[i].name + '</td>' );

            for (var cost = 0; cost < data.item[i].cost.length; cost ++) {
                $row.append( '<td>' + data.item[i].cost[cost] + '</td>' );
            }
           $table.append($row);
        }

        $('.calc').append($table );

    });

answered Jul 21, 2014 at 9:14

Devendra Soni

1,93412 silver badges16 bronze badges

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

2 Comments

Johansrk Over a year ago

Thanks everyone. makes perfect sense, and all your examples worked.

Johansrk Over a year ago

I get this i even better. About 100 charachter less code. See edit in original post

Mindaugas Večkys · Accepted Answer · 2014-07-21 09:15:17Z

3

var $table = $('<table/>');

for(var i = 0; i < data.item.length; i ++){
    var  $row = $('<tr/>');
    $row.append( '<td>' + data.item[i].name + '</td>' );

    for (var cost = 0; cost < data.item[i].cost.length; cost ++) {
        $row.append( '<td>' + data.item[i].cost[cost] + '</td>' );
    }
    $table.append($row)
}

$('.calc').append($table);

Demo

answered Jul 21, 2014 at 9:15

Mindaugas Večkys

4234 silver badges10 bronze badges

Comments

Mritunjay · Accepted Answer · 2014-07-21 09:16:06Z

1

Problem is this because you have declared only one row for all Items.

Create new Row for Each item.

change your function like bellow.

 $.getJSON("calc.json", function(data) {

    var $table = $('<table/>');

    for(var i = 0; i < data.item.length; i ++){
       var $row = $('<tr/>');  //new Row for current ITEM
       $row.append( '<td>' + data.item[i].name + '</td>' );

       for (var cost = 0; cost < data.item[i].cost.length; cost ++) {
          $row.append( '<td>' + data.item[i].cost[cost] + '</td>' );
       }
       $table.append($row); // append current row
    }
    $('.calc').append($table);
});

answered Jul 21, 2014 at 9:16

Mritunjay

25.9k7 gold badges57 silver badges71 bronze badges

Collectives™ on Stack Overflow

Javascript data into table

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related