在 javascript 中读取嵌套的 json 并构建 HTML 表答案

【问题标题】：Read nested json in javascript and build HTML table在 javascript 中读取嵌套的 json 并构建 HTML 表
【发布时间】：2020-04-19 06:00:08
【问题描述】：

我正在尝试使用 javacript 读取嵌套的 Json 对象并将其转换为带有搜索选项的 HTML 表并将表格数据导出到 Excel 工作表中，但无法读取嵌套对象，谁能帮忙提供一些伪代码

{
 "Person1": {
        "updateddate": "2017-05-10", 
        "desc": "new joinee", 
        "Id": {
            "12345": {
                "locallinks": [
                    "local_link1"
                ]
            }
        }, 
        "externallinks": [
            "external_link1"
        ], 
        "updateduser": "admin"
    } 
    },
    "Person2": {
        "updateddate": "2017-06-10", 
        "desc": "existing", 
        "Id": {
            "12346": {
                "locallinks": [
                    "local_link1"
                ]
            }
        }, 
        "externallinks": [
            "external_link1"
        ], 
        "updateduser": "user"
    } 
    },
    "Person3": {
        "updateddate": "2017-06-10", 
        "desc": "new joinee", 
        "Id": {
            "12347": {
                "locallinks": [
                    "local_link1"
                ]
            }
        }, 
        "externallinks": [
            "external_link1"
        ], 
        "updateduser": "admin"
    } 
    }
    }

我需要带有标题的 HTML 表格

Person , Updated Date, Desc, ID , external links , Updated User

【问题讨论】：

请添加您尝试过的代码？
另外请验证您的 JSON（抛出很多错误）。 jsonlint.com
对于每个Person，都有一个额外的右括号。顺便说一句，你还没有发布一点 JavaScript ...

标签： javascript jquery html json nested

【解决方案1】：

您的问题不清楚，但我可以弄清楚您想要什么。有一个代码可以给你想法。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <table id="data" border="1" style="border-collapse: collapse;">
    <thead>
      <tr>
        <td>Person </td>
        <td>Updated Date</td>
        <td>Desc</td>
        <td>ID</td>
        <td>external links</td>
        <td>Updated User</td>
      </tr>
    </thead>

    <tbody></tbody>
  </table>

  <script>
    let xhttp;

    function getData() {
      xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function () {
        if (this.readyState === 4 && this.status === 200) {
          const data = JSON.parse(this.responseText);
          console.log(data);
          createData(data);
        } else {
          console.log(this.readyState, this.status);
        }
      };

      xhttp.open('GET', 'http://www.mocky.io/v2/5e9c2d9a30000059000a7dc5',
      true);
      xhttp.send();
    }

    getData();

    function createData(data) {
      const table = document.querySelector('#data>tbody');
      const tableRow = document.createElement('tr');

      Object.values(data).forEach(person => {
        tableRow.innerHTML = `
        <td>${'xxx'}</td>
        <td>${person.updateddate}</td>
        <td>${person.desc}</td>
        <td>${person.Id}</td>
        <td>${person.externallinks}</td>
        <td>${person.updateduser}</td>
  `;

        table.appendChild(tableRow);

      });
    }
  </script>
</body>

</script>

【讨论】：

【解决方案2】：

您添加的JSON 无效。使用以下JSON 数据：

var data = 
{
 "Person1": {
        "updateddate": "2017-05-10", 
        "desc": "new joinee", 
        "Id": {
            "12345": {
                "locallinks": [
                    "local_link1"
                ]
            }
        }, 
        "externallinks": [
            "external_link1"
        ], 
        "updateduser": "admin"
    },
    "Person2": {
        "updateddate": "2017-06-10", 
        "desc": "existing", 
        "Id": {
            "12346": {
                "locallinks": [
                    "local_link1"
                ]
            }
        }, 
        "externallinks": [
            "external_link1"
        ], 
        "updateduser": "user"
    },
    "Person3": {
        "updateddate": "2017-06-10", 
        "desc": "new joinee", 
        "Id": {
            "12347": {
                "locallinks": [
                    "local_link1"
                ]
            }
        }, 
        "externallinks": [
            "external_link1"
        ], 
        "updateduser": "admin"
    }
}

要读取嵌套对象，您可以使用Object.keys 方法

Object.keys(data).forEach(person =>{
  console.log("person ",person)
  Object.keys(data[person]).forEach(props =>{
    /*Nested JSON props here*/
  })
})

【讨论】：