Print json data in a table

Question

I have wrote the following function but I'm pretty sure there is an error. This is the error when I try to execute this chunck of code

TypeError: 'undefined' is not a function (evaluating 'callback.apply( obj[ i ], args )')

Jquery function receive data json list correctlu

$("#result_times")
    .find("tr")
    .remove()
    .end();

$("#result_times")
    .find("table")
    .each(data, function(){  
        $(this).append($("<tr>"));
        $(this).append($("<td></td>")).text(data.airport_city_source);
        $(this).append($("<td></td>")).text(data.airport_city_dest);
        $(this).append($("<td></td>")).text((data.departure_date));
        $(this).append($("<td></td>")).text((data.arrival_date));
        $(this).append($("</tr>"));
    });

this is the DOM

<div id='result_times'>

            <table>


            </table>


        </div>

Can you suggest me where I wrong?

possible duplicate of [Display JSON Data in HTML Table](http://stackoverflow.com/questions/19901843/display-json-data-in-html-table) — Yaje, Jun 26 '14 at 08:21

Rajaprabhu Aravindasamy · Answer 1 · 2016-07-27T06:25:16.573

.append() does not work like concatenation if you are dealing with elements

Try,

var table = $("#result_times").find("table");
$.each(data, function(k, val){  
   table.append(
     $("<tr><td>"+ data.airport_city_source +"</td>"
         + "<td>"+ data.airport_city_dest +"</td>"
         + "<td>"+ data.departure_date +"</td>"
         + "<td>"+ data.arrival_date +"</td>"
      +"</tr>")
   );
});

Answered in a wrong way initially. Updated it to a correct one.

score 2 · Answer 2 · answered Jun 26 '14 at 08:29

You're using the .each() method when you should be using the $.each() function. You're also not appending to the correct elements -- you're trying to append <td> elements to the table, they have to be appended to the row, and the text has to be applied to the <td> elements, not the element that the <td> is being appended to. Basically, you're coding as if .append() is simply concatenating HTML text, rather than inserting elements into the DOM.

var table = $("#result_times table");
$.each(data, function() {
    var row = $("<tr>").appendTo(table);
    row.append($("<td>", {text: data.airport_city_source}));
    row.append($("<td>", {text: data.airport_city_dest});
    row.append($("<td>", {text: data.departure_date}));
    row.append($("<td>", {text: data.arrival_date}));
});

score 1 · Accepted Answer · answered Jun 26 '14 at 08:29

You are running each() on each table, so jQuery is expecting a function as the first argument to the each, not data. Also you are calling text() on the wrong element.

Run the each on the data by using $.each.

Working example:

Demo

$("#result_times")
    .find("tr")
    .remove()
    .end();

var table = $('#result_times table');

$.each(data, function(){
    table.append(
        $('<tr></tr>').append(
            $('<td></td>').text(this.airport_city_source),
            $('<td></td>').text(this.airport_city_dest),
            $('<td></td>').text(this.departure_date),
            $('<td></td>').text(this.arrival_date)
        )
    );
});

score 0 · Answer 4 · answered Jun 26 '14 at 08:31

try something like this

var tbl_row = '';
$.each(data, function(){
    tbl_row += '<tr>';
        tbl_row += '"<td>'+data.airport_city_source+'</td>';
        tbl_row += '"<td>'+data.airport_city_dest+'</td>';
        tbl_row += '"<td>'+data.departure_date+'</td>';
        tbl_row += '"<td>'+data.arrival_date+'</td>';
    tbl_row += '</tr>';
});
// append only one time, will have effect performance if table is bigger.
$("#result_times").find("table").append($(tbl_row));

Print json data in a table

4 Answers4