I have two JSONs which needs to be merged and then converted into another format using TypeScript in React. I was initially running a recursive call of a function to do this, and also tried reducer, but it doesn't work.
I have looked into many solutions, and all of them are based on one level of JSON, whereas as the example I have provided has multiple levels.
Please note that JSON 1 and JSON 2 have same formats, but their nested children can be of any levels deep. Also resulting JSON should have a dummy parent or root JSON which has these two JSONs as children, but in different format.
EDIT 2:
In this example I have shown only two JSONs, but in reality there are multiple JSONs located within an array object and these JSONs can be of any level of deep using the "childPages" node.
Can someone help me with this please?
JSON 1
{
"section_id": "01",
"title": "R1",
"description": "Optional",
"childPages": [
{
"section_id": "0101",
"title": "R1C1",
"description": "Optional",
"childPages": []
},
{
"section_id": "0102",
"title": "R1C2",
"description": "Optional",
"childPages": []
},
{
"section_id": "0103",
"title": "R1C3",
"description": "Optional",
"childPages": []
},
{
"section_id": "0104",
"title": "R1C4",
"description": "Optional",
"childPages": [
{
"section_id": "010401",
"title": "R1C4R1",
"description": "Optional",
"childPages": []
},
{
"section_id": "010402",
"title": "R1C4R2",
"description": "Optional",
"childPages": []
},
{
"section_id": "010403",
"title": "R1C4R3",
"description": "Optional",
"childPages": []
},
{
"section_id": "010404",
"title": "R1C4R5",
"description": "Optional",
"childPages": []
},
{
"section_id": "010405",
"title": "R1C4R6",
"description": "Optional",
"childPages": []
},
{
"section_id": "010406",
"title": "R1C4R7",
"description": "Optional",
"childPages": []
},
{
"section_id": "010407",
"title": "R1C4R8",
"description": "Optional",
"childPages": []
},
{
"section_id": "010408",
"title": "R1C4R9",
"description": "Optional",
"childPages": [
{
"section_id": "01040801",
"title": "R1C4R9C1",
"description": "Optional",
"childPages": []
},
{
"section_id": "01040802",
"title": "R1C4R9C2",
"description": "Optional",
"childPages": []
},
{
"section_id": "01040803",
"title": "R1C4R9C3",
"description": "Optional",
"childPages": []
}
]
}
]
}
]
}
JSON 2
{
"section_id": "02",
"title": "R2",
"description": "Optional",
"childPages": [
{
"section_id": "0201",
"title": "R2C1",
"description": "Optional",
"childPages": []
},
{
"section_id": "0202",
"title": "R2C2",
"description": "Optional",
"childPages": []
},
{
"section_id": "0203",
"title": "R2C3",
"description": "Optional",
"childPages": []
},
{
"section_id": "0204",
"title": "R2C4",
"description": "Optional",
"childPages": [
{
"section_id": "020401",
"title": "R2C4R1",
"description": "Optional",
"childPages": []
},
{
"section_id": "020402",
"title": "R2C4R2",
"description": "Optional",
"childPages": []
},
{
"section_id": "020403",
"title": "R2C4R3",
"description": "Optional",
"childPages": []
},
{
"section_id": "020404",
"title": "R2C4R5",
"description": "Optional",
"childPages": []
},
{
"section_id": "020405",
"title": "R2C4R6",
"description": "Optional",
"childPages": []
},
{
"section_id": "020406",
"title": "R2C4R7",
"description": "Optional",
"childPages": []
},
{
"section_id": "020407",
"title": "R2C4R8",
"description": "Optional",
"childPages": []
},
{
"section_id": "020408",
"title": "R2C4R9",
"description": "Optional",
"childPages": [
{
"section_id": "02040801",
"title": "R2C4R9C1",
"description": "Optional",
"childPages": []
},
{
"section_id": "02040802",
"title": "R2C4R9C2",
"description": "Optional",
"childPages": []
},
{
"section_id": "02040803",
"title": "R2C4R9C3",
"description": "Optional",
"childPages": []
}
]
}
]
}
]
}
Output should be:
let treeItems = [
{
key: "00",
label: "Root",
subLabel: "Optional",
children: [
{
key: "01",
label: "R1",
subLabel: "Optional",
children: [
{
key: "0101",
label: "R1C1",
subLabel: "Optional",
children: []
},
{
key: "0102",
label: "R1C2",
subLabel: "Optional",
children: []
},
{
key: "0103",
label: "R1C3",
subLabel: "Optional",
children: []
},
{
key: "0104",
label: "R1C4",
subLabel: "Optional",
children: [
{
key: "010401",
label: "R1C4R1",
subLabel: "Optional",
children: []
},
{
key: "010402",
label: "R1C4R2",
subLabel: "Optional",
children: []
},
{
key: "010403",
label: "R1C4R3",
subLabel: "Optional",
children: []
},
{
key: "010404",
label: "R1C4R5",
subLabel: "Optional",
children: []
},
{
key: "010405",
label: "R1C4R6",
subLabel: "Optional",
children: []
},
{
key: "010406",
label: "R1C4R7",
subLabel: "Optional",
children: []
},
{
key: "010407",
label: "R1C4R8",
subLabel: "Optional",
children: []
},
{
key: "010408",
label: "R1C4R9",
subLabel: "Optional",
children: [
{
key: "01040801",
label: "R1C4R9C1",
subLabel: "Optional",
children: []
},
{
key: "01040802",
label: "R1C4R9C2",
subLabel: "Optional",
children: []
},
{
key: "01040803",
label: "R1C4R9C3",
subLabel: "Optional",
children: []
}
]
}
]
}
]
},
{
key: "02",
label: "R2",
subLabel: "Optional",
children: [
{
key: "0201",
label: "R2C1",
subLabel: "Optional",
children: []
},
{
key: "0202",
label: "R2C2",
subLabel: "Optional",
children: []
},
{
key: "0203",
label: "R2C3",
subLabel: "Optional",
children: []
},
{
key: "0204",
label: "R2C4",
subLabel: "Optional",
children: [
{
key: "020401",
label: "R2C4R1",
subLabel: "Optional",
children: []
},
{
key: "020402",
label: "R2C4R2",
subLabel: "Optional",
children: []
},
{
key: "020403",
label: "R2C4R3",
subLabel: "Optional",
children: []
},
{
key: "020404",
label: "R2C4R5",
subLabel: "Optional",
children: []
},
{
key: "020405",
label: "R2C4R6",
subLabel: "Optional",
children: []
},
{
key: "020406",
label: "R2C4R7",
subLabel: "Optional",
children: []
},
{
key: "020407",
label: "R2C4R8",
subLabel: "Optional",
children: []
},
{
key: "020408",
label: "R2C4R9",
subLabel: "Optional",
children: [
{
key: "02040801",
label: "R2C4R9C1",
subLabel: "Optional",
children: []
},
{
key: "02040802",
label: "R2C4R9C2",
subLabel: "Optional",
children: []
},
{
key: "02040803",
label: "R2C4R9C3",
subLabel: "Optional",
children: []
}
]
}
]
}
]
}
]
}
]
CodePudding user response：
I hope this would be helpful.
const JSON1 = {
section_id: "01",
title: "R1",
description: "Optional",
childPages: [
{
section_id: "0101",
title: "R1C1",
description: "Optional",
childPages: [],
},
{
section_id: "0102",
title: "R1C2",
description: "Optional",
childPages: [],
},
{
section_id: "0103",
title: "R1C3",
description: "Optional",
childPages: [],
},
{
section_id: "0104",
title: "R1C4",
description: "Optional",
childPages: [
{
section_id: "010401",
title: "R1C4R1",
description: "Optional",
childPages: [],
},
{
section_id: "010402",
title: "R1C4R2",
description: "Optional",
childPages: [],
},
{
section_id: "010403",
title: "R1C4R3",
description: "Optional",
childPages: [],
},
{
section_id: "010404",
title: "R1C4R5",
description: "Optional",
childPages: [],
},
{
section_id: "010405",
title: "R1C4R6",
description: "Optional",
childPages: [],
},
{
section_id: "010406",
title: "R1C4R7",
description: "Optional",
childPages: [],
},
{
section_id: "010407",
title: "R1C4R8",
description: "Optional",
childPages: [],
},
{
section_id: "010408",
title: "R1C4R9",
description: "Optional",
childPages: [
{
section_id: "01040801",
title: "R1C4R9C1",
description: "Optional",
childPages: [],
},
{
section_id: "01040802",
title: "R1C4R9C2",
description: "Optional",
childPages: [],
},
{
section_id: "01040803",
title: "R1C4R9C3",
description: "Optional",
childPages: [],
},
],
},
],
},
],
};
const JSON2 = {
section_id: "02",
title: "R2",
description: "Optional",
childPages: [
{
section_id: "0201",
title: "R2C1",
description: "Optional",
childPages: [],
},
{
section_id: "0202",
title: "R2C2",
description: "Optional",
childPages: [],
},
{
section_id: "0203",
title: "R2C3",
description: "Optional",
childPages: [],
},
{
section_id: "0204",
title: "R2C4",
description: "Optional",
childPages: [
{
section_id: "020401",
title: "R2C4R1",
description: "Optional",
childPages: [],
},
{
section_id: "020402",
title: "R2C4R2",
description: "Optional",
childPages: [],
},
{
section_id: "020403",
title: "R2C4R3",
description: "Optional",
childPages: [],
},
{
section_id: "020404",
title: "R2C4R5",
description: "Optional",
childPages: [],
},
{
section_id: "020405",
title: "R2C4R6",
description: "Optional",
childPages: [],
},
{
section_id: "020406",
title: "R2C4R7",
description: "Optional",
childPages: [],
},
{
section_id: "020407",
title: "R2C4R8",
description: "Optional",
childPages: [],
},
{
section_id: "020408",
title: "R2C4R9",
description: "Optional",
childPages: [
{
section_id: "02040801",
title: "R2C4R9C1",
description: "Optional",
childPages: [],
},
{
section_id: "02040802",
title: "R2C4R9C2",
description: "Optional",
childPages: [],
},
{
section_id: "02040803",
title: "R2C4R9C3",
description: "Optional",
childPages: [],
},
],
},
],
},
],
};
function childPages(item) {
let arr = [];
item.map((ele) => {
const obj = {
key: ele.section_id,
label: ele.title,
subLabel: ele.description,
children: ele.childPages.length ? childPages(ele.childPages) : [],
};
arr.push(obj);
});
return arr;
}
function func(data) {
let chlidPagesArr = [], newArr = [];
const result = data.map(d => Array(d).map(ele => {
ele.childPages.forEach((item) => {
const obj = {
key: item.section_id,
label: item.title,
subLabel: item.description,
children: item.childPages.length
? childPages(item.childPages)
: [],
};
chlidPagesArr.push(obj);
});
return {
key: ele.section_id,
label: ele.title,
subLabel: ele.description,
children: chlidPagesArr,
};
}))
if (result.length > 0) {
result.forEach(item => {
item.forEach(item1 => {
newArr.push(item1);
})
})
return newArr;
} else {
return result;
}
}
const JSONS = [JSON1, JSON2];
const finalFormat = func(JSONS);
const result = [
{
key: "00",
label: "Root",
subLabel: "Optional",
children: finalFormat,
},
];
console.log(result);