javascript - 无法获取 JSON 字符串的元素

Question

我是 javascript 的新手，我正在尝试使用 javascript 和 html 显示存储在本地存储中的对象数组，并在 td 标记中显示 JSON 字符串的每个元素一张 table

在 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")

还有一组“学生”对象:

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 添加到 'table' 标签，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

请帮我解决这个问题!

Answer 1

问题主要出在您试图遍历 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 自己的 playground 嵌入，但在这里使用 localStorage 有点棘手)。