I have category list with ID and parentId. Each category parentId is other category id.
If I have some selectedCategory, for example: 10 (which means category with id: 10), I want to create a new array where the last object will be category with id: 10 - { title: 'category 10', id: 10, parentId: 6}, after that category with id: 6 (because of previous object parentId) and so on, until the category parentId is 0.
let arr = [
{ title: 'category 1', id: 1, parentId: 0},
{ title: 'category 2', id: 2, parentId: 1},
{ title: 'category 3', id: 3, parentId: 4},
{ title: 'category 4', id: 4, parentId: 2},
{ title: 'category 5', id: 5, parentId: 3},
{ title: 'category 6', id: 6, parentId: 2},
{ title: 'category 7', id: 7, parentId: 5},
{ title: 'category 8', id: 8, parentId: 0},
{ title: 'category 9', id: 9, parentId: 0},
{ title: 'category 10', id: 10, parentId: 6},
]
So, in this case the result Array should be:
let resultArr = [
{ title: 'category 10', id: 10, parentId: 6},
{ title: 'category 6', id: 6, parentId: 2},
{ title: 'category 2', id: 2, parentId: 1},
{ title: 'category 1', id: 1, parentId: 0},
]
You can do something like this
const arr = [{ title: "category 1", id: 1, parentId: 0 }, { title: "category 2", id: 2, parentId: 1 }, { title: "category 3", id: 3, parentId: 4 }, { title: "category 4", id: 4, parentId: 2 }, { title: "category 5", id: 5, parentId: 3 }, { title: "category 6", id: 6, parentId: 2 }, { title: "category 7", id: 7, parentId: 5 }, { title: "category 8", id: 8, parentId: 0 }, { title: "category 9", id: 9, parentId: 0 }, { title: "category 10", id: 10, parentId: 6 }];
const idMap = arr.reduce((acc, curr) => {
acc[curr.id] = curr;
return acc;
}, {});
const getParents = (id) => {
const result = [];
let current = idMap[id];
while (current) {
result.push(current);
current = idMap[current.parentId];
}
return result;
};
console.log(getParents(10));you can easily do this using a generator function.
const log = console.log;
let arr = [
{ title: 'category 1', id: 1, parentId: 0},
{ title: 'category 2', id: 2, parentId: 1},
{ title: 'category 3', id: 3, parentId: 4},
{ title: 'category 4', id: 4, parentId: 2},
{ title: 'category 5', id: 5, parentId: 3},
{ title: 'category 6', id: 6, parentId: 2},
{ title: 'category 7', id: 7, parentId: 5},
{ title: 'category 8', id: 8, parentId: 0},
{ title: 'category 9', id: 9, parentId: 0},
{ title: 'category 10', id: 10, parentId: 6},
]
function* getCategories(arr, id) {
let category = arr.find(elm => elm.id === id)
if(!category) return;
do {
yield category
category = arr.find(elm => elm.id === category.parentId)
} while(category)
}
const categories = getCategories(arr, 10)
const resultArr = [...categories]
log(resultArr)Now here is a more advanced way to do it using Symbol.iterator
arr[Symbol.iterator] = function* (arr, id) {
let category = arr.find(elm => elm.id === id)
if(!category) return;
do {
yield category
category = arr.find(elm => elm.id === category.parentId)
} while(category)
}
log([...arr[Symbol.iterator](arr, 10)])
checkout generators:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Generator
checkout Symbol.iterator:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/iterator