javascript - 在 html 中显示 AJAX 响应

Question

我正在尝试为 contactTable 追加表中我的 json 响应中每个 ContactID 和 ContactName 的新行。我正在将数据接收到控制台中，但是当我尝试将该数据插入到我的 html 文档中时，我得到了每个数据的 undefined 值。

html 结果

<tr>
  <th id="contactName"></th>
  <th id="contactID"></th>
</tr>
 <tr>
   <td>undefined</td> 
   <td>undefined</td>
</tr>

index.html

 <table id="contactTable">
    <tr>
      <th id="contactName"></th>
      <th id="contactID"></th>
    </tr>
 </table>

脚本.js

$(document).ready(function () {
    $.ajax({
        url: 'https://api2.******.com/crm/v1/rest/taggroups/1/contacts',
        type: 'GET',
        dataType: 'json',
        success: function(data, textStatus, jqXHR) {
                drawTable(JSON.stringify(data));
                drawRow(JSON.stringify(data));
            console.log(data);
            // $('#contacts').html(JSON.stringify(data, null));  returns pretty json
            {alert('Success! Enjoy your data!')};
         }, 
        error: function () { alert('Request failed'); },
        beforeSend: setHeader
    });
});


function drawTable(data) {
    for (var i = 0; i < data.length; i++) {
        drawRow(data[i]);
    }
}

function drawRow(rowData) {
    var row = $("<tr />")
    $("#contactTable").append(row); 
    row.append($("<td>" + rowData.ContactName + "</td>"));
    row.append($("<td>" + rowData.ContactID + "</td>"));
}

function setHeader(xhr) {
    xhr.setRequestHeader('Authorization', 'Basic ******');
    xhr.setRequestHeader('content-type', 'application/json');
};  

这里是json响应的第一条记录

Object
    TagMembers:Array(185)
        [0 … 99]
            0:
            ContactID:2732270
            ContactName:"First Last"
            RecAdd:"/Date(1427853954000-0700)/"
            RecAddUser:0
            RecID:3
            TagGroupID:1 

Answer 1

你的数据看起来像这样:

var data = {
    TagMembers: [
        {ContactID:2732270,
        ContactName:"First",
        RecAdd:"/Date(1427853954000-0700)/",
        RecAddUser:0,
        RecID:3,
        TagGroupID:4
        },
        {ContactID:2732275,
        ContactName:"Second",
        RecAdd:"/Date(1427853954000-0700)/",
        RecAddUser:0,
        RecID:4,
        TagGroupID:5
        },
        {ContactID:2732277,
        ContactName:"Third",
        RecAdd:"/Date(1427853954000-0700)/",
        RecAddUser:0,
        RecID:5,
        TagGroupID:5
        }]  
  };

这意味着你应该发送给 drowTable 函数而不是 data 而不是 JSON.stringify(data) (不需要将对象转换为字符串)，但是 data.TagMembers 数组:drawTable(data.TagMembers); 因此您可以循环对象并从每个对象获取数据。而且也不需要额外调用 drawRow(JSON.stringify(data)); 它是多余的，因为你已经在 drowTable 函数中调用了它