I can't figure out how to explain this right, but I wanna make a function that takes this array:
const tasks = [
{id: 1, goal: 'Clean apartment', parent_id: null},
{id: 2, goal: 'Clean bathroom', parent_id: 1},
{id: 3, goal: 'Clean kitchen', parent_id: 1},
{id: 4, goal: 'Clean sink', parent_id: 2},
{id: 5, goal: 'Clean shower', parent_id: 2},
{id: 6, goal: 'Make app', parent_id: null}
]
and generates this object:
{id: 1, goal: 'Clean apartment', parent_id: null, children: [
{id: 2, goal: 'Clean bathroom', parent_id: 1, children: [
{id: 4, goal: 'Clean sink', parent_id: 2, children: []},
{id: 5, goal: 'Clean shower', parent_id: 2, children: []},
]},
{id: 3, goal: 'Clean kitchen', parent_id: 1, children: []},
]},
{id: 6, goal: 'Make app', parent_id: null, children: []}
Edit: So far I made this, but it only returns the first layer of the children:
function addChildren(tasks, id) {
var task = tasks.find(task => task.id === id)
var children = tasks.filter(task => task.parent_id === id)
task.children = children
return task
}
var newTask = addChildren(tasks, 1)
console.log(newTask)
EDIT 2: I tried making the function recursive, but I get an error saying "tasks.find is not a function".
function addChildren(tasks, id) {
var task = tasks.find(task => task.id === id)
var children = tasks.filter(task => task.parent_id === id)
task.children = children
task.children.forEach(child => {
addChildren(child, child.id)
})
return task
}
var newTask = addChildren(tasks, 1)
console.log(newTask)
Make the function recursive and call it for each child.
const tasks = [
{id: 1, goal: 'Clean apartment', parent_id: null},
{id: 2, goal: 'Clean bathroom', parent_id: 1},
{id: 3, goal: 'Clean kitchen', parent_id: 1},
{id: 4, goal: 'Clean sink', parent_id: 2},
{id: 5, goal: 'Clean shower', parent_id: 2},
{id: 6, goal: 'Make app', parent_id: null}
]
function addChildren(tasks, idOrTask) {
var task = (typeof idOrTask === 'number') ? tasks.find(task => task.id === idOrTask) : idOrTask;
var children = tasks.filter(t => t.parent_id === task.id);
task.children = children.map(child => addChildren(tasks, child));
return task
}
var newTask = addChildren(tasks, 1)
console.log(newTask)I've optimized the function a little to avoid unnecessary calls of find.
You can filter those that match a given id, and calculate their children with a recursive call:
const nest = (xs, parent = null) =>
xs .filter (({parent_id}) => parent_id == parent)
.map (({id, ...rest}) => ({id, ...rest, children: nest (xs, id)}))
const tasks = [{id: 1, goal: 'Clean apartment', parent_id: null}, {id: 2, goal: 'Clean bathroom', parent_id: 1}, {id: 3, goal: 'Clean kitchen', parent_id: 1}, {id: 4, goal: 'Clean sink', parent_id: 2}, {id: 5, goal: 'Clean shower', parent_id: 2}, {id: 6, goal: 'Make app', parent_id: null}]
console .log (nest (tasks)).as-console-wrapper {max-height: 100% !important; top: 0}If you no longer want the now-redundant parent_id in the output, you can simply remove it by replacing the map line above with:
.map (({id, parent_id, ...rest}) => ({id, ...rest, children: nest (xs, id)}))
const tasks = [
{id: 1, goal: 'Clean apartment', parent_id: null},
{id: 2, goal: 'Clean bathroom', parent_id: 1},
{id: 3, goal: 'Clean kitchen', parent_id: 1},
{id: 4, goal: 'Clean sink', parent_id: 2},
{id: 5, goal: 'Clean shower', parent_id: 2},
{id: 6, goal: 'Make app', parent_id: null}
]
function buildTree(root) {
return {
goal: root.goal, // Store the goal
children: tasks
.filter(task => task.parent_id === root.id) // All tasks with parent_id = root.id
.map(child => buildTree(child)) // Recursively collect their children
}
}
const result = buildTree(tasks[0]) // Build the tree starting with 'Clean apartment'
console.log(result);You can simplify the logic somewhat by not passing around IDs