Hi I have a function that takes nested array of parents containing children and flatten it. However, I would like to also keep track of all of its higher nodes ids.
Example data structure:
[{
id: 1,
type: "group",
name: "Colors",
items: [
{ id: 2, type: "item", name: "Red", items: [] },
{ id: 3, type: "item", name: "Purple2", items: [] },
{
id: 4,
type: "item",
name: "Black",
items: [
{
id: 5,
type: "item",
name: "Purple3",
items: [],
},
{ id: 6, type: "item", name: "Purple4", items: [] },
],
},
],
}]
This is current end result (this is exactly what I want to achieve), but potentially functions below can be refactored.
{id: 1, name: "Colors", depth: 1, parentId: null, main: []}
1: {id: 2, name: "Red", depth: 2, parentId: 1, main: [1]}
2: {id: 3, name: "Purple2", depth: 2, parentId: 1, main: [1]}
3: {id: 4, name: "Black", depth: 2, parentId: 1, main: [1]}
4: {id: 5, name: "Purple3", depth: 3, parentId: 4, main: [1,4]} // main stores id of all higher parents e.g. id 4 = "black" and parent of 4 = "Colors"
5: {id: 6, name: "Purple4", depth: 3, parentId: 4, main: [1,4]}
My current flatten array function:
const flattenArr = (data, depth = 1, parent = null) => {
const result = [];
data.forEach((item) => {
const { id, name, items } = item;
result.push({
id,
name,
depth,
parentId: parent,
main: [],
});
if (items) result.push(...flattenArr(items, depth + 1, item.id));
});
return result;
};
The function below is used to keep track of all parent ids. However it does not seem to be most optimal solution that I can use therefore I would like to know whether it can be improved possibly to be done all in one recursive function.
const collectParents = (arr) => {
for (let b = 0; b < arr.length; b++) {
if (arr[b].depth !== 1) {
arr[b].main.push(
...arr[b - 1].main,
arr[b - 1].depth === arr[b].depth - 1 ? arr[b - 1].id : null
);
}
}
arr.forEach((x) => (x.main = x.main.filter((i) => i !== null)));
};
You couldt take Array#flatMap
with a closure over main
and depth
.
const flat = (main = [], depth = 1,) => ({ top, type, items = [], ...o }) => [ { ...o, depth, parentId: main[0] ?? null, main }, ...items.flatMap(flat([...main, o.id], depth + 1)) ], tree = [{ id: 1, type: "group", name: "Colors", items: [{ id: 2, type: "item", name: "Red", items: [], top: new Set() }, { id: 3, type: "item", name: "Purple2", items: [] }, { id: 4, type: "item", name: "Black", items: [{ id: 5, type: "item", name: "Purple3", items: [] }, { id: 6, type: "item", name: "Purple4", items: [] }] }] }], result = tree.flatMap(flat()); console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }
You could create recursive function using reduce
method and pass down parent id and an array of previous ids.
const data = [{"id":1,"type":"group","name":"Colors","items":[{"id":2,"type":"item","name":"Red","items":[],"top":{}},{"id":3,"type":"item","name":"Purple2","items":[]},{"id":4,"type":"item","name":"Black","items":[{"id":5,"type":"item","name":"Purple3","items":[]},{"id":6,"type":"item","name":"Purple4","items":[]}]}]}] function flatten(data, depth = 0, parentId = null, main = []) { return data.reduce((r, { items, id, ...rest }) => { const obj = { ...rest, id, depth, parentId, main } r.push(obj) if (items.length) { r.push(...flatten(items, depth + 1, id, [...main, id])) } return r; }, []) } const result = flatten(data) console.log(result)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.