Initial API has this list
const main = [
{
id: 1,
name: 'Folder 1',
list: [
{
listId: 3,
listName: 'List ID 3',
subList: [
{ id: 1, subListName: 'Sub List ID 1' },
{ id: 2, subListName: 'Sub List ID 2' },
],
},
],
},
{
id: 2,
name: 'Folder 2',
list: [
{
listId: 1,
listName: 'List ID 1',
subList: [
{ id: 1, subListName: 'Sub List ID 1' },
{ id: 2, subListName: 'Sub List ID 2' },
],
},
{
listId: 2,
listName: 'List ID 2',
subList: [{ id: 2, subListName: 'Sub List ID 2' }],
},
],
},
]
But I'm creating a different structure that looks like
const folders = [
{
id: 1,
name: 'Folder 1',
list: [
{ listId: 3, subListId: 1 },
{ listId: 3, subListId: 2 },
],
},
{
id: 2,
name: 'Folder 2',
list: [
{ listId: 1, subListId: 1 },
{ listId: 2, subListId: 3 },
],
},
]
I need to match those ID and add listName and subListName to those nested object.
Final version how it should look
const final = [
{
id: 1,
name: 'Folder 1',
list: [
{ listId: 3, listName: 'List ID 3', subListId: 1, subListName: 'Sub List ID 1' },
{ listId: 3, listName: 'List ID 3', subListId: 2, subListName: 'Sub List ID 2' },
],
},
{
id: 2,
name: 'Folder 2',
list: [
{ listId: 1, listName: 'List ID 1', subListId: 1, subListName: 'Sub List ID 1' },
{ listId: 2, listName: 'List ID 2', subListId: 2, subListName: 'Sub List ID 2' },
],
},
]
I have tried doing forloops and pushing to new array but i think this is getting messy so looking for a cleaner way
const t5 = []
for (const el of folders) {
const t4 = []
for (const _el of el.list) {
let listId
let subListId
let listname
let subListName
for (const i of main) {
for (const _i of i.list) {
if (_i.listId === _el.listId) {
for (const __i of _i.subList) {
if (__i.id === _el.subListId) {
console.log('๐ ~ __i', _i)
}
}
}
}
}
if (_el.listId === listId && _el.subListId === 1) {
t4.push({
..._el,
listname: listname,
subListName: subListName,
})
}
}
t5.push({ ...el, list: t4 })
}
console.log('๐ ~ t5', t5)
try this
const newArray = [];
for (let item of array) {
const object = {
id: item.id,
name: item.name,
list: []
}
for (let list of item.list) {
object.list.push(...list.subList.map(subList => ({
listId: list.listId,
listName: list.listName,
subListId: subList.id,
subListName: subList.subListName
})))
}
newArray.push(object);
}
Use Array.reduce for that.
const main = [
{
id: 1,
name: 'Folder 1',
list: [
{
listId: 3,
listName: 'List ID 3',
subList: [
{ id: 1, subListName: 'Sub List ID 1' },
{ id: 2, subListName: 'Sub List ID 2' },
],
},
],
},
{
id: 2,
name: 'Folder 2',
list: [
{
listId: 1,
listName: 'List ID 1',
subList: [
{ id: 1, subListName: 'Sub List ID 1' },
{ id: 2, subListName: 'Sub List ID 2' },
],
},
{
listId: 2,
listName: 'List ID 2',
subList: [{ id: 2, subListName: 'Sub List ID 2' }],
},
],
},
]
const folders = [
{
id: 1,
name: 'Folder 1',
list: [
{ listId: 3, subListId: 1 },
{ listId: 3, subListId: 2 },
],
},
{
id: 2,
name: 'Folder 2',
list: [
{ listId: 1, subListId: 1 },
{ listId: 2, subListId: 2 },
],
},
];
const final = folders.reduce((acc, curr) => {
const node = {
id: curr.id,
name: curr.name,
};
// Find the node from the main array with id from folders node id
const mainNode = main.find((item) => item.id === node.id);
node.list = curr.list.map((listNode) => {
// From the node found from main array, get the list node
const listItem = mainNode.list.find((item) => item.listId === listNode.listId);
// From the list node find the sublist node with id
const subListItem = listItem ? listItem.subList.find((item) => item.id === listNode.subListId) : null;
return {
listId: listItem.listId,
listName: listItem.listName,
subListId: subListItem.id,
subListName: subListItem.subListName,
}
});
acc.push(node);
return acc;
}, []);
console.log(final);