[英]Displaying AJAX response in html
I'm trying to append the contactTable with new rows for each ContactID and ContactName from my json response in a table.我正在尝试从表中的 json 响应中为每个 ContactID 和 ContactName 附加带有新行的 contactTable。 I am receiving data into the console but when I try to insert that data into my html document, I get a undefined
value for each.我正在将数据接收到控制台,但是当我尝试将该数据插入到我的 html 文档中时,我得到了每个undefined
值。
html result html 结果
<tr>
<th id="contactName"></th>
<th id="contactID"></th>
</tr>
<tr>
<td>undefined</td>
<td>undefined</td>
</tr>
index.html索引.html
<table id="contactTable">
<tr>
<th id="contactName"></th>
<th id="contactID"></th>
</tr>
</table>
script.js脚本.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');
};
Here's the first record of the json response这是json响应的第一条记录
Object
TagMembers:Array(185)
[0 … 99]
0:
ContactID:2732270
ContactName:"First Last"
RecAdd:"/Date(1427853954000-0700)/"
RecAddUser:0
RecID:3
TagGroupID:1
your data looks something like this:您的数据如下所示:
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
}]
};
This means you should send to drowTable
function not data
and not JSON.stringify(data)
(no need to convert object to string), but array of data.TagMembers
: drawTable(data.TagMembers);
这意味着你应该发送到drowTable
函数而不是data
而不是JSON.stringify(data)
(不需要将对象转换为字符串),而是data.TagMembers
数组: drawTable(data.TagMembers);
so you can loop objects and get data form each one of them.所以你可以循环对象并从每个对象中获取数据。 And also no need to additional call to drawRow(JSON.stringify(data));
而且也不需要额外调用drawRow(JSON.stringify(data));
it is redundant, becase your already calling to it inside drowTable
function这是多余的,因为您已经在drowTable
函数中调用了它
Turns out I neede to make some changes to drawRow
原来我需要对drawRow
做一些改变
function drawRow(data) {
var row = $("<tr />")
$("#contactTable").append(row);
row.append($("<td>" + data.ContactName + "</td>"));
row.append($("<td>" + data.ContactID + "</td>"));
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.