时间戳

首页 > 解决方案 > 在 javascript 中读取嵌套的 json 并构建 HTML 表

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

问题描述

我正在尝试使用 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

标签： javascriptjqueryhtmljsonnested

解决方案

您添加的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*/
  })
})

推荐阅读