Правильно отформатируйте таблицу с помощью jQuery и AJAX

Question

У меня есть таблица, которую я пытаюсь заполнить данными, которые я собираю с помощью AJAX. Данные находятся в фиде JSON. Я могу заполнить таблицу наполовину правильно, но буду признателен за некоторые рекомендации по ее правильному форматированию.

Таблица в настоящее время выглядит так:

https://www.dropbox.com/s/9uwlge12n1skoxc/Screenshot%202019-04-04%2013.27.29.png?dl=0

AJAX Call:

$(document).ready(function(){
    $.ajax({
        url: 'engine.php',
        type: 'GET',
        success: function(data){
             var data = $.parseJSON(data);
            $.each(data, function (k, v) {
                $('#fillinthedatahere').append('<td>'+v.symbol+'</td><td>'+v.timeframe+'</td><td>'+v.signal+'</td><td>'+v.dd+'</td><td>'+v.hd+'</td><td>'+v.opportunity+'</td><td>'+v.notes+'</td>');
            });
        }
    });

});

Таблица:

 <table id="snapshot" style="width: 100%; height: 100%;">
    <tr>
        <td>Pair</td>
        <td>Timeframe</td>
        <td>Action</td>
        <td>Daily Direction</td>
        <td>Hourly Direction</td>
        <td>Opportunity</td>
        <td>Notes</td>
    </tr>
    <tr id="fillinthedatahere">

    </tr>
</table>

Предполагается, что каждая «пара» должна иметь свой собственный ряд. Итак, строка с парой 1 и всеми ее данными, строка с парой 2 и всеми ее данными и так далее. Я понимаю, что причина в том, что все это печатается в одной строке, а не в отдельных, из-за написанного мной кода, но я не уверен, как его написать, чтобы он правильно форматировал.

Цените любого, кто может вести меня в правильном направлении!

Answer 1

Измените fillinthedatahere на <tbody>, затем на каждой итерации откройте новую html-строку с <tr> и закройте с помощью </tr>, чтобы создать новую строку для каждого объекта в массиве

 <table id="snapshot" style="width: 100%; height: 100%;">
    <tr>
        <td>Pair</td>
        <td>Timeframe</td>
        <td>Action</td>
        <td>Daily Direction</td>
        <td>Hourly Direction</td>
        <td>Opportunity</td>
        <td>Notes</td>
    </tr>
    <tbody id="fillinthedatahere">

    </tbody>
</table>

JS

$.each(data, function(k, v) {
  $('#fillinthedatahere')
    .append('<tr><td>' + v.symbol + '</td>...<td>' + v.notes + '</td></tr>');
});