Get all children from parent child JSON data

Question

I have parent-child JSON data and I want get all children (nested children) from 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 function findAllChildren(1), where "1" is "parent" and then result of 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 other case, if i call findAllChildren(2), result of the function should like below :

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

What is the proper way to create function to solve that case? Thank you.

please add the wanted result. is the data is ordered? does you have more nested levels, than above? wht should happen, if you want to get `id = 1`? — Nina Scholz, Oct 11 '16 at 11:43

Martin Gottweis · Accepted Answer · 2016-10-11T12:51:00.793

8

You can just iterate over the original data and look for items that has the specified id as parent_id. If found, do the same recursively with the element's id.

Check it out 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)

prints out

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

edited Oct 11 '16 at 12:51

answered Oct 11 '16 at 11:23

Martin Gottweis

2,721
13
27

Hi Martin, I want get data include grand child too. – Hidayat Oct 11 '16 at 11:38
Could you change your question with desired output for given input? In the question It fetches items with `parent=2`. – Martin Gottweis Oct 11 '16 at 11:41
I get it now. Changed the answer and jsfiddle, check it out – Martin Gottweis Oct 11 '16 at 12:46
1

You are welcome. Good luck on your project. Hey, maybe you could also structure the data in a nested way to make this much easier. Check it out here: https://jsfiddle.net/eokf884p/1/ – Martin Gottweis Oct 11 '16 at 12:57
Thank you for your suggestion. Maybe for another case, because I retrieve the data from RDBMS. – Hidayat Oct 11 '16 at 13:00
Oh, I get it. Good luck with your project then. – Martin Gottweis Oct 11 '16 at 13:01

Nina Scholz · Answer 2 · 2016-10-11T12:52:30.257

I suggest to iterate all data and build a tree like object with properties to start the search with all given id.

Then the object is walked and the children iterated 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; }

Hi @nina-scholz, i want get data include grand child. for example : if I pass parent=1 i should get data with id=2 include child of node with it child too. — Hidayat, Oct 11 '16 at 11:37
Thank you @nina-scholz for your help, I get great solution from martin. — Hidayat, Oct 11 '16 at 13:06

score 1 · Answer 3 · answered Oct 11 '16 at 11:25

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

filter will loop over an array and run a function for each iteration. it the return value is true the item will be in the returned array.

The parentId function passed into filter is curried. it will lock in the parent id you are searching for in the scope and return the function that filter will run.

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))
)

No. I want search child and grand-child (nested) from parent node. — Hidayat, Oct 11 '16 at 12:39

Get all children from parent child JSON data

3 Answers3

Linked