数组数据不会显示在表中
Array data wont display in a table
我有一个ajax函数,它向api发送get请求,并以以下格式返回数据-
{
"firstname": "John",
"lastname": "Doe",
"email": "doej@gmail.com",
"subjects": [
{
"id": 1,
"name": "maths"
},
{
"id": 2,
"name": "chemistry"
}
]
},
我需要在表格中显示这些数据,但我很难使主题数组正确显示(在一个表格单元格中显示为列表)。我试图将数组数据放入主表中的另一个表中,但没有成功。我认为我在迭代循环中的某个地方出错了。
function getPeople() {
$.ajax({
type: "GET",
url: "http://example.com",
contentType: "application/json; charset=utf-8",
crossDomain: true,
dataType: "json",
success: function (data, status, jqXHR) {
// fill a table with the JSON
$("table.mytable").html("<tr><th></th><th>First Name</th><th>Last Name</th><th>Subjects</th></tr>" );
for (var i = 0; i < data.length; i++) {
for (var j = 0; j < data[i].subjects.length; j++) {
var subjects = data[i].subjects[j];
$("table.insidetable").append('<tr><td>' + subjects + 'tr><td>')
}
$("table.mytable").append('<tr><td><input type = "checkbox" id = '+data[i].id+'>' + "</td><td>" + data[i].firstname + "</td><td>" + data[i].lastname + "</td><td>" + "table.insidetable" + "</td></tr>");
}
},
error: function (jqXHR, status) {
// error handler
console.log(jqXHR);
alert('fail' + status.code);
}
});
}
下面是正在运行(测试)的代码。
var data = [{
"firstname": "John",
"lastname": "Doe",
"email": "doej@gmail.com",
"subjects": [
{
"id": 1,
"name": "maths"
},
{
"id": 2,
"name": "chemistry"
}
]
},
{
"firstname": "Steve",
"lastname": "Gentile",
"email": "steve@gmail.com",
"subjects": [
{
"id": 1,
"name": "history"
},
{
"id": 2,
"name": "geography"
}
]
}];
$("table.mytable").html("<tr><th></th><th>First Name</th><th>Last Name</th><th>Subjects</th></tr>");
for (var i = 0; i < data.length; i++) {
var subjectList = '';
for (var j = 0; j < data[i].subjects.length; j++) {
subjectList += '<li>' + data[i].subjects[j].name + '</li>';
}
$("table.mytable").append('<tr><td><input type="checkbox" id=' + i +'/></td><td>' + data[i].firstname + '</td><td>' + data[i].lastname + '</td><td><ul>' + subjectList + '</ul></td></tr>');
}
下面的陈述似乎有很多问题,比如
- 标签未正确关闭
- 正在使用不存在的属性(data[i].id)
- 单引号和双引号不匹配
$("table.mytable").append('<tr><td><input type = "checkbox" id = '+data[i].id+'>' + "</td><td>" +data[i].firstname + "</td><td>" + data[i].lastname + "</td><td>" + "table.insidetable"+ "</td></tr>");
猜测您是否缺少'<'
?
行中:
$("table.insidetable").append('<tr><td>' + subjects + 'tr><td>')
还有
$("table.mytable").append('<tr><td><input type = "checkbox" id = '+data[i].id+'>' + "</td><td>" + data[i].firstname + "</td><td>" + data[i].lastname + "</td><td>" + "table.insidetable" + "</td></tr>");
我认为你不应该附加"表.内部表"?这将被视为值"table.intertable",而不是表的内容。我认为这应该是类似$("table.insidetable").val()
的东西
相关文章:
- 如何通过所选索引(AngularJS)在模态弹出窗口中显示数据
- Angular渲染元素,但不渲染;t显示数据
- 如何在分页事件中突出显示数据表中的单词
- Angular JS和Node路由/布线-仅在页面刷新后显示数据
- MVC中关于表的自定义工具提示-每行显示数据
- Highcharts:根据表单输入动态显示数据
- 重置transform:rotate(),方法是移除并追加在追加和重绘图表后未显示数据的画布
- jqGrid无法显示数据
- 显示数据的最快方式
- 如何从jquery日期和时间选择器中选择和显示数据
- 我的复选框没有't使用的循环来显示数据
- 如何在状态输入ui路由器时立即显示模板,然后当承诺被解决时显示数据
- 车把模板不显示数据
- 如何完成表单后使用 AJAX 重定向并在其他页面上显示数据
- Html5 Web 存储未在第二页中显示数据
- ASP.Net VB - 显示数据折叠样式
- 正确禁止显示数据表中的警告
- 在使用 JS 进行选择时在文本框中显示数据
- 如何使用 C# 和 Angular js 在视图上显示数据
- 在轨道上的 Ruby 文本字段中动态显示数据