jquery извлекает ключи из файла json и устанавливает заголовок таблицы html

Question

$.getJSON(url , function(data) {
    var tbl_body = "";
    $.each(data, function() {
        var tbl_row = "";
        $.each(this, function(k , v){
            tbl_row += "<td>"+v+"</td>";
            console.log( k +' : '+ v );
            HeadKeys = '<tr><td><b>'+k+'</b></td></tr>';
        })
        tbl_body += "<tr>"+tbl_row+"</tr>";                 
    });
    $("#myTable tbody").html(HeadKeys + tbl_body);
});

Я пытаюсь с этим кодом, но он выводит только один ключ в строке таблицы..

Что я делаю не так?

DEMO

Answer 1

Вы должны убедиться, что заголовки таблиц проверяются только один раз; также хорошо убедиться, что HTML-код правильно экранирован, а не построен с использованием строк (хотя в некоторых случаях это может быть быстрее).

$.getJSON(url , function(data) {
    var $head = null,
        $body = $('<tbody>');

    $.each(data, function(index, obj) {
        if ($head === null) {
            // generate the first row if necessary
            $head = $('<tr>').append($.map(obj, function(value, name) {
                return $('<th>', { text: name });
            }));
        }
        // generate each row
        $('<tr>').append($.map(obj, function(value, name) {
            return $('<td>', { text: value });
        })).
            appendTo($body);
    });

    // append all the things    
    $("#myTable").append($head).append($body);
});

Обратите внимание, что использование определенного порядка свойств объекта не обязательно переносимо; спецификация языка не гарантирует соблюдение определенного порядка. Поэтому более стабильным решением является контроль заказа самостоятельно.

Answer 2

Попробуй это

$.getJSON(url , function(data) {
    var tbl_body = "";
    $.each(data, function() {
        var tbl_row = "";
        HeadKeys = '<tr></tr>';
        $.each(this, function(k , v){        
            tbl_row += "<td>"+v+"</td>";
            console.log( k +' : '+ v );
            HeadKeys += '<td><b>'+k+'</b></td>';
        })
       tbl_body += "<tr>"+tbl_row+"</tr>";                 
   });
   $("#myTable tbody").html(HeadKeys + tbl_body);
});

Исправлено jsfiddle