如何使用 javascript 解构设置图表以正确显示信息？

Question

我基本上是在尝试组织一个图表来显示来自已破坏的复杂对象的信息。 在一个更大的对象 (userList) 中有四个不同的对象（“people”元素），并且在每个 people 对象的内部还有另一个对象（spokenLanguages）。 我正在尝试创建一个图表，以一种有组织且清晰的方式显示他们的所有信息。 这是代码：

 let userList = { "people": [{ firstName: "Fred", lastName: "Smith", dateOfBirth: 1980, spokenLanguages: { native: "English", fluent: "Spanish", intermediate: "Chinese" } }, { firstName: "Monica", lastName: "Taylor", dateOfBirth: 1975, spokenLanguages: { native: "Spanish", fluent: "English", intermediate: "French" } }, { firstName: "Maurice", lastName: "Edelson", dateOfBirth: 1992, spokenLanguages: { native: "English", fluent: "Spanish", } }, { firstName: "Kelly", lastName: "Lang", dateOfBirth: 1982, spokenLanguages: { native: "English", fluent: "German", intermediate: "Dutch" } }] }; for (var i = 0; i < userList.people.length; i++) { let { firstName } = userList.people[i]; let { lastName } = userList.people[i]; let { dateOfBirth } = userList.people[i]; let { spokenLanguages: { native, fluent, intermediate } } = userList.people[i]; document.getElementById('lang').innerHTML += "Native: " + native + ',' + "<br/>" + "Fluent: " + fluent + ',' + "<br/>" + "Intermediate: " + intermediate + "<br/><br/>"; document.getElementById('frst').innerHTML += firstName + "<br/>"; document.getElementById('lst').innerHTML += lastName + "<br/>"; document.getElementById('dob').innerHTML += dateOfBirth + "<br/>"; } //let { lastName } = userList.people[0]; //document.getElementById('show').innerHTML += lastName; /*function showThis() { return userList.people; } const display = showThis(); console.log(display); //document.getElementById('show').innerHTML += spokenLanguages;*/

 <head> <meta charset="utf-8" /> <title>Lab 13</title> <style> table, th, td { border: 2px solid black; } th { padding: 10px; } </style> </head> <body> <div id="show"> <table> <tr> <th><strong>First Name</strong></th> <th><strong>Last Name</strong></th> <th><strong>Date of Birth</strong></th> <th><strong>Spoken Languages</strong></th> </tr> <td colspan="1"> <div id="frst"> </div> </td> <td colspan="1"> <div id="lst"> </div> </td> <td colspan="1"> <div id="dob"> </div> </td> <td colspan="3"> <div id="lang"> </div> </td> </table> </div> </body>

Answer 1

我认为您正在寻找的是这些方面的内容：

 let userList = { "people": [ { firstName: "Fred", lastName: "Smith", dateOfBirth: 1980, spokenLanguages: { native: "English", fluent: "Spanish", intermediate: "Chinese" } }, { firstName: "Monica", lastName: "Taylor", dateOfBirth: 1975, spokenLanguages: { native: "Spanish", fluent: "English", intermediate: "French" } }, { firstName: "Maurice", lastName: "Edelson", dateOfBirth: 1992, spokenLanguages: { native: "English", fluent: "Spanish", } }, { firstName: "Kelly", lastName: "Lang", dateOfBirth: 1982, spokenLanguages: { native: "English", fluent: "German", intermediate: "Dutch" } } ] }; userList.people.map((p)=>{ let { firstName } = p; let { lastName } = p; let { dateOfBirth } = p; let { spokenLanguages: { native, fluent, intermediate } } = p; document.querySelector('tbody').innerHTML += ` <tr> <td>${firstName}</td> <td>${lastName}</td> <td>${dateOfBirth}</td> <td>Native: ${native}<br>Fluent: ${fluent}<br>Intermediate: ${intermediate}</td> </tr> ` });

 table, th, td { border: 2px solid black; } th { padding: 10px; }

 <table> <thead> <tr> <th><strong>First Name</strong></th> <th><strong>Last Name</strong></th> <th><strong>Date of Birth</strong></th> <th><strong>Spoken Languages</strong></th> </tr> </thead> <tbody> </tbody> </table>

Answer 2

使用Object Destructuring和Template literals查看下面的代码。

userList.people.map((person) => {
  let {
    firstName,
    lastName,
    dateOfBirth,
    spokenLanguages: {
      native,
      fluent,
      intermediate 
    }
  } = person;

  document.getElementById('lang').innerHTML += `Native: ${native}, <br/> Fluent: ${fluent}, <br/> Intermediate: ${intermediate} <br/><br/>`;
  document.getElementById('frst').innerHTML += `${firstName} <br/>`;
  document.getElementById('lst').innerHTML += `${lastName} <br/>`;
  document.getElementById('dob').innerHTML += `${dateOfBirth} <br/>`;
})

Answer 3

您也可以在函数参数中解构：

 let userList = { "people": [{ firstName: "Fred", lastName: "Smith", dateOfBirth: 1980, spokenLanguages: { native: "English", fluent: "Spanish", intermediate: "Chinese" } }] }; userList.people.forEach(({ firstName, lastName, dateOfBirth, spokenLanguages: { native, fluent, intermediate } }, index) => { const row = myTable.insertRow(); row.insertCell().innerHTML = firstName; row.insertCell().innerHTML = lastName; row.insertCell().innerHTML = dateOfBirth; row.insertCell().innerHTML = `Native: ${native}, <br/>Fluent: ${fluent},<br/>Intermediate: ${intermediate}<br/>`; });

 <head> <meta charset="utf-8" /> <title>Lab 13</title> <style> table, th, td { border: 2px solid black; } th { padding: 10px; } </style> </head> <body> <div id="show"> <table id="myTable"> <thead> <tr> <th><strong>First Name</strong></th> <th><strong>Last Name</strong></th> <th><strong>Date of Birth</strong></th> <th><strong>Spoken Languages</strong></th> </tr> </thead> <tbody> </tbody> </table> </div> </body>