无法获取JSON字符串的元素
无法获取JSON字符串的元素
提问于 2019-09-24 17:31:40
我是javascript的新手，我正在尝试使用javascript和html显示存储在本地存储中的对象数组，并在表的td标记中显示JSON字符串的每个元素
在studentList.js文件中，首先，我创建了一个Student对象：
function Student(id, name, birthDay, gender, falcuty, point ) {
this.id = id
this.name = name
this.birthDay = birthDay
this.gender = gender
this.falcuty = falcuty
this.point = point
}
var table = document.getElementById("table-stud")和一个“Student”对象的数组：
var collection = [];
collection.push(new Student("01","A","20/11/1998","M","IT","8.0"),
new Student("02","B","2/1/1998","F","IT","8.0"),
new Student("03","C","9/9/1997","F","CK","8.8"))将学生保存在本地存储中：
function saveStudent(collection) {
for(var i = 0; i < collection.length; i++) {
var studentObjectSerialiseData = JSON.stringify(collection[i])
console.log(studentObjectSerialiseData)
window.localStorage.setItem("student"+i, studentObjectSerialiseData)
}
} 显示学生：
function getStudents() {
console.log(Student.length)
for(var i = 0; i < collection.length; i++) {
var studentObjectSerialiseData = window.localStorage.getItem("student"+i)
var temp = JSON.parse(studentObjectSerialiseData)
var tr = document.createElement("tr")
for(var j = 0; j < Student.length; j++) {
var td = document.createElement("td")
td.innerText = temp[j]
tr.appendChild(td)
}
table.appendChild(tr)
}
}
saveStudent(collection);
getStudents();在HTML文件中，我调用了studentList.js文件，并将id添加到‘localStorage’标记中，表格工作得很好，但当我想要显示时，发生了以下情况：
id Name birthDay Gender Falcuty Point
undefined undefined undefined undefined undefined undefined
undefined undefined undefined undefined undefined undefined
undefined undefined undefined undefined undefined undefined请帮我解决这个问题！
回答 4
Stack Overflow用户
发布于 2019-09-24 17:51:51
问题主要出在您试图循环遍历Student的键的部分。使用Object.keys来实现它：
function getStudents() {
for (var i = 0; i < collection.length; i++) {
var studentObjectSerialiseData = window.localStorage.getItem("student" + i)
var temp = JSON.parse(studentObjectSerialiseData)
var tr = document.createElement("tr")
for (var j = 0; j < Object.keys(temp).length; j++) {
var td = document.createElement("td")
console.log(temp)
td.innerText = temp[Object.keys(temp)[j]]
tr.appendChild(td)
}
table.appendChild(tr)
}
}有关工作示例，请参阅此代码片段：https://jsbin.com/koqikiquzu/1/edit?html,js,output (尝试通过SO自己的游乐场嵌入，但在这里使用localStorage有点棘手)。
Stack Overflow用户
发布于 2019-09-24 17:48:30
getStudents()中的temp是一个对象，所以你也需要遍历它。
function getStudents() {
for (var i = 0; i < collection.length; i++) {
var studentObjectSerialiseData = window.localStorage.getItem("student" + i)
var temp = JSON.parse(studentObjectSerialiseData)
var tr = document.createElement("tr")
for (var j = 0; j < Student.length; j++) {
for(var i in temp) {
var td = document.createElement("td")
td.innerText = temp[i]
tr.appendChild(td)
}
}
table.appendChild(tr)
}
}Stack Overflow用户
发布于 2019-09-24 18:04:13
如果j和i相等，你可以在j for循环中使用for in loop并将其附加到tr标签，从而获得结果。
function getStudents() {
for (var i = 0; i < collection.length; i++) {
var studentObjectSerialiseData = window.localStorage.getItem("student" + i);
var temp = JSON.parse(studentObjectSerialiseData);
var tr = document.createElement("tr");
for (var j = 0; j < Student.length; j++) {
for (x in temp) {
if (j == i) {
var td = document.createElement("td");
td.innerText = (temp)[x];
tr.appendChild(td);
}
}
}
table.appendChild(tr)
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58077226
复制相关文章
相似问题
腾讯云开发者
