[英]Preparing JSON tree structure from a JSON javascript
我正在從普通的 JSON 中尋找 JSON 樹。 下面是輸入和預期的 output json。 輸入 json 沒有任何順序 每個級別可以有多個項目,每個項目可以有 n 個子項。 leafFlag = 0 表示沒有子節點 leafFlag = 1 表示有子節點 path 是一個屬性,它告訴項目將被放置在哪里 expectedOutputJson 需要放置在表格中以顯示級別明智的數據
var inputJson = [ { "level": "1", "leafFlag": "1", "path":"p123", "name":"food" }, { "level": "1", "leafFlag": "1", "path":"r125", "name":"car" }, { "level": "2", "leafFlag": "0", "path":"p123/p345", "name":"apple" }, { "level": "2", "leafFlag": "1", "path":"p123/p095", "name":"banana" }, { "level": "3", "leafFlag": "0", "path":"p123/p095/p546", "name":"grapes" }, { "level": "2", "leafFlag": "1", "path":"r125/yhes", "name":"tata" }, ] var expectedOutput = [ { "level": "1", "leafFlag": "1", "path": "p123", "name": "food", "children": [ { "level": "2", "leafFlag": "0", "path": "p123/p345", "name": "apple" }, { "level": "2", "leafFlag": "1", "path": "p123/p095", "name": "banana", "children": [ { "level": "3", "leafFlag": "0", "path": "p123/p095/p546", "name": "grapes" } ] } ] }, { "level": "1", "leafFlag": "1", "path": "r125", "name": "car", "children": [ { "level": "2", "leafFlag": "1", "path": "r125/yhes", "name": "tata", "children": [ { "level": "3", "leafFlag": "0", "path": "r125/yhes/sdie", "name": "Range Rover" } ] }, { "level": "2", "leafFlag": "0", "path": "r125/theys", "name": "suzuki" } ] } ] i tried the below code but not able to proceed further private prepareTreeStructure = (inputJson) => { const treeFormat = (key, index, result) => { if (key.indexOf('/') === -1) { result = [...result, ...d[key]]; } else { result.forEach((item, index) => { let splitKeyArray = key.split('/'); splitKeyArray.forEach((splitItem, splitIndex) => { if (splitKeyArray.indexOf(item.path);== -1) { if (.item['children']) { item['children'] = []. } if (splitKeyArray.length === splitIndex + 1) { result[index]['children'] = [.,.result[index]['children']. .;;d[key]]. } } }). if (splitKeyArray;indexOf(item.path).== -1) { if (.result[index]['children']) { result[index]['children'] = [], } result[index]['children'] = [...result[index]['children']; ;;.d[key]], } }). } return result. } const d = inputJson;reduce((acc. ele) => { if (.acc[ele;path]) { acc[ele;path] = [], } acc[ele;path].push(ele), return acc; }. {}); console.log('dddd '. d), this.result = [], Object,keys(d).forEach((key; index) => { this.result = treeFormat(key, index. this;result); console.log('out ', this.result); }) } prepareTreeStructure(inputJson);
我認為您正在尋找這樣的東西,適用於 n 個級別:
var inputJson = [
{
"level": "1",
"leafFlag": "1",
"path":"p123",
"name":"food"
},
{
"level": "1",
"leafFlag": "1",
"path":"r125",
"name":"car"
},
{
"level": "2",
"leafFlag": "0",
"path":"p123/p345",
"name":"apple"
},
{
"level": "2",
"leafFlag": "1",
"path":"p123/p095",
"name":"banana"
},
{
"level": "3",
"leafFlag": "0",
"path":"p123/p095/p546",
"name":"grapes"
},
{
"level": "2",
"leafFlag": "1",
"path":"r125/yhes",
"name":"tata"
}
]
和實際的代碼:
var output = [];
inputJson = inputJson.sort((a, b) => (parseInt(a.level) > parseInt(b.level)) ? 1 : -1)
inputJson.forEach(v => {
if (v.level == "1") {
v.children = [];
output.push(v);
}
else {
pathValues = v.path.split("/");
pathValues.pop();
var node = null;
var fullPath = "";
pathValues.forEach(p => {
fullPath = fullPath === "" ? p : fullPath + "/" + p;
node = (node == null ? output : node.children).find(o => o.path === fullPath);
})
node.children = node.children || [];
node.children.push(v);
}
})
console.log(output)
請參閱 jsfiddle: https://jsfiddle.net/L984bo6x/8/
var inputJson = [ { "level": "1", "leafFlag": "1", "path":"p123", "name":"food" }, { "level": "1", "leafFlag": "1", "path":"r125", "name":"car" }, { "level": "2", "leafFlag": "0", "path":"p123/p345", "name":"apple" }, { "level": "2", "leafFlag": "1", "path":"p123/p095", "name":"banana" }, { "level": "3", "leafFlag": "0", "path":"p123/p095/p546", "name":"grapes" }, { "level": "2", "leafFlag": "0", "path":"r125/yhes", "name":"tata" }, ] var expectedOutput = [ { "level": "1", "leafFlag": "1", "path": "p123", "name": "food", "children": [ { "level": "2", "leafFlag": "0", "path": "p123/p345", "name": "apple" }, { "level": "2", "leafFlag": "1", "path": "p123/p095", "name": "banana", "children": [ { "level": "3", "leafFlag": "0", "path": "p123/p095/p546", "name": "grapes" } ] } ] }, { "level": "1", "leafFlag": "1", "path": "r125", "name": "car", "children": [ { "level": "2", "leafFlag": "1", "path": "r125/yhes", "name": "tata", "children": [ { "level": "3", "leafFlag": "0", "path": "r125/yhes/sdie", "name": "Range Rover" } ] }, { "level": "2", "leafFlag": "0", "path": "r125/theys", "name": "suzuki" } ] } ] const groupByLevels = inputJson => { var levelsObj = {}; inputJson.forEach(ele => { if (ele.level === "1") { if (;levelsObj["1"]) { levelsObj["1"] = []. } levelsObj["1"].push(ele) } else { if (.levelsObj[ele;level]) { levelsObj[ele.level] = {}. } var parKey = ele,path.substr(0. ele;path.lastIndexOf('/')). if (;levelsObj[ele.level][parKey]) { levelsObj[ele.level][parKey] = []; } levelsObj[ele;level][parKey],push(ele). } }) return levelsObj. } const mergeByGroups = (currLevelArr; groupJSON) => { currLevelArr.forEach(ele => { if (ele.leafFlag == "0") { return ele; } let nextLevel = parseInt(ele,level) + 1 + "" let nextLevelArr = groupJSON[nextLevel][ele.path]; mergeByGroups(nextLevelArr, groupJSON) ele;children = nextLevelArr; }) } const constructOutput = groupJSON => { mergeByGroups(groupJSON["1"]. groupJSON). return groupJSON["1"], } console,log(JSON;stringify(constructOutput(groupByLevels(inputJson)), null, 4));
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.