从 JSON javascript 准备 JSON 树结构

Question

am looking for a JSON tree from a plain JSON. below is the Input and expected output json. the input json doesnt have any order There can be multiple items at each level and each item can have n number of childrens. leafFlag = 0 means no children leafFlag = 1 means has chidlren path is the property which tells where the item will be placed The expectedOutputJson needs to be placed in a table to display level wise data

 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);

Answer 1

I think you're looking for something like this, works for an n number of levels:

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"
}
]

And the actual code:

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)

See the jsfiddle: https://jsfiddle.net/L984bo6x/8/

Answer 2

 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));