How to get array object in nested array of array of objects javascript

Question

I would like to know how to get the array object in nested array object using javascript. Below is the object obj, should get the obj with the children1 status having Active and Updated.

var obj = [{
   "id": 1,
   "status":"updated",
   "code": "product",
   "children": [
     {
        "id" : 20,
      "title": "cafe",
      "children1": [
        {"id": "2", "title": "SG", "status": "Active"},
        {"id": "3", "title": "TH", "status": "Updated"},
        {"id": "4", "title": "MY", "status": "Deleted"}
      ]
     },
     {
        "id" : 21,
      "title": "others",
      "children1": [
        {"id": "5", "title": "tours", "status": "Active"},
        {"id": "6", "title": "services", "status": "Updated"},
        {"id": "7", "title": "finance", "status": "Deleted"}
      ]
     }
   ]
}]


function getActiveUpdtedObj (obj){
  var result = obj.filter(e=>e.children.filter(i=>i.children1.status !=="Deleted"));
  console.log(result);
}

this.getActiveUpdtedObj(obj);

Expected Result

[{
   "id": 1,
   "status":"updated",
   "code": "product",
   "children": [
     {
        "id" : 20,
      "title": "cafe",
      "children1": [
        {"id": "2", "title": "SG", "status": "Active"},
        {"id": "3", "title": "TH", "status": "Updated"}
      ]
     },
     {
        "id" : 21,
      "title": "others",
      "children1": [
        {"id": "5", "title": "tours", "status": "Active"},
        {"id": "6", "title": "services", "status": "Updated"}
      ]
     }
   ]
}]

Answer 1

UPDATE:

So first you iterate over obj array (it is an array, not an object), with .map, and return the same current object (using the spread operator {...o}), and overriding children property with newly filtered children array.

Now, how to get this newly filtered children array?

Perform another iteration with .map on .children property of your current object, access each of child's children1 property and filter it. Construct and return new child object (again with the spread operator) by overriding its children1 property with newly filtered array. Done, now you have new top-level children array.

obj.map(o => {
  const newChildren = o.children.map(child => {
    const newChildren1 = child.children1.filter(c => c.status !== 'Deleted');
    return { ...child, children1: newChildren1 };
  });

  return { ...o, children: newChildren }
});

Answer 2

One possible method is the following :

function getActiveUpdtedObj(obj) {
  var result = obj.map(e => {
    e.children = e.children.map(child => {
      child.children1 = child.children1.filter(c => c['status'] !== "Deleted");
      return child
    });
    return e
  });
}

at the very top level, you might want to do map on the object itself (meaning transform each element), then for each element you want to edit only its children.children1 data. At this point, you will need filter.

Notes:

• you can do reduce as well but that will be a bit more complicate ;D

• you can checkout lodash library, it's so good for collection manipulation https://lodash.com/docs

Answer 3

You can mutate the original object like:

var obj = [
  {
    id: 1,
    status: 'updated',
    code: 'product',
    children: [
      {
        id: 20,
        title: 'cafe',
        children1: [
          { id: '2', title: 'SG', status: 'Active' },
          { id: '3', title: 'TH', status: 'Updated' },
          { id: '4', title: 'MY', status: 'Deleted' },
        ],
      },
      {
        id: 21,
        title: 'others',
        children1: [
          { id: '5', title: 'tours', status: 'Active' },
          { id: '6', title: 'services', status: 'Updated' },
          { id: '7', title: 'finance', status: 'Deleted' },
        ],
      },
    ],
  },
];

for (const { children } of obj) {
  for (const child of children) {
    child.children1 = child.children1.filter(e => e.status !== 'Deleted');
  }
}
console.log(JSON.stringify(obj));

Answer 4

We can use map, filter and rest operator to get the desired result:

const result = arr.map(({children, ...rest}) => ({...rest, 
  children: children.map(({children1, ...rest1 }) => ({ ...rest1, 
      children1: children1.filter(f => f.status == 'Active' 
          || f.status == 'Updated') }))}))

An example:

let arr = [{
   "id": 1,
   "status": "updated",
   "code": "product",
   "children": [
      {
         "id": 20,
         "title": "cafe",
         "children1": [
            { "id": "2", "title": "SG", "status": "Active" },
            { "id": "3", "title": "TH", "status": "Updated" },
            { "id": "4", "title": "MY", "status": "Deleted" }
         ]
      },
      {
         "id": 21,
         "title": "others",
         "children1": [
            { "id": "5", "title": "tours", "status": "Active" },
            { "id": "6", "title": "services", "status": "Updated" },
            { "id": "7", "title": "finance", "status": "Deleted" }
         ]
      }
   ]
}]

const result = arr.map(({children, ...rest}) => ({...rest, children: children.map(({children1, ...rest1 }) =>
   ({ ...rest1, children1: children1.filter(f => f.status == 'Active' || f.status == 'Updated') }))}))
console.log(result);

Answer 5

I think a better method would be using array methods map() and filter() as in this code

function getActiveUpdtedObj (obj){
  var result = obj.map(object => ({
    ...object,
    children: object.children.map(child => ({
       ...child,
       children1: child.children1.filter(child1 => child1.status !== 'Deleted')
    }))
  }));
  console.log(result);
}

Let know if the answer helped.