Create table from JSON response

Question

I have a JSON response, something like the following:

[
    [
        "hospital_name",
        "Average Covered Charges",
        "Average Total Payments",
        "Total Discharges"
    ],
    [
        "MERCY REGIONAL HEALTH CENTER",
        6888.8181818182,
        2890.5454545454,
        11
    ],
    [
        "BUTLER MEMORIAL HOSPITAL",
        13699.818181818,
        2934.5454545454,
        11
    ],
    [
        "METHODIST MANSFIELD MEDICAL CENTER",
        23913.909090909,
        2964.8181818182,
        11
    ],
    [
        "EMORY JOHNS CREEK HOSPITAL",
        10976.727272727,
        2993.5454545454,
        11
    ]
]

and I am trying to do something like this:

     success:(function(data) {
                            jQuery.each(data, function(key, value) {
                                jQuery('table[name=drg_table]')
                                .append(
                                jQuery('<td>').text(key[0]),
                                jQuery('<td>').text(key[1]),
                                jQuery('<td>').text(key[2])
                            ); 
                            });
                        }

But I'm not sure that this is the correct way to update my table (which already exists). I simply want to update whole table with new values.

Rajaprabhu Aravindasamy · Accepted Answer · 2013-12-19 14:27:37Z

2

You are already having a table with id #records_table, so

Try,

jQuery('#records_table tr').remove(); //To clear the rows (pointed by @nunners)

jQuery.each(data, function(key, value) {
 jQuery('#records_table')
 .append('<tr><td>' + value[0] 
  + '</td><td>' + value[1] 
  + '</td><td>' + value[2] 
  + '</td><td>' + value[3] 
  + '</td></tr>');
});

I think you have updated your question with new selector, so change your selector as,

jQuery('table[name=drg_table]') in the above code.

DEMO

edited Dec 19, 2013 at 14:27

answered Dec 19, 2013 at 14:06

Rajaprabhu Aravindasamy

67.2k17 gold badges107 silver badges133 bronze badges

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

4 Comments

Nunners Over a year ago

With him wanting to update whole table with new values, it might be a good idea to also include jQuery('#records_table tr').remove();

temp-learn Over a year ago

i havent upadted, it i just removed comment but i got your point. there is small issue here, new rows are created but data that i get as out put is "undefined" EDIT: I got it instead of key[(some index)], i had to do value[(some index)]

wirey00 Over a year ago

td elements as a children of table is invalid HTML - look at the permitted parent in this link developer.mozilla.org/en-US/docs/Web/HTML/Element/td

temp-learn Over a year ago

@ᾠῗᵲᄐᶌ: yes need to be in proper parent child relation, so i voted for this post and your post an upvote

wirey00 · Accepted Answer · 2013-12-19 14:18:52Z

1

First thing - you can't have <td> elements as children of <table> - You probably want to append to the <tbody> and wrap the <td> in <tr>

Second - the value argument holds the array not key - key is actually the index

You can create the string like this then add to your html after the full string of elements is created

var str = '';
jQuery.each(data, function (key, value) {
    str += '<tr><td>' + value[0] + '</td>'
        + '<td>' + value[1] + '</td>'
        + '<td>' + value[2] + '</td>'
        + '<td>' + value[3] + '</td></tr>';
});
jQuery('table[name=drg_table] tbody').html(str);

FIDDLE

answered Dec 19, 2013 at 14:18

wirey00

33.7k7 gold badges56 silver badges65 bronze badges

Comments

Offirmo · Accepted Answer · 2013-12-19 14:21:52Z

1

I just heard recently of a dedicated plugin to display JSON as nice tables called "dynatable" : http://dailyjs.com/2013/12/17/frontend-roundup/

You may want to have a look.

answered Dec 19, 2013 at 14:21

Offirmo

20.1k13 gold badges81 silver badges99 bronze badges

3 Comments

temp-learn Over a year ago

Looks nice, but very few examples on the page at the moment.

temp-learn Over a year ago

can you link any fiddle for this?

jangosteve Over a year ago

Here's a basic jsfiddle: jsfiddle.net/ty3b7. Though you may want to check out the AJAX section of the documentation, as there's a better way to hook dynatable up to your AJAX JSON endpoint: dynatable.com/#json-from-ajax.

Collectives™ on Stack Overflow

Create table from JSON response

3 Answers 3

DEMO

4 Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related