Best way for nest child objects from objects array with Javascript

Question

Hi masters i need to find the best way to convert this:

 [
  { "id": 1, "animal": "cat", "age": 6, "name": "loky" },
  { "id": 2, "animal": "cat", "age": 3, "name": "michu", "parent": 1 },
  { "id": 3, "animal": "cat", "age": 2, "name": "boots", "parent": 1 },
  { "id": 4, "animal": "dog", "age": 9, "name": "bones" },
  { "id": 5, "animal": "dog", "age": 6, "name": "chok", "parent": 4 },
  { "id": 6, "animal": "dog", "age": 6, "name": "cofee","parent": 4 }
]

to this:

 [
  { "id": 1,
    "animal": "cat",
    "age": 6,
    "name": "loky",
    "childs":[ { "id": 2, "animal": "cat", "age": 3, "name": "michu", "parent": 1 },
               { "id": 3, "animal": "cat", "age": 2, "name": "boots", "parent": 1 }] 
  }
  ,
  { "id": 4,
    "animal": "dog",
    "age": 9,
    "name": "bones",
    "childs":[{ "id": 5, "animal": "dog", "age": 6, "name": "chok", "parent": 4 },
              { "id": 6, "animal": "dog", "age": 6, "name": "cofee", "parent": 4 }]
  }
 ]

note that the "parent" key must be used to nest "childs" ,i create my way but with several functions is horrible ,i think there may be a more efficient way.

Thanks in advance sorry for my english

Get familiar with [how to access and process objects, arrays, or JSON](/q/11922383/4642212), how to [access properties](//developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Property_Accessors), and use the static and instance methods of [`Object`](//developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object#Static_methods) and [`Array`](//developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array#Static_methods). Without knowing what _“horrible”_ approach you took, how can we know which approaches constitute an adequate answer to this question? — Sebastian Simon, Nov 17 '22 at 13:01
Does [Convert array of objects with parent ids to a nested tree structure](/q/59779629/4642212) help? — Sebastian Simon, Nov 17 '22 at 13:04

score 1 · Accepted Answer · answered Nov 17 '22 at 13:32

1

const rows = [
  { id: 1, animal: 'cat', age: 6, name: 'loky' },
  { id: 2, animal: 'cat', age: 3, name: 'michu', parent: 1 },
  { id: 3, animal: 'cat', age: 2, name: 'boots', parent: 1 },
  { id: 4, animal: 'dog', age: 9, name: 'bones' },
  { id: 5, animal: 'dog', age: 6, name: 'chok', parent: 4 },
  { id: 6, animal: 'dog', age: 6, name: 'cofee', parent: 4 },
];

function map(rows) {
  const categories = Array.from(new Set(rows.map((row) => row.animal)));
  return categories.map((c) => {
    const parent = rows.find((row) => row.animal === c);
    parent.childs = rows
      .filter((r) => r.id !== parent.id && r.animal === c)
      .map((r) => ({ ...r, parent: parent.id }));
    return parent;
  });
}

console.log(map(row));

Simply create a mapper function to do.

answered Nov 17 '22 at 13:32

Shawn

146
7

Thanks a lot this helpme so much ,with your tips a mede other function working fine, but maybe can make some better? `
` ```function nester(arr){ parents = rows.filter((row) => row.parent? '' : row.child=[]) parents.forEach(function(e){ arr.forEach((r)=> r.parent == e.id? e.child.push(r) : '') }) parents = parents.filter(elem => elem.child.length < 1? delete elem.child : elem) return parents } ``` – Cristian Garate Nov 17 '22 at 20:57
@CristianGarate Sorry I didn't get what you expected for this code. Explain more please – Shawn Nov 17 '22 at 21:03
i do a pen [link](https://codepen.io/cgaratea/pen/bGKoaKy) – Cristian Garate Nov 17 '22 at 21:07
@CristianGarate, we can optimize, which would make the code uglier. But on the other hand, we can gain the time complexity. You know there are always pros and cons that exist – Shawn Nov 17 '22 at 21:22

score 0 · Answer 2 · answered Nov 17 '22 at 21:18

Maybe?

const rows = [
  { id: 1, animal: 'cat', age: 6, name: 'loky' },
  { id: 2, animal: 'cat', age: 3, name: 'michu', parent: 1 },
  { id: 3, animal: 'cat', age: 2, name: 'boots', parent: 1 },
  { id: 4, animal: 'dog', age: 9, name: 'bones' },
  { id: 5, animal: 'dog', age: 6, name: 'chok', parent: 4 },
  { id: 6, animal: 'dog', age: 6, name: 'cofee', parent: 4 },
];

function nester(arr) {
  const parents = rows.filter((r) => !r.parent);
  const children = rows.filter((r) => r.parent);
  return parents.map((p) => {
    return {
      ...p,
      children: children.filter((c) => c.parent === p.id),
    };
  });
}
console.log(nester(rows));

Thanks but supose i put another object like : { "id": 0, "animal": "cat", "age": 10, "name": "oldy" } then with your function add a "children" empty property — Cristian Garate, Nov 17 '22 at 21:28

Best way for nest child objects from objects array with Javascript

2 Answers2