我无法循环访问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);
})
});
我显然错过了与键/值配对的关系。所以,如果有人能让我直截了当,我会很感激。
答案 0 :(得分:1)
您在CodePen中使用了错误的选择器。基本上,你试图访问&#34;对象&#34;喜欢&#34;数组&#34;。必填字段的正确选择器为:
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);
}
&#13;
<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>
&#13;
如果你想使用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);
});
我还为此here创建了一个jsfiddle。由于您已经在&#34; Campaigndata&#34;中提供了JSON数据。对象,您不需要使用jQuery.getJSON()
或$.getJSON()
。有关详细信息,请参阅this。