javascript - 如何遍历多个json数组并显示结果
问题描述
我正在遍历 JSON 结果,但我的响应中有多个数组。
在下面的行中,我只想显示 killdata 响应
trHTML += '<tr class="gradeA"><td>' + value.killdata.AcctNo + '</td></tr>';
在下面的行中,我只想显示 raildata 响应
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);
}
}
});
});
解决方案
问题是因为您试图遍历响应对象。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>
推荐阅读
- c# - 将 JSON 字符串解析为列表
- c++ - 如何在Qt中以浮动状态显示工具栏的标题?
- sql - 将多行组合成单行 SQL
- php - Codeigniter3 无法删除 xampp 上的 index.php
- java - 数组列表
不在 Java 8 (1.8) 中存储用户输入的整数 - yarnpkg - 全球安装包在哪里?
- javascript - 进行切换以向具有特定类的所有元素添加/删除类
- python-3.x - 我需要一种最简单的方法来使用 python 脚本更改文件的内容
- java - 在 SAP Cloud SDK 中使用 Java 为 SFSF 生成 VDM:生成的 URI 错误
- junit - Mockito 核心匹配器-GreaterThan