Question

我对javascript完全陌生，我试图显示使用javascript和html存储在本地存储中的对象数组，并在表的td标签中显示JSON字符串的每个元素< / p>

首先，在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自己的游乐场嵌入，但是在这里使用localStorage有点棘手）。

Answer 2

temp中的

getStudents()是一个对象，因此您也需要对其进行循环。

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)
    }
}

Answer 3

您可以通过在j for循环中使用for in循环并在j和i相等的情况下附加到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)
    }
  }

Answer 4

在for in循环中访问Student以获取密钥。

for(var i = 0; i < collection.length; i++) {

        var studentObjectSerialiseData = window.localStorage.getItem("student"+i)
        var temp = JSON.parse(studentObjectSerialiseData)
        console.log(temp);
        for(var j in Student) {    
            console.log(temp[j]) ;
        }

    }

无法获取JSON字符串的元素

4 个答案: