Get all children from parent JSON child data

Question

I have parent-child JSON data and I want all the child (nested children) from the selected parent.

For example, I have JSON data:

[{ "id": 1, "parent": 0, "name": "Parent" }, { "id": 2, "parent": 1, "name": "Child 1" }, { "id": 3, "parent": 2, "name": "Grand Child 1" }, { "id": 4, "parent": 2, "name": "Grand Child 2" }, { "id": 5, "parent": 1, "name": "Child 2" }] 

And I have a findAllChildren (1) function, where "1" is the "parent", and then the result of the function should be:

 [{ "id": 2, "parent": 1, "name": "Child 1" }, { "id": 3, "parent": 2, "name": "Grand Child 1" }, { "id": 4, "parent": 2, "name": "Grand Child 2" }, { "id": 5, "parent": 1, "name": "Child 2" }] 

And in another case, if I call findAllChildren (2), the result of the function should look like this:

 [{ "id": 3, "parent": 2, "name": "Grand Child 1" }, { "id": 4, "parent": 2, "name": "Grand Child 2" }] 

What is the correct way to create a function to solve this case? Thanks.

Answer 1

You can simply iterate over the source data and look for the elements with the given id as parent_id. If found, do the same recursively with the item id.

Take a look here: https://jsfiddle.net/6ydog1tj/2/

 function findAllChildren (id, results, depth) { for (d in data) { if (data[d].parent == id) { data[d].depth = depth results.push(data[d]) findAllChildren(data[d].id, results, depth + 1) } } } var results = [] findAllChildren(1, results, 0) $('body').append(results.map(function (element) { return Array(element.depth + 1).join(' -> ') + element.name + '<br>' })) console.log(results) 

displays

 Child 1 -> Grand Child 1 -> Grand Child 2 Child 2 

Answer 2

I propose to iterate over all the data and build a tree as an object with properties to start a search with all the id data.

Then the object goes, and the children repeat for the result.

 function getDescendant(id) { var result = []; Array.isArray(object[id].children) && object[id].children.forEach(function iter(a) { result.push({ id: a.id, parent: a.parent, name: a.name }); Array.isArray(a.children) && a.children.forEach(iter); }); return result; } var data = [{ id: 1, parent: 0, name: "Parent" }, { id: 2, parent: 1, name: "Child 1" }, { id: 3, parent: 2, name: "Grand Child 1" }, { id: 4, parent: 2, name: "Grand Child 2" }, { id: 5, parent: 1, name: "Child 2" }], object = function (data, root) { var o = {}; data.forEach(function (a) { a.children = o[a.id] && o[a.id].children; o[a.id] = a; o[a.parent] = o[a.parent] || {}; o[a.parent].children = o[a.parent].children || []; o[a.parent].children.push(a); }); return o; }(data, 0); console.log(getDescendant(1)); console.log(getDescendant(2)); console.log(object); 

 .as-console-wrapper { max-height: 100% !important; top: 0; } 

Answer 3

You can use Array.prototype.filter to remove elements from an array that do not match the predicate condition.

filter will iterate over the array and run the function for each iteration. this return value is true, the element will be in the returned array.

Function parentId , transmitted to the filter, is important. it will block the parent identifier you are looking for in the scope and return the function in which the filter will be executed.

 const data = [{ "id": 1, "parent": 0, "name": "Parent" }, { "id": 2, "parent": 1, "name": "Child 1" }, { "id": 3, "parent": 2, "name": "Grand Child 1" }, { "id": 4, "parent": 2, "name": "Grand Child 2" }, { "id": 5, "parent": 1, "name": "Child 2" }] function parentId(id) { return function(item) { return item.parent === id } } console.log( data.filter(parentId(2)) )