Загрузить таблицу через список ajax

Question

Я пытаюсь загрузить таблицу с помощью post ajax, но она загружается неправильно.

table:

<table class="table table-responsive table-hover table-striped" id="tableestoque" style="font-size:12px;">
                <thead>
                    <tr>
                        <th>Nome Empresa</th>
                        <th>Qtd</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>

А вот как я загружаюсь:

$.each(data.listaEstoque, function (i, item) {
                $("#tableestoque").append("<tr"
                    + "<td>" + item.empresaProduto.nome + "</td>"
                    + "<td>" + item.qtd + "</td>"
                    + "</tr>")
            });

Это загружается так, я хочу, чтобы вы загружали каждый в столбец, и если у вас есть больше строк, каждый в ряд.

Answer 1

Я создал образец скрипка для вас. Прямо сейчас вы перебираете каждый элемент, а не каждый объект. Вы должны перебрать объект, используя оператор forEach .

var data = [{
  id: 1,
  name: 'Name1'
}, {
  id: 2,
  name: 'Name2'
}];
var $table = $("#tableestoque");
var $tr, $td1, $td2;

data.forEach(function(item) {
  $tr = $('<tr>');
  $td1 = $('<td>' + item.id + '</td>');
  $td2 = $('<td>' + item.name + '</td>');
  $tr.append($td1).append($td2);
  $table.append($tr);
});

Answer 2

Похоже, вам нужно добавить html к <tbody> следующим образом:

$.each(data.listaEstoque, function (i, item) {
                $("#tableestoque tbody").append("<tr"
                    + "<td>" + item.empresaProduto.nome + "</td>"
                    + "<td>" + item.qtd + "</td>"
                    + "</tr>")
            });