在 html 中显示 AJAX 响应答案

【问题标题】：Displaying AJAX response in html在 html 中显示 AJAX 响应
【发布时间】：2018-03-06 15:55:11
【问题描述】：

我正在尝试在表中为我的 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>

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

【问题讨论】：

为什么要对它进行字符串化？不应该是例如：drawTable(data); ?!
您不应该使用JSON.stringify(data)，而是data，据我所知，您的绘图函数需要一个对象，通过 stringify 您可以将其返回为 JSON 字符串，而 jQuery 已经解析了 JSON到一个现成的对象
是的，应该没有 JSON.Stringify
另外我认为 drawTable 的第 1 行应该是 for (var i = 0; i

标签： javascript jquery ajax get

【解决方案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 函数中调用了它

【讨论】：

我觉得我需要的不仅仅是 data.TagMembers，而是 ContactName 单独？
但是数组中的每个对象都包含 ContactName 键。尝试使用静态数据，您会看到，您的 tds 已正确更新

【解决方案2】：

原来我需要对drawRow进行一些更改

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

【讨论】：