时间戳

首页 > 解决方案 > 如何通过比较两个json来替换值并在创建的表中更新

javascript - 如何通过比较两个json来替换值并在创建的表中更新

问题描述

我有两个 json 文件，保存如下值，Json 1：

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

json 2：

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

有了这个 json 1 值，我可以创建表引用：如何逐行迭代 json 到表，现在我必须通过从 Json2 获取值来将表中的“eng”值替换为“english”。我还有更多的科目要包括在表格中，所以需要一个动态的关键参考解决方案。谁能帮我解决这个问题

标签： javascriptjqueryjsonecmascript-6

解决方案

首先，您必须编写一个函数来迭代subjectDetails数组并根据标签查找主题名称。

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

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

  return name
}

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

如果getSubjectName存在则返回主题的名称，否则返回默认标签。

第二部分已经在参考答案中得到了回答。您所要做的就是在适当的位置更新标签。

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

const getSubjectName = (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 = [...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 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: 4px 18px;
}
<div id="app"></div>

推荐阅读