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"}
      ]
     }
   ]
}]

Kox · Accepted Answer · 2020-03-26 14:12:04Z

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

edited Mar 26, 2020 at 14:12

answered Mar 26, 2020 at 9:26

Kox

8537 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

BDL Over a year ago

Although this code might solve the problem, a good answer should also explain what it does and how it helps.

hackinteachk · Accepted Answer · 2020-03-26 09:36:43Z

0

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

answered Mar 26, 2020 at 9:36

hackinteachk

3133 silver badges13 bronze badges

Comments

TheMaster · Accepted Answer · 2020-03-26 09:40:21Z

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

StepUp · Accepted Answer · 2020-03-26 09:41:34Z

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

RedJanvier · Accepted Answer · 2020-03-26 09:42:49Z

0

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.

answered Mar 26, 2020 at 9:42

RedJanvier

955 bronze badges

Collectives™ on Stack Overflow

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

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest