jquery - jQuery循环并在表格中显示json数据
问题描述
我在遍历 JSON 对象并在表中显示某些值时遇到问题。本质上,我希望为每个新的数据实例创建一个新行。下面是我为测试它而创建的 CodePen 的链接。有人可以让我知道我错过了什么。谢谢!
[ https://codepen.io/javapatriot/pen/wjOorM][1]
这里也是代码:
var campaigndata = {
"page": 1,
"pageSize": 50,
"totalCount": 1736,
"hasMore": true,
"data": [{
"id": 0,
"jobNumber": null,
"projectId": 0,
"businessUnit": null,
"type": null,
"leadCall": {
"id": 13090226,
"receivedOn": "2018-05-01T00:26:45.2176275",
"duration": "00:01:54",
"from": "8888888888",
"to": "9999999999",
"direction": "Inbound",
"callType": "NotLead",
"reason": {
"id": 10343577,
"name": "Advise Customer",
"lead": false,
"active": true
},
"recordingUrl": "url for sound",
"createdBy": {
"id": 16,
"name": "acme co"
},
"customer": null,
"campaign": {
"id": 57487,
"name": "Website",
"modifiedOn": "2017-11-16T19:48:23.4450982",
"category": null,
"active": false
},
"modifiedOn": "2018-05-01T00:41:04.4194829"
}
}, {
"id": 13056717,
"jobNumber": "13056717",
"projectId": 0,
"businessUnit": {
"id": 14850,
"active": false,
"name": "Service",
"quickbooksClass": null,
"tenant": null,
"modifiedOn": "2018-04-19T14:04:13.6694961"
},
"type": {
"id": 11665400,
"name": "Service Fee",
"modifiedOn": "2018-02-20T16:21:55.0979443"
},
"leadCall": {
"id": 13090231,
"receivedOn": "2018-05-01T00:40:45.5988514",
"duration": "00:02:09",
"from": "7777777777",
"to": "9999999999",
"direction": "Outbound",
"callType": null,
"reason": null,
"recordingUrl": "url for recording",
"createdBy": {
"id": 14722,
"name": "Jane Doe"
},
"customer": {
"id": 13056962,
"active": true,
"name": "john doe",
"email": "email@yahoo.com",
"balance": null,
"doNotMail": false,
"address": {
"street": "123 acme drive",
"unit": null,
"country": "USA",
"city": "Miami",
"state": "FL",
"zip": "33016",
"streetAddress": " 123 acme drive",
"latitude": 33.2222,
"longitude": -111.9999
},
"doNotService": false,
"type": "Residential",
"contacts": [{
"active": true,
"modifiedOn": "2018-04-25T17:12:14.931548",
"id": 13056963,
"type": "MobilePhone",
"value": "7777777777",
"memo": null
}, {
"active": true,
"modifiedOn": "2018-04-25T17:12:14.9325482",
"id": 13056964,
"type": "Email",
"value": "email@yahoo.com",
"memo": null
}],
"modifiedOn": "2018-04-25T17:12:14.9305488",
"memberships": [],
"hasActiveMembership": false,
"customFields": [],
"createdOn": "2018-04-25T17:12:14.9305488",
"createdBy": 11190885
},
"campaign": null,
"modifiedOn": "2018-05-01T01:02:06.8408116"
}
}]
};
jQuery.when (
jQuery.getJSON(campaigndata)
).done(function (data) {
jQuery.each(data, function (i, item) {
var campaign_table = ''
stCallsHTML += '<tr><td>' + data[i].leadCall[0].campaign[0].name + '</td><td>' + data[i].leadCall[0].callType + '</td><td>' + data[i].leadCall[0].recordingUrl + '</td></tr>';
jQuery('#campaign_table').append(campaign_table);
})
});
我显然错过了与键/值配对的关系。因此,如果有人可以让我直截了当,我将不胜感激。
解决方案
您在 CodePen 中使用了错误的选择器。基本上,您试图访问像“数组”这样的“对象”。必填字段的正确选择器是:
var campaignType = campaigndata.data[i].leadCall.campaign.name;
var leadType = campaigndata.data[i].leadCall.callType;
var recordingUrl = campaigndata.data[i].leadCall.recordingUrl;
以下是完整的解决方案:
var campaigndata = {
page: 1,
pageSize: 50,
totalCount: 1736,
hasMore: true,
data: [{
id: 0,
jobNumber: null,
projectId: 0,
businessUnit: null,
type: null,
leadCall: {
id: 13090226,
receivedOn: "2018-05-01T00:26:45.2176275",
duration: "00:01:54",
from: "8888888888",
to: "9999999999",
direction: "Inbound",
callType: "NotLead",
reason: {
id: 10343577,
name: "Advise Customer",
lead: false,
active: true
},
recordingUrl: "url for sound",
createdBy: {
id: 16,
name: "acme co"
},
customer: null,
campaign: {
id: 57487,
name: "Website",
modifiedOn: "2017-11-16T19:48:23.4450982",
category: null,
active: false
},
modifiedOn: "2018-05-01T00:41:04.4194829"
}
},
{
id: 13056717,
jobNumber: "13056717",
projectId: 0,
businessUnit: {
id: 14850,
active: false,
name: "Service",
quickbooksClass: null,
tenant: null,
modifiedOn: "2018-04-19T14:04:13.6694961"
},
type: {
id: 11665400,
name: "Service Fee",
modifiedOn: "2018-02-20T16:21:55.0979443"
},
leadCall: {
id: 13090231,
receivedOn: "2018-05-01T00:40:45.5988514",
duration: "00:02:09",
from: "7777777777",
to: "9999999999",
direction: "Outbound",
callType: null,
reason: null,
recordingUrl: "url for recording",
createdBy: {
id: 14722,
name: "Jane Doe"
},
customer: {
id: 13056962,
active: true,
name: "john doe",
email: "email@yahoo.com",
balance: null,
doNotMail: false,
address: {
street: "123 acme drive",
unit: null,
country: "USA",
city: "Miami",
state: "FL",
zip: "33016",
streetAddress: " 123 acme drive",
latitude: 33.2222,
longitude: -111.9999
},
doNotService: false,
type: "Residential",
contacts: [{
active: true,
modifiedOn: "2018-04-25T17:12:14.931548",
id: 13056963,
type: "MobilePhone",
value: "7777777777",
memo: null
},
{
active: true,
modifiedOn: "2018-04-25T17:12:14.9325482",
id: 13056964,
type: "Email",
value: "email@yahoo.com",
memo: null
}
],
modifiedOn: "2018-04-25T17:12:14.9305488",
memberships: [],
hasActiveMembership: false,
customFields: [],
createdOn: "2018-04-25T17:12:14.9305488",
createdBy: 11190885
},
campaign: null,
modifiedOn: "2018-05-01T01:02:06.8408116"
}
}
]
};
for (var i = 0; i < campaigndata.data.length; i++) {
var campaignType = "";
var leadType = "";
var recordingUrl = "";
if (campaigndata.data[i] != null)
if (campaigndata.data[i].leadCall != null) {
if (campaigndata.data[i].leadCall.campaign != null) {
campaignType = campaigndata.data[i].leadCall.campaign.name || "";
}
leadType = campaigndata.data[i].leadCall.callType || "";
recordingUrl = campaigndata.data[i].leadCall.recordingUrl || "";
}
var tableRowHTML =
"<tr><td>" +
campaignType +
"</td><td>" +
leadType +
"</td><td>" +
recordingUrl +
"</td></tr>";
jQuery("#campaign_table").append(tableRowHTML);
}
<table class="tg" id="campaign_table" border='1'>
<tr>
<th class="tg-yw4l" colspan="1">Campaigns Type</th>
<th class="tg-yw4l" colspan="1">Lead Type</th>
<th class="tg-yw4l" colspan="1">Recording</th>
</tr>
</table>
如果你想使用 jQuery,你应该这样做:
$.each(campaigndata.data, function(i) {
var campaignType = "";
var leadType = "";
var recordingUrl = "";
if (campaigndata.data[i] != null)
if (campaigndata.data[i].leadCall != null) {
if (campaigndata.data[i].leadCall.campaign != null) {
campaignType = campaigndata.data[i].leadCall.campaign.name || "";
}
leadType = campaigndata.data[i].leadCall.callType || "";
recordingUrl = campaigndata.data[i].leadCall.recordingUrl || "";
}
var tableRowHTML =
"<tr><td>" +
campaignType +
"</td><td>" +
leadType +
"</td><td>" +
recordingUrl +
"</td></tr>";
jQuery("#campaign_table").append(tableRowHTML);
});
我还为此创建了一个jsfiddle。由于您已经在“campaigndata”对象中获得了可用的 JSON 数据,因此您不需要使用jQuery.getJSON()
or $.getJSON()
。有关更多详细信息,请参阅此内容。
推荐阅读
- wordpress - 如何使用php隐藏元素
- windows - UWP 本地 Toast 通知不弹出
- c# - C# Nest Elasticsearch - 使用上下文描述符按布尔字段过滤完成建议
- timezone - 在 Power BI 上按 id 应用时区
- javascript - 返回具有 ascii 值和先前数组编号的新数组
- jquery - vue 不能使用 jquery 2 excel
- php - 我的邮件功能返回成功,但邮件中有法语口音时收不到邮件
- python - set() 如何从列表中删除重复项
- prometheus - 同一计数器名称的不同标签集?
- php - 如何解析从 XML 文件中提取的 PHP 变量?