javascript - 如何循环遍历多个json数组并显示结果

Question

我正在循环 JSON 结果，但我的响应中有多个数组。

在下面的行中我只想显示killdata响应

trHTML += '<tr class="gradeA"><td>' + value.killdata.AcctNo + '</td></tr>';

在下面的行中，我只想显示铁路数据响应

 trRailHTML += '<tr class="gradeA"><td>' + value.raildata.kill_date + '</td></tr>';

请建议如何在两个不同的表中显示两个数组数据。

以下是我的回复。

{"raildata":[{"id":15,"kill_date":"2019-03-27T00:00:00+00:00","rail_no":1,"scale_no":10,"created":"2019-03-26T07:35:01+00:00","modified":"2019-03-26T07:35:01+00:00","is_deleted":0}],"killdata":[{"id":59,"acct_id":1883,"KillDate":"2019-03-27T00:00:00+00:00","AcctNo":"UP1011","account_drpdown":"112 | Archbold Elevator (1011) | Misc 1011 | None | UP1011 | OH","BarnHogs":22,"LiveWt":22,"InvAmt":"1","Condemned":1,"Hauling":"1","PrintEvery":null,"Adjustment":11,"BegNo":null,"EndNo":null,"GroupedAcct":"UP","GroupRecId":"138","GroupAcctDesc":"Archbold Elevator (1011); Misc 1011- None","RecCreationTime":"2019-03-25T10:41:14+00:00","MPRState":"OH","Ownership":"ROUTH","NotRouthCompany":null,"Country":"US","CalculationPurchaseType":null,"CalculationCarcassBasePrice":null,"CalculationLiveBasePrice":null,"created":"2019-03-25T10:41:14+00:00","is_deleted":0},{"id":102,"acct_id":1883,"KillDate":"2019-03-27T00:00:00+00:00","AcctNo":"UP1011","account_drpdown":"3 | Black, Bryan | PGI | None | UP1011 | OH","BarnHogs":11,"LiveWt":0,"InvAmt":"","Condemned":0,"Hauling":"","PrintEvery":null,"Adjustment":null,"BegNo":null,"EndNo":null,"GroupedAcct":"UP","GroupRecId":"19","GroupAcctDesc":"Black, Bryan; PGI- None","RecCreationTime":"2019-03-26T08:09:51+00:00","MPRState":"OH","Ownership":"ROUTH","NotRouthCompany":null,"Country":null,"CalculationPurchaseType":null,"CalculationCarcassBasePrice":null,"CalculationLiveBasePrice":null,"created":"2019-03-26T08:09:51+00:00","is_deleted":0}]}

下面的代码可以正常工作，但我想在一个表中显示killdata结果，在第二个表中显示raildata结果..

$(document).ready(function(){
$('.read').prop('disabled', true);
$('#client_treat_date').datepick({ 
    onClose: function(dates) { 
        $(this).blur();
        ajaxRequest = $.ajax({
        url: '<?= Router::url(['controller' => 'Killsheets', 'action' => 'listajaxkilldata']) ?>',
        type: 'POST',
        data: {killldate: $("#client_treat_date").val()},
        dataType: "json",
        success: function(response) {
            $('#ibox1').children('.ibox-content').toggleClass('sk-loading');  
                var trHTML = ''; 
                var trRailHTML = ''; 
                $(response).each(function (i,value) {                                
                    trHTML += '<tr class="gradeA"><td>' + value.killdata.AcctNo + '</td></tr>';
                    trRailHTML += '<tr class="gradeA"><td>' + value.raildata.kill_date + '</td></tr>';
                });                              
            $('#listKill').html(trHTML);
            $('#listRail').html(trRailHTML);
        }            

    }        
}); 
});

Answer 1

问题是因为您试图循环响应对象。相反，您需要对该对象的 killdata 和 raildata 属性中包含的数组进行两个单独的循环。

请注意，通过使用 map() 生成包含要添加到表中的每行的 HTML 字符串的数组，可以更简洁地完成此操作。试试这个:

var trKillHTML = response.killdata.map(function(killdata) {
  return '<tr class="gradeA"><td>' + killdata.AcctNo + '</td></tr>';
});

var trRailHTML = response.raildata.map(function(raildata) {
  return '<tr class="gradeA"><td>' + raildata.kill_date + '</td></tr>';
});

$('#listKill').html(trKillHTML);
$('#listRail').html(trRailHTML);

var response = {
  "raildata": [{
    "id": 15,
    "kill_date": "2019-03-27T00:00:00+00:00",
    "rail_no": 1,
    "scale_no": 10,
    "created": "2019-03-26T07:35:01+00:00",
    "modified": "2019-03-26T07:35:01+00:00",
    "is_deleted": 0
  }],
  "killdata": [{
    "id": 59,
    "acct_id": 1883,
    "KillDate": "2019-03-27T00:00:00+00:00",
    "AcctNo": "UP1011",
    "account_drpdown": "112 | Archbold Elevator (1011) | Misc 1011 | None | UP1011 | OH",
    "BarnHogs": 22,
    "LiveWt": 22,
    "InvAmt": "1",
    "Condemned": 1,
    "Hauling": "1",
    "PrintEvery": null,
    "Adjustment": 11,
    "BegNo": null,
    "EndNo": null,
    "GroupedAcct": "UP",
    "GroupRecId": "138",
    "GroupAcctDesc": "Archbold Elevator (1011); Misc 1011- None",
    "RecCreationTime": "2019-03-25T10:41:14+00:00",
    "MPRState": "OH",
    "Ownership": "ROUTH",
    "NotRouthCompany": null,
    "Country": "US",
    "CalculationPurchaseType": null,
    "CalculationCarcassBasePrice": null,
    "CalculationLiveBasePrice": null,
    "created": "2019-03-25T10:41:14+00:00",
    "is_deleted": 0
  }, {
    "id": 102,
    "acct_id": 1883,
    "KillDate": "2019-03-27T00:00:00+00:00",
    "AcctNo": "UP1011",
    "account_drpdown": "3 | Black, Bryan | PGI | None | UP1011 | OH",
    "BarnHogs": 11,
    "LiveWt": 0,
    "InvAmt": "",
    "Condemned": 0,
    "Hauling": "",
    "PrintEvery": null,
    "Adjustment": null,
    "BegNo": null,
    "EndNo": null,
    "GroupedAcct": "UP",
    "GroupRecId": "19",
    "GroupAcctDesc": "Black, Bryan; PGI- None",
    "RecCreationTime": "2019-03-26T08:09:51+00:00",
    "MPRState": "OH",
    "Ownership": "ROUTH",
    "NotRouthCompany": null,
    "Country": null,
    "CalculationPurchaseType": null,
    "CalculationCarcassBasePrice": null,
    "CalculationLiveBasePrice": null,
    "created": "2019-03-26T08:09:51+00:00",
    "is_deleted": 0
  }]
}

var trKillHTML = response.killdata.map(function(killdata) {
  return '<tr class="gradeA"><td>' + killdata.AcctNo + '</td></tr>';
});

var trRailHTML = response.raildata.map(function(raildata) {
  return '<tr class="gradeA"><td>' + raildata.kill_date + '</td></tr>';
});

$('#listKill').html(trKillHTML);
$('#listRail').html(trRailHTML);

table {
  border: 1px solid #CCC;
}

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