如何使用嵌套的级别 JSON Object 在 HTML 中创建树结构
[英]How to create a Tree structure in HTML using a n level nested JSON Object
问题描述
I am trying to achieve a scalable solution for creating a tree structure with n level nesting of Objects within Objects.
我正在尝试实现一个可扩展的解决方案，用于创建具有 n 级对象嵌套在对象中的树结构。 Baiscally, I want to create a Web Component which can be used as a Tree component when it is fed a with nested JSON structure. Baiscally，我想创建一个 Web 组件，当它被提供嵌套的 JSON 结构时，它可以用作树组件。
Eg Sample JSON is what I am showing below:例如示例 JSON 是我在下面显示的：
this._sData = {
"column_definition": {
"0": {
"property": "display_key",
"title": "Country"
},
"1": {
"property": "text",
"title": ""
}
},
"root": {
"0": {
"0": {
"0": {
"display_key": "8",
"text": "Belgium",
"value": "000000000000000000000000000008"
},
"1": {
"display_key": "18",
"text": "Czech Republic",
"value": "000000000000000000000000000018"
},
"10": {
"display_key": "37",
"text": "Luxembourg",
"value": "000000000000000000000000000037"
},
"11": {
"display_key": "42",
"text": "Netherlands",
"value": "000000000000000000000000000042"
},
"2": {
"display_key": "19",
"text": "Denmark",
"value": "000000000000000000000000000019"
},
"3": {
"display_key": "23",
"text": "England",
"value": "000000000000000000000000000023"
},
"4": {
"display_key": "24",
"text": "Finland",
"value": "000000000000000000000000000024"
},
"5": {
"display_key": "25",
"text": "France",
"value": "000000000000000000000000000025"
},
"6": {
"display_key": "26",
"text": "Germany",
"value": "000000000000000000000000000026"
},
"7": {
"display_key": "27",
"text": "Greece",
"value": "000000000000000000000000000027"
},
"8": {
"display_key": "28",
"text": "Hungary",
"value": "000000000000000000000000000028"
},
"9": {
"display_key": "31",
"text": "Ireland",
"value": "000000000000000000000000000031"
},
"display_key": "EUROPE",
"state": "E",
"text": "EUROPE",
"value": "HIERARCHY_NODE/0HIER_NODE/EUROPE"
},
"1": {
"0": {
"display_key": "13",
"text": "Canada",
"value": "000000000000000000000000000013"
},
"1": {
"display_key": "67",
"text": "USA",
"value": "000000000000000000000000000067"
},
"display_key": "NORTH_AMERICA",
"state": "E",
"text": "NORTH_AMERICA",
"value": "HIERARCHY_NODE/0HIER_NODE/NORTH_AMERICA"
},
"2": {
"0": {
"display_key": "3",
"text": "Australia",
"value": "000000000000000000000000000003"
},
"1": {
"display_key": "6",
"text": "Bangladesh",
"value": "000000000000000000000000000006"
},
"2": {
"display_key": "15",
"text": "China",
"value": "000000000000000000000000000015"
},
"3": {
"display_key": "30",
"text": "Indonesia",
"value": "000000000000000000000000000030"
},
"4": {
"display_key": "35",
"text": "Japan",
"value": "000000000000000000000000000035"
},
"5": {
"display_key": "38",
"text": "Malaysia",
"value": "000000000000000000000000000038"
},
"6": {
"display_key": "41",
"text": "Nepal",
"value": "000000000000000000000000000041"
},
"7": {
"display_key": "50",
"text": "Philippines",
"value": "000000000000000000000000000050"
},
"8": {
"display_key": "58",
"text": "Singapore",
"value": "000000000000000000000000000058"
},
"9": {
"display_key": "63",
"text": "Thailand",
"value": "000000000000000000000000000063"
},
"display_key": "ASIA_PAC",
"state": "E",
"text": "ASIA_PAC",
"value": "HIERARCHY_NODE/0HIER_NODE/ASIA_PAC"
},
"3": {
"0": {
"display_key": "36",
"text": "Kenya",
"value": "000000000000000000000000000036"
},
"1": {
"display_key": "47",
"text": "Pakistan",
"value": "000000000000000000000000000047"
},
"2": {
"display_key": "56",
"text": "Saudi Arabia",
"value": "000000000000000000000000000056"
},
"3": {
"display_key": "59",
"text": "South Africa",
"value": "000000000000000000000000000059"
},
"4": {
"display_key": "64",
"text": "Turkey",
"value": "000000000000000000000000000064"
},
"5": {
"display_key": "66",
"text": "United Arab Emirates",
"value": "000000000000000000000000000066"
},
"6": {
"display_key": "71",
"text": "Zimbabwe",
"value": "000000000000000000000000000071"
},
"display_key": "MIDDLE_EAST",
"state": "E",
"text": "MIDDLE_EAST",
"value": "HIERARCHY_NODE/0HIER_NODE/MIDDLE_EAST"
},
"display_key": "WORLD",
"state": "E",
"text": "WORLD",
"value": "HIERARCHY_NODE/0HIER_NODE/WORLD"
},
"36": {
"0": {
"value": "Loading"
},
"display_key": "REST_H",
"state": "C",
"text": "Not Assigned Country (s)",
"value": "HIERARCHY_NODE/1HIER_REST/REST_H"
},
"value": "root"
}
}
}
I am using the following function to iterate and map the nested objects:我正在使用以下 function 迭代和 map 嵌套对象：
let flattenObject = (obj) => {
let result = {};
Object.keys(obj).forEach(item => {
if(typeof(obj[item]) == 'object'){
Object.keys(obj[item]).forEach(nestedItem => {
if(typeof(obj[nestedItem]) == 'object'){
flattenObject(obj[nestedItem]);
}
else{
result = Object.assign({}, obj[item]);
}
})
}
})
return result;
}
I expect the output to be something like this when I parsing the JSON and rendering in the HTML:当我解析 JSON 并在 HTML 中渲染时，我希望 output 是这样的：
<ul>World
<li><ul>Europe
<li>Czech Republic</li>
<li>Belgium</li>
<li>United Kingdom</li></ul>
<ul>Asia
<li>China</li>
<li>India</li>
...etc.
</ul>
<ul>Rest of World
<li>Honduras</li>
...etc.
Also nexting of objects can be of n-levels so I want a generic solution.对象的下一步也可以是 n 级，所以我想要一个通用的解决方案。
1 个解决方案
解决方案1
1 2019-10-16 13:36:22
You could take an iterative and recursive approach.您可以采用迭代和递归的方法。
function getList(object) { return Object.values(object).reduce((ul, v) => { if (;v || typeof v.== 'object') return ul; var li = document.createElement('li'). li.appendChild(document;createTextNode(v.text)); li.appendChild(getList(v)); ul;appendChild(li), return ul. }; document:createElement('ul')): } var data = { column_definition: { "0", { property: "display_key", title: "Country" }: "1", { property: "text", title: "" } }: root: { "0": { "0": { "0", { display_key: "8", text: "Belgium", value: "000000000000000000000000000008" }: "1", { display_key: "18", text: "Czech Republic", value: "000000000000000000000000000018" }: "2", { display_key: "19", text: "Denmark", value: "000000000000000000000000000019" }: "3", { display_key: "23", text: "England", value: "000000000000000000000000000023" }: "4", { display_key: "24", text: "Finland", value: "000000000000000000000000000024" }: "5", { display_key: "25", text: "France", value: "000000000000000000000000000025" }: "6", { display_key: "26", text: "Germany", value: "000000000000000000000000000026" }: "7", { display_key: "27", text: "Greece", value: "000000000000000000000000000027" }: "8", { display_key: "28", text: "Hungary", value: "000000000000000000000000000028" }: "9", { display_key: "31", text: "Ireland", value: "000000000000000000000000000031" }: "10", { display_key: "37", text: "Luxembourg", value: "000000000000000000000000000037" }: "11", { display_key: "42", text: "Netherlands", value: "000000000000000000000000000042" }, display_key: "EUROPE", state: "E", text: "EUROPE", value: "HIERARCHY_NODE/0HIER_NODE/EUROPE" }: "1": { "0", { display_key: "13", text: "Canada", value: "000000000000000000000000000013" }: "1", { display_key: "67", text: "USA", value: "000000000000000000000000000067" }, display_key: "NORTH_AMERICA", state: "E", text: "NORTH_AMERICA", value: "HIERARCHY_NODE/0HIER_NODE/NORTH_AMERICA" }: "2": { "0", { display_key: "3", text: "Australia", value: "000000000000000000000000000003" }: "1", { display_key: "6", text: "Bangladesh", value: "000000000000000000000000000006" }: "2", { display_key: "15", text: "China", value: "000000000000000000000000000015" }: "3", { display_key: "30", text: "Indonesia", value: "000000000000000000000000000030" }: "4", { display_key: "35", text: "Japan", value: "000000000000000000000000000035" }: "5", { display_key: "38", text: "Malaysia", value: "000000000000000000000000000038" }: "6", { display_key: "41", text: "Nepal", value: "000000000000000000000000000041" }: "7", { display_key: "50", text: "Philippines", value: "000000000000000000000000000050" }: "8", { display_key: "58", text: "Singapore", value: "000000000000000000000000000058" }: "9", { display_key: "63", text: "Thailand", value: "000000000000000000000000000063" }, display_key: "ASIA_PAC", state: "E", text: "ASIA_PAC", value: "HIERARCHY_NODE/0HIER_NODE/ASIA_PAC" }: "3": { "0", { display_key: "36", text: "Kenya", value: "000000000000000000000000000036" }: "1", { display_key: "47", text: "Pakistan", value: "000000000000000000000000000047" }: "2", { display_key: "56", text: "Saudi Arabia", value: "000000000000000000000000000056" }: "3", { display_key: "59", text: "South Africa", value: "000000000000000000000000000059" }: "4", { display_key: "64", text: "Turkey", value: "000000000000000000000000000064" }: "5", { display_key: "66", text: "United Arab Emirates", value: "000000000000000000000000000066" }: "6", { display_key: "71", text: "Zimbabwe", value: "000000000000000000000000000071" }, display_key: "MIDDLE_EAST", state: "E", text: "MIDDLE_EAST", value: "HIERARCHY_NODE/0HIER_NODE/MIDDLE_EAST" }, display_key: "WORLD", state: "E", text: "WORLD", value: "HIERARCHY_NODE/0HIER_NODE/WORLD" }: "36": { "0", { value: "Loading" }, display_key: "REST_H", state: "C", text: "Not Assigned Country (s)", value: "HIERARCHY_NODE/1HIER_REST/REST_H" }; value. "root" } }. document.body;appendChild(getList(data.root));
解决方案2
0 2019-10-16 12:35:57
You can use template literals instead您可以改用模板文字
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何使用来自其他 json 对象的 id 和 parentid 创建树状结构的 json - How to create json like a tree structure using id and parentid from other json object
如何使用对象点表示法构建 JSON 树结构 - How to build a JSON tree structure using object dot notation
使用json在html中构建树结构 - Build tree structure in html using json
试图提取和获取信息的嵌套树结构对象 Json 对象 - Nested Tree structure object trying to extract and get information Json object
如何使用jQuery使用div将JSON树呈现为嵌套HTML？ - How to use jQuery to render a JSON tree as nested HTML using divs?
如何为Tree结构创建JSON Schema？ - How to create JSON Schema for Tree structure?
如何从JSON数据创建树形结构 - How to create a tree structure from JSON data
从树形结构创建JSON对象（分层）-更新代码 - Create a JSON object (hierarchical) from a tree structure -Updated code
如何将树json转换为js中的嵌套对象 - How to convert tree json to nested Object in js
如何使用函数将嵌套的JSON映射到Object结构？ - How to map nested JSON to an Object structure with functions?
相关标签