jQuery循环并在表中显示json数据

时间:2018-05-22 00:35:22

标签: 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);                    

                        })
                    }); 

我显然错过了与键/值配对的关系。所以,如果有人能让我直截了当,我会很感激。

1 个答案:

答案 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;

以下是完整的解决方案:

&#13;
&#13;
    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;
&#13;
&#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