通过ajax将数据附加到表中

Question

我在将数据附加到表体时遇到问题。代码$.ajax({  type:'GET',  url:'{{url('dashboard/customer-groups')}}/'+ordID,  success:function(data){    console.log(data);  //screenshot below  }});截屏上面的 ajax 代码返回的数据分为 2 个类别（组和客户）HTML<table id="data-table" class="table table-striped table-bordered">    <thead>    <tr>        <th>#</th>        <th>Name</th> // from customers array        <th>Company</th> // from customers array        <th>Province</th> // from customers array        <th>City</th> // from customers array        <th>Email</th> // from customers array        <th>Industry</th> // from customers array        <th>Group</th> // from group    </tr>    </thead>    <tbody id="table_customer"></tbody></table>任何的想法？

Answer 1

.each()您可以使用on success遍历响应数据并将它们附加到表主体中。

演示：

let  data = {customers: [

  {id: 1, name:'John', group_id: 111, industry_id: 'xyz', company: 'abc', province: 'aaa', city: 'vv', email: '[e-mail]'},

  {id: 2, name:'Kate', group_id: 222, industry_id: 'lmn', company: 'abc2', province: 'bbb', city: 'qq', email: '[e-mail]'}

]};

$(data.customers).each(function(_, i){

  var row = `<tr><td></td><td>${i.name}</td><td>${i.company}</td><td>${i.province}</td><td>${i.city}</td><td>${i.email}</td><td>${i.industry_id}</td><td>${i.group_id}</td></tr>`;

  $('#table_customer').append(row);

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table id="data-table" class="table table-striped table-bordered">

    <thead>

    <tr>

        <th>#</th>

        <th>Name</th> 

        <th>Company</th>

        <th>Province</th>

        <th>City</th>

        <th>Email</th> 

        <th>Industry</th> 

        <th>Group</th> 

    </tr>

    </thead>

    <tbody id="table_customer"></tbody>

</table>

Answer 2

    $.ajax({

      type:'GET',

      url:'{{url('dashboard/customer-groups')}}/'+ordID,

      success:function(data){

        const tr = $('tr');

        for (var key in data) {

           var obj = data[key];

           var id = "<td>"+obj.id+"</td>";

var group_id = "<td>"+obj.group_id+"</td>";

     // add more columns for other attributes

           var allTds = id+group_id;

         }

        tr.append(allTds);

       $('#data-table').append(tr);

      }

    });