使用 Javascript 对象填充表

Question

我尝试查看其他帖子，但没有人按照我想要的方式帮助我。 我正在构建一个表，我需要用一些数据填充它。这是我的数据（或部分数据）：

 var vistorias = [
        { data: '15/05/2015', cliente: 'Viceri', prestador: 'Joaquim', tipo: 'Empresarial simples', empresaPrestadora: 'VistGroup', parecer: 'Bom' },
        { data: '10/05/2015', cliente: 'Krupp', prestador: 'Rafael', tipo: 'Maquinas', empresaPrestadora: 'Vistoriers', parecer: 'Execelente' },
        { data: '24/03/2015', cliente: 'Itautec', prestador: 'Thiago', tipo: 'Empresarial simples', empresaPrestadora: 'VistGroup', parecer: 'Bom' }];

这是我的桌子：

<table class="table table-striped table-bordered table-hover" id="sample_1">
    <thead>
        <tr>
            <th>
                Data
            </th>
            <th>
                Cliente
            </th>
            <th>
                Prestador
            </th>
            <th>
                Tipo
            </th>
            <th>
                Empresa Prestadora
            </th>
            <th>
                Parecer da Vistoria
            </th>
        </tr>
    </thead>
    <tbody id="TabelaVistorias"></tbody>
</table>

这是我现在尝试使用的代码：

$.each(vistorias, function (vistorias) {
            var nTr = "<tr>"
            nTr += "<td><p>" + vistorias[0] + "</p></td>";
            nTr += "<td><p>" + vistorias[1] + "</p></td>";
            nTr += "<td><p>" + vistorias[2] + "</p></td>";
            nTr += "<td><p>" + vistorias[3] + "</p></td>";
            nTr += "<td><p>" + vistorias[4] + "</p></td>";
            nTr += "<td><p>" + vistorias[5] + "</p></td>";
            nTr += "</tr>";

            $(nTr).appendTo('#TabelaVistorias');
        });

它们都是$Doc.ready 中的（数据和 JS 代码）。 我知道这很简单，但我做不到。

Answer 1

在$each回调函数中，第一个参数必须是index，第二个是object

 $.each(vistorias, function (index, v) {
        var nTr = "<tr>"
        nTr += "<td><p>" + v.data + "</p></td>";
        nTr += "<td><p>" + v.cliente + "</p></td>";
        nTr += "<td><p>" + v.prestador + "</p></td>";
        nTr += "<td><p>" + v.tipo + "</p></td>";
        nTr += "<td><p>" + v.empresaPrestadora + "</p></td>";
        nTr += "<td><p>" + v.parecer + "</p></td>";
        nTr += "</tr>";

        $(nTr).appendTo('#TabelaVistorias');
    });

Working Demo

Answer 2

每个参数都是索引和当前索引的值。您将索引用作数组没有任何意义。您需要使用第二个参数，并且需要引用对象上的键。

$.each(vistorias, function (ind, obj) {
    var nTr = "<tr>"
    nTr += "<td><p>" + obj.data + "</p></td>";
    nTr += "<td><p>" + obj.cliente + "</p></td>";
    /* and do the rest */
    $(nTr).appendTo('#TabelaVistorias');
});

Answer 3

我认为问题在于您试图访问数组中的对象，就好像它们是数组一样。您还有回调的参数不正确。试试这个：

$.each(vistorias, function (index, vistoria) {
        var nTr = "<tr>"
        nTr += "<td><p>" + vistoria.data + "</p></td>";
        nTr += "<td><p>" + vistoria.cliente + "</p></td>";
        nTr += "<td><p>" + vistoria.prestador + "</p></td>";
        nTr += "<td><p>" + vistoria.tipo + "</p></td>";
        nTr += "<td><p>" + vistoria.empresaPrestadora + "</p></td>";
        nTr += "<td><p>" + vistoria.parecer + "</p></td>";
        nTr += "</tr>";

        $(nTr).appendTo('#TabelaVistorias');
    });

Answer 4

$.each(vistorias, function (vistorias)

尝试将参数名称调整为唯一的，或者与原始数组或对象的变量名称不同。 vistorias at function (vistorias) 将是索引，或者是数组或对象的键；不是对象本身。 $.each() 的第二个参数是 value 或 object 属性。

jQuery.each( array, callback )

数组

类型：数组

要迭代的数组。

回调

类型：函数（整数 indexInArray，对象值）

将在每个对象上执行的函数。

---

尝试在初始 $.each() 内迭代的对象上使用嵌套的 $.each()

var tbody = $("#TabelaVistorias");

$.each(vistorias, function(key, value) {
  var tr = $("<tr />");
  $.each(value, function(k, v) {
    $("<td />", {
      html: "<p>" + v + "</p>"
    }).appendTo(tr)
  });
  tbody.append(tr)
})

var vistorias = [{
  data: '15/05/2015',
  cliente: 'Viceri',
  prestador: 'Joaquim',
  tipo: 'Empresarial simples',
  empresaPrestadora: 'VistGroup',
  parecer: 'Bom'
}, {
  data: '10/05/2015',
  cliente: 'Krupp',
  prestador: 'Rafael',
  tipo: 'Maquinas',
  empresaPrestadora: 'Vistoriers',
  parecer: 'Execelente'
}, {
  data: '24/03/2015',
  cliente: 'Itautec',
  prestador: 'Thiago',
  tipo: 'Empresarial simples',
  empresaPrestadora: 'VistGroup',
  parecer: 'Bom'
}];

var tbody = $("#TabelaVistorias");

$.each(vistorias, function(key, value) {
  var tr = $("<tr />");
  $.each(value, function(k, v) {
    $("<td />", {
      html: "<p>" + v + "</p>"
    }).appendTo(tr)
  });
  tbody.append(tr)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<table class="table table-striped table-bordered table-hover" id="sample_1">
  <thead>
    <tr>
      <th>
        Data
      </th>
      <th>
        Cliente
      </th>
      <th>
        Prestador
      </th>
      <th>
        Tipo
      </th>
      <th>
        Empresa Prestadora
      </th>
      <th>
        Parecer da Vistoria
      </th>
    </tr>
  </thead>
  <tbody id="TabelaVistorias"></tbody>
</table>