读取javascript中的嵌套json并构建HTML表_Javascript_Jquery_Html_Json_Nested

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

javascript jquery html json

读取javascript中的嵌套json并构建HTML表,javascript,jquery,html,json,nested,Javascript,Jquery,Html,Json,Nested,我试图使用JavaScript读取嵌套的Json对象，并使用搜索选项将其转换为HTML表并将表格数据导出到excel工作表中，但无法读取嵌套对象，是否有人可以提供一些伪代码帮助 { "Person1": { "updateddate": "2017-05-10", "desc": "new joinee", "Id": { "12345": { "locallinks": [

我试图使用JavaScript读取嵌套的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表格

人员、更新日期、描述、ID、外部链接、更新用户

您的问题不清楚，但我可以知道您想要什么。有一个代码可以让你产生想法

<!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>


人
更新日期
描述
身份证件
外部链接
更新用户
让xhttp；
函数getData（）{
xhttp=newXMLHttpRequest（）；
xhttp.onreadystatechange=函数（）{
if（this.readyState==4&&this.status==200）{
const data=JSON.parse（this.responseText）；
控制台日志（数据）；
创建数据（数据）；
}否则{
log（this.readyState，this.status）；
}
};
xhttp.open（'GET'，'http://www.mocky.io/v2/5e9c2d9a30000059000a7dc5',
正确的）；
xhttp.send（）；
}
getData（）；
函数createData（数据）{
const table=document.querySelector（“#data>tbody”）；
const tableRow=document.createElement（'tr'）；
Object.values（data.forEach（person=>{
tableRow.innerHTML=`
${xxx'}
${person.updateDate}
${person.desc}
${person.Id}
${person.externallinks}
${person.updateUser}
`;
table.appendChild（tableRow）；
});
}

您添加的

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*/
  })
})

请为您尝试的内容添加代码？还请验证您的JSON（抛出大量错误）。每个

人都有一个额外的结束括号。顺便说一句，你还没有发布一点JavaScript。。。