How To Replace The Value By Comparing Two Json And To Update In The Created Table

I have two json files, holding values like the below, Json 1: let classes = [{ 'Class': 'A', 'as_of': '12/31/2020', 'student': [{ 'raji': { 'eng': '35',

Solution 1:

First, you will have to write a function that will iterate the subjectDetails array and find the subject name based on a label.

let subjectDetails = [{
  "subjectLabels": {
    "eng": "english",
    "sci": "environment science",
    "soc": "History & Geo"
  }
}]

constgetSubjectName = (label) => {
  let name = label;
  
  subjectDetails.forEach(details => {
     if(details.subjectLabels.hasOwnProperty(label)){
       name = details.subjectLabels[label]
     }
  })

  return name
}

console.log(getSubjectName("eng"))
//OUTPUT: english

The getSubjectName will return the name of the subject if exists otherwise the default label.

The second part is already answered on the referenced answer. All you have to do is to update the label in place.

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


let subjectDetails = [{
  "subjectLabels": {
    "eng": "english",
    "sci": "environment science",
    "soc": "History & Geo"
  }
}]

constgetSubjectName = (label) => {
  let name = label;
  
  subjectDetails.forEach(details => {
     if(details.subjectLabels.hasOwnProperty(label)){
       name = details.subjectLabels[label]
     }
  })

  return name
}

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 = [...newSet(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 sub_label = getSubjectName(subject)
    let mark_td = all_students.map(student =>`<td>${marks[student][subject]}</td>`)
    tbodies.push(`<tr><td>${sub_label}</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: 4px18px;
}

<divid="app"></div>