javapatriot
Reputation: 353
jQuery loop through and display json data in a table
I am having trouble looping through a JSON object and displaying certain values in a table. Essentially I would like for a new row to be created with each new instance of data. Below if a link to the CodePen I created to test this. Can someone let me know what I am missing. Thanks!
[https://codepen.io/javapatriot/pen/wjOorM][1]
Here is the code as well:
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 protected]",
"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 protected]",
"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);
})
});
I am clearly missing the relationship with the key / value pairing. So if anyone can set me straight I would appreciate it.
Upvotes: 0
Views: 57
Answers (1)
Mikaal Anwar
Reputation: 1791
You were using the wrong selectors in your CodePen. Basically, you were trying to access "objects" like "arrays". The proper selectors for the required fields would be:
var campaignType = campaigndata.data[i].leadCall.campaign.name;
var leadType = campaigndata.data[i].leadCall.callType;
var recordingUrl = campaigndata.data[i].leadCall.recordingUrl;
Below is the complete solution:
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 protected]",
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 protected]",
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>If you want to use jQuery, you should do something like this:
$.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);
});
I have also created a jsfiddle for this here. Since you already have the JSON data available in "campaigndata" object, you do not need to use jQuery.getJSON() or $.getJSON(). Please see this for more details.
Upvotes: 1
Related Questions
- Looping through JSON and display each array item in HTML table
- Displaying JSON in table with JQuery
- Display json data in html table using jQuery
- json data in variable and display in table
- How to display json data dynamically in table format using jquery?
- How to have jquery loop over json data results to create a two column table
- how to process json data through an .each loop into html table
- parse json with jquery and display data in a html table
- populate json object from table
- getting data from a json array into a table