Parsing JSON objects to HTML table

Question

I'm trying to parse a JSON object into an html table however I can't seem to get it right.

DESIRED FORMAT:

Last Year     This Year     Future Years
45423         36721         873409

CURRENT FORMAT:

Last Year     45423
This Year     36721
Future Years  873409

JSON:

[{column_name:"Last Year", "column_data":45423},{column_name:"This Year", "column_data":36721},{column_name:"Future Years", "column_data":873409}]

HTML:

<div class="panel-body">
    <div id="main-aged-debtors-bar" style="height: 250px"></div>
    <div>
        <table class="table table-hover" id="crpw_table">
            <thead>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
</div>

CODE:

$.getJSON(url, jsonObject,
    function (data) {
        for (var i = 0; i < data.length; i++) {
            tr = $('<tr/>');
            tr.append("<td>" + data[i].column_name + "</td>");
            tr.append("<td>" + data[i].column_data + "</td>");
            $('#crpw_table').append(tr);
        }
    });

that's the code for your current format, where's your code for the desired format? — Jaromanda X
– Jaromanda X, Commented Sep 14, 2015 at 14:20
i don't have it for the desired format...i have just been trying to modify the existing..and i can't get it to that format. — Gawai
– Gawai, Commented Sep 14, 2015 at 14:22

Jaromanda X · Accepted Answer · 2015-09-14 14:22:25Z

2

It's not much different

$.getJSON(url, jsonObject,
    function (data) {
        tr1 = $('<tr/>');
        tr2 = $('<tr/>');
        for (var i = 0; i < data.length; i++) {
            tr1.append("<td>" + data[i].column_name + "</td>");
            tr2.append("<td>" + data[i].column_data + "</td>");
        }
        $('#crpw_table').append(tr1);
        $('#crpw_table').append(tr2);
    }
);

answered Sep 14, 2015 at 14:22

Jaromanda X

57.1k6 gold badges82 silver badges96 bronze badges

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

Comments

TbWill4321 · Accepted Answer · 2015-09-14 14:22:12Z

1

$.getJSON(url, jsonObject,
    function (data) {
        var tr = $('<tr/>');
        for (var i = 0; i < data.length; i++) {
            tr.append("<td>" + data[i].column_name + "</td>");
        }
        $('#crpw_table').append(tr);
        tr = $('<tr/>');
        for (i = 0; i < data.length; i++) {
            tr.append("<td>" + data[i].column_data + "</td>");
        }
        $('#crpw_table').append(tr);
    });

answered Sep 14, 2015 at 14:22

TbWill4321

8,6863 gold badges30 silver badges25 bronze badges

Comments

jqheart · Accepted Answer · 2015-09-14 14:25:54Z

1

Try,

$.getJSON(url, jsonObject,
    function (data) {
        var tr1 = $('<tr/>');
        var tr2 = $('<tr/>');
        for (var i = 0; i < data.length; i++) {

            tr1.append("<td>" + data[i].column_name + "</td>");
            tr2.append("<td>" + data[i].column_data + "</td>");

    }
    $('#crpw_table').append(tr1).append(tr2);
});

edited Sep 14, 2015 at 14:25

answered Sep 14, 2015 at 14:22

jqheart

7671 gold badge5 silver badges15 bronze badges

Collectives™ on Stack Overflow

Parsing JSON objects to HTML table

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related