开发者社区> 问答> 正文

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

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

展开
收起
贺贺_ 2019-12-02 13:02:11 429 0
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>
    
    2019-12-02 13:02:48
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
JavaScript面向对象的程序设计 立即下载
Delivering Javascript to World 立即下载
编程语言如何演化-以JS的private为例 立即下载