如何在行中将json迭代到表 [英] how to iterate json to table in row wise

问题描述

下面我有一个JSON结构来为学生创建一组值.为了使整个工作正常进行，我需要使用jQuery来获取特定学生的确切值(将在HTML文件中完成).

Below I have a JSON structure to create a group of values for students. In order to make the whole thing work, I need to use jQuery to get the exact values of specific students (which will be done in an HTML file).

我该怎么做?

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

该表的结构应如下所示:

The table needs to be structured like the one below:

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

推荐答案

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

First of all, your data format is inconsistent with the description. Your question doesn't cover many important facts such as are the courses fixed or there might be more courses than three? Also, the student array contains an object that contains another object! Why there is such a bad design? Will there be more students under one object of the student array?

如果您可以像这样组织数据，那就更好了:

It would be much better if you could organize the data something like this:

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

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

This way you could avoid unnecessary nesting. However, I have managed a way to sort this out. There are many ways to derive the result you asked for based on the data you have provided and here is my approach.

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

First, I cleaned up your data and convert those data into a 2d object of marks[student][subject] format so that we can easily access to that info during table creation.

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)

});

现在，标记对象包含按科目划分的每个学生的标记.像这样:-

Now the marks object contains the mark of each student by subject. Something like this:-

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

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

Now, the final part is to create a table. There are lots of ways of doing this. You can use jQuery for this or just HTML DOM but I used a mixed version to speed up things. I will provide another way of doing this with JavaScript createElement in the future. But for now, this will work as well. So here is the final code.

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>

这篇关于如何在行中将json迭代到表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！