如何逐行迭代json到表

Question

下面我有一个 JSON 结构来为学生创建一组值。为了使整个事情顺利进行，我需要使用 jQuery 来获取特定学生的确切值（这将在 HTML 文件中完成）。

我该怎么做？

[{
"Class": "A",
"as_of": "12/31/2020",
"student": [
    {
        "raji": {
            "eng": "35",
            "soc": "40",
            "sci": "39"
        }
    },
    {
        "akg": {
            "eng": "17",
            "soc": "40",
            "sci": "24"
        }
    }
]
}]

表格的结构需要如下所示：

|sub | raji | akg|
|eng |35    | 17 |
|soc |40    | 40 |
|sci |39    | 24 |

Answer 1

首先，你的数据格式与描述不符。您的问题没有涵盖许多重要的事实，例如课程是固定的还是课程可能多于三门？此外，student 数组包含一个包含另一个对象的对象！为什么会有这么糟糕的设计？ student 数组的一个对象下会不会有更多的学生？

如果你能像这样组织数据会更好：

[{
  "Class": "A",
  "as_of": "12/31/2020",
  "student": {
    "raji": {
      "eng": "35",
      "soc": "40",
      "sci": "39"
    },
    "akg": {
      "eng": "17",
      "soc": "40",
      "sci": "24"
    }
  }
}]

这样可以避免不必要的嵌套。但是，我设法解决了这个问题。有很多方法可以根据您提供的数据得出您要求的结果，这是我的方法。

首先，我清理了您的数据并将这些数据转换为marks[student][subject] 格式的二维对象，以便我们可以在创建表时轻松访问该信息。

let classes = [{
  "Class": "A",
  "as_of": "12/31/2020",
  "student": [{
      "raji": {
        "eng": "35",
        "soc": "40",
        "sci": "39"
      }
    },
    {
      "akg": {
        "eng": "17",
        "soc": "40",
        "sci": "24"
      }
    }
  ]
}]



classes.forEach((item) => {

  let students = item.student;
  let marks = {}

  students.forEach((student) => {
    let student_names = Object.keys(student);

    student_names.forEach((name) => {

      if (marks[name] == undefined) {
        marks[name] = {}
      }

      let results = student[name];
      let subjects = Object.keys(results)

      subjects.forEach((subject) => {
        marks[name][subject] = results[subject]
      })

    })
  });

  console.log(marks)

});

现在标记对象包含每个学生的学科分数。像这样的东西：-

{
  "raji": {
    "eng": "35",
    "soc": "40",
    "sci": "39"
  },
  "akg": {
    "eng": "17",
    "soc": "40",
    "sci": "24"
  }
}

现在，最后一部分是创建一个表。有很多方法可以做到这一点。您可以为此使用 jQuery 或仅使用 HTML DOM，但我使用混合版本来加快速度。将来我将提供另一种使用 JavaScript createElement 的方法。但就目前而言，这也将起作用。所以这是最终的代码。

let classes = [{
  "Class": "A",
  "as_of": "12/31/2020",
  "student": [{
      "raji": {
        "eng": "35",
        "soc": "40",
        "sci": "39"
      }
    },
    {
      "akg": {
        "eng": "17",
        "soc": "40",
        "sci": "24"
      }
    }
  ]
}]



classes.forEach((item) => {

  let students = item.student;
  let marks = {}

  students.forEach((student) => {
    let student_names = Object.keys(student);

    student_names.forEach((name) => {

      if (marks[name] == undefined) {
        marks[name] = {}
      }

      let results = student[name];
      let subjects = Object.keys(results)

      subjects.forEach((subject) => {
        marks[name][subject] = results[subject]
      })

    })
  });


  let all_students = Object.keys(marks);
  let all_subjects = [...new Set(all_students.map(std => Object.keys(marks[std])).flat())]


  let theads = all_students.map((studnet) => {
    return `<th>${studnet}</th>`;
  })

  let tableHeader = `<thead><tr><th>Sub</th>${theads.join("")}</tr></thead>`;

  let tbodies = []

  all_subjects.forEach((subject) => {
    let mark_td = all_students.map(student => `<td>${marks[student][subject]}</td>`)
    tbodies.push(`<tr><td>${subject}</td>${mark_td.join("")}</tr>`)
  })

  let tableBody = `<tbody>${tbodies.join("")}</tbody>`


  let table = `<table>${tableHeader}${tableBody}</table>`;


  document.getElementById("app").innerHTML += table

})

table {
  border-collapse: collapse;
}

td, th{
  border:1px solid #ddd;
  padding: 4px 18px;
}

<div id="app"></div>