students.json
{
"students": [
{
"studentname": "Rohit Kumar",
"grade": "A",
"student": [
{
"SNo": "1",
"Subject": "Maths",
"Concept": "Numbers"
},
{
"SNo": "2",
"Subject": "Maths",
"Concept": "Number System"
}
]
}
]
}
的index.html
<html>
<head>
<title>iTop Bird Eye View</title>
<link href="css/style.css" rel="stylesheet">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>
<script>
$.getJSON("students.json").then(function(data)
{console.log(data);
var tr = data
for (var i = 0; i < data.students.length; i++) {
var tr = $('<tr/>');
$(tr).append("<td>" + data.students[i].SNo + "</td>");
$(tr).append("<td>" + data.students[i].Subject + "</td>");
$(tr).append("<td>" + data.students[i].Concept + "</td>");
$('.table1').append(tr);
}
});
</script>
</head>
<body>
<div class="page">
<table width="100%" border="0" cellspacing="0" cellpadding="0" height="90%">
<tr valign="top" align="center">
<td>
<table width="95%" id="s_name">
<tr>
<td>Student Name: {{ }}</td>
<td align="right">Grade: {{ }}</td>
</tr>
</table>
<hr></hr>
<table class="data-table table1">
<thead>
<tr>
<th>SNo.</th>
<th>Subject</th>
<th>Concept</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>
我是json中的新手。在这段代码中，我在我的students.json文件中嵌套了数组，我希望将json文件数据显示到index.html文件中，但现在它可能对我没有显示任何内容。我不知道我在哪里做错了。那么，我该如何解决这个问题呢？请帮帮我。
Thnak You
答案 0 :(得分：0)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<html>
<head>
<title>iTop Bird Eye View</title>
</head>
<body>
<div class="page">
<table width="100%" border="0" cellspacing="0" cellpadding="0" height="90%">
<tr valign="top" align="center">
<td>
<table width="95%" id="s_name">
<tr>
<td>Student Name: {{ }}</td>
<td align="right">Grade: {{ }}</td>
</tr>
</table>
<hr></hr>
<table class="data-table table1">
<thead>
<tr>
<th>SNo.</th>
<th>Subject</th>
<th>Concept</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</td>
</tr>
</table>
</div>
<script>
var data = {
"students": [
{
"studentname": "Rohit Kumar",
"grade": "A",
"student": [
{
"SNo": "1",
"Subject": "Maths",
"Concept": "Numbers"
},
{
"SNo": "2",
"Subject": "Maths",
"Concept": "Number System"
}
]
}
]
};
var tr = data
for (var i = 0; i < data.students.length; i++) {
var els = $('#s_name td');
els[0].innerText = "Student Name: " + data.students[i].studentname;
els[1].innerText = "Grade: " + data.students[i].grade;
for(var j = 0;j < data.students[i].student.length;j++) {
var tr = $('<tr/>');
$(tr).append("<td>" + data.students[i].student[j].SNo + "</td>");
$(tr).append("<td>" + data.students[i].student[j].Subject + "</td>");
$(tr).append("<td>" + data.students[i].student[j].Concept + "</td>");
$('.table1').append(tr);
}
}
</script>
</body>
</html>
基于你上面提供的json，你需要做以下事情，但我仍然认为json有些不对劲。请仔细检查以确定。我会相应地编辑我的答案
var tr = data
for (var i = 0; i < data.students.length; i++) {
var els = $('#s_name td');
els[0].innerText = "Student Name: " + data.students[i].studentname;
els[1].innerText = "Grade: " + data.students[i].grade;
for(var j = 0;j < data.students[i].student.length;j++) {
var tr = $('<tr/>');
$(tr).append("<td>" + data.students[i].student[j].SNo + "</td>");
$(tr).append("<td>" + data.students[i].student[j].Subject + "</td>");
$(tr).append("<td>" + data.students[i].student[j].Concept + "</td>");
$('.table1').append(tr);
}
}
答案 1 :(得分：0)
您已经掌握了所需的基础，但我建议您进行一些更改以及解决问题。
你的JSON有一系列学生，有一个名字和一个年级，然后还有一个数组，所以你需要循环学生，并循环每个子数组，以获得其余的信息。下面的代码显示了。
我已经在这个页面上，在片段中使它工作了，所以你可以看到它的实际效果。
我已将其修改为将表格构建为HTML字符串，然后在一次点击中将其添加到页面中。它比一遍又一遍地使用.append()要好得多。我还从头开始构建表并包含表，因此如果要更改结构或添加任何额外属性（例如css类名），则必须修改生成的HTML。 / p>
var data = {
"students": [{
"studentname": "Rohit Kumar",
"grade": "A",
"student": [{
"SNo": "1",
"Subject": "Maths",
"Concept": "Numbers"
}, {
"SNo": "2",
"Subject": "Maths",
"Concept": "Number System"
}]
}, {
"studentname": "Archer",
"grade": "A++",
"student": [{
"SNo": "1",
"Subject": "Stack Overflow",
"Concept": "Ruling"
}, {
"SNo": "2",
"Subject": "Stack Overflow",
"Concept": "Being a boss"
}, {
"SNo": "3",
"Subject": "Stack Overflow",
"Concept": "Answering your question"
}]
}]
};
var html = "<table width='100%' border='0' cellspacing='0' cellpadding='0' height='90%'>";
for (var i = 0, il = data.students.length; i < il; i++) {
html += "<tr valign='top' align='center'>";
html += "<td>";
// add the student information
html += "<table width='95%'>";
html += "<tr valign='top' align='center'>";
html += "<td>Student Name: " + data.students[i].studentname + "</td>";
html += "<td>Grade: " + data.students[i].grade + "</td>";
html += "</tr>";
html += "</table>";
html += "<table class='data-table table1'>";
html += "<thead>";
html += "<tr>";
html += "<th>SNo.</th>";
html += "<th>Subject</th>";
html += "<th>Concept</th>";
html += "</tr>";
html += "</thead>";
html += "<tbody>";
// add the subject information
for (var j = 0, jl = data.students[i].student.length; j < jl; j++) {
html += "<tr>";
html += "<td>" + data.students[i].student[j].SNo + "</td>";
html += "<td>" + data.students[i].student[j].Subject + "</td>";
html += "<td>" + data.students[i].student[j].Concept + "</td>";
html += "</tr>";
}
html += "</tbody>";
html += "</table>";
html += "</td>";
html += "</tr>";
}
html += "</table>";
document.getElementById("student-table-container").innerHTML = html;<div id="student-table-container"></div>