使用jQuery遍历JSON数据并在表格展示的问题求助

我帮你梳理下代码里的几个关键问题，以及修正后的版本：

主要问题分析 #

• 没必要用jQuery.getJSON：你的campaigndata是本地已经定义好的JSON对象，不是远程URL，直接用就行，不需要发起AJAX请求。
• 遍历目标错误：你需要遍历的是campaigndata.data这个数组，而不是整个对象，因为实际的每条数据都在data字段里。
• JSON结构理解错误：leadCall是单个对象（不是数组），所以不能用leadCall[0]来访问；同理campaign也是单个对象或者null，直接访问属性前要做空判断，避免报错。
• 变量名混淆：你定义了campaign_table但拼接的时候用了stCallsHTML，最后又appendcampaign_table，这会导致没有内容插入。

修正后的代码 #

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" } }] };

// 直接处理本地的campaigndata对象
jQuery.each(campaigndata.data, function (i, item) {
    // 处理campaign为空的情况，避免报错
    var campaignName = item.leadCall.campaign ? item.leadCall.campaign.name : '无';
    var callType = item.leadCall.callType ? item.leadCall.callType : '无';
    
    var rowHTML = '<tr><td>' + campaignName + '</td><td>' + callType + '</td><td>' + item.leadCall.recordingUrl + '</td></tr>';
    jQuery('#campaign_table').append(rowHTML);
});

关键修正点说明 #

1. 移除不必要的AJAX请求：直接使用本地的campaigndata，不需要jQuery.when和getJSON。
2. 正确遍历数组：遍历campaigndata.data，这才是存储每条数据的数组。
3. 处理空值：因为有些leadCall.campaign或callType是null，所以用三元运算符做判断，避免出现undefined或者报错。
4. 变量名统一：不再混淆stCallsHTML和campaign_table，直接定义rowHTML拼接每行内容，然后追加到表格中。
5. 正确访问对象属性：item.leadCall是单个对象，直接用.campaign.name访问，不需要加[0]（只有数组才需要索引访问）。

这样修改后，就能正确遍历每条数据并生成对应的表格行了。

内容的提问来源于stack exchange，提问作者javapatriot