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?

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?

• javascript
• jquery
• json

Share Improve this question Follow edited Jun 26, 2014 at 8:21 Barmar 784k5757 gold badges548548 silver badges659659 bronze badges asked Jun 26, 2014 at 8:19 eng_mazzyeng_mazzy 1,04944 gold badges2323 silver badges4040 bronze badges 3

• please provide a dummy json data to recreate issue – Dev Commented Jun 26, 2014 at 8:20
• 1 don't append TD to TABLE, append it to TR – dandavis Commented Jun 26, 2014 at 8:21
• possible duplicate of Display JSON Data in HTML Table – Yaje Commented Jun 26, 2014 at 8:21

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

.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.

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}));
});

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)
        )
    );
});

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));