在 html 中顯示 AJAX 響應

Question

我正在嘗試從表中的 json 響應中為每個 ContactID 和 ContactName 附加帶有新行的 contactTable。 我正在將數據接收到控制台，但是當我嘗試將該數據插入到我的 html 文檔中時，我得到了每個undefined值。

html 結果

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

索引.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函數中調用了它

Answer 2

原來我需要對drawRow做一些改變

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