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

问题描述 投票：0回答：3

我基本上是试图组织一个图表，以显示来自被破坏的复杂对象的信息。较大的对象（userList）中有四个不同的对象（“人”元素），并且在每个人对象的内部还有另一个对象（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>
javascript object html-table destructuring
3个回答
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>
0
投票

您也可以在function parameters中进行分解：

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>
0
投票

使用对象解构和模板文字查找下面的代码。

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/>`;
})
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.