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>

的index.html

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

的script.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的数组：{{1所以你可以循环对象并从每个对象中获取数据。并且无需额外调用drawTable(data.TagMembers);这是多余的，因为您已在drawRow(JSON.stringify(data));函数内调用它

Answer 2

原来我需要对drawRow

进行一些更改

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

在html中显示AJAX响应

2 个答案: