How To Iterate Json To Table In Row Wise

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 (wh

Solution 1:

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.

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

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>