jQuery loop through and display json data in a table

Question

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.

Which particular fields you want to be filled in "Campaigns Type", "Lead Type" and "Recording" columns? — Mikaal Anwar
– Mikaal Anwar, Commented May 22, 2018 at 0:44
campaign type should be data[i].leadCall[0].campaign[0].name lead type should be data[i].leadCall[0].callType recording should be data[i].leadCall[0].recordingUrl — javapatriot
– javapatriot, Commented May 22, 2018 at 0:47

Mikaal Anwar · Accepted Answer · 2018-05-22 12:55:47Z

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.

Thanks @Mikaal! How would I get the same outcome using jQuery getJSON and then looping through each?
@javapatriot I have updated my answer. Please recheck. Also check out this jsfiddle for your question: jsfiddle.net/z366wk2c
There should be three total row. One containing the header and there should be 2 rows with data. Your fiddle only shows one row? Why is that?
@javapatriot It is because there were null values for the second row. I have added null checks and updated the jsfiddle here jsfiddle.net/z366wk2c/1

Collectives™ on Stack Overflow

jQuery loop through and display json data in a table

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related