Filtering nested object in array using JavaScript

Question

I am trying to get data from a nested array.

My input:

layout: {
  parent: [
   {
    type: "tabset",
    id: "tab1",
    children: [
      {
        type: "tab",
        id: "id1",
      },
      {
        type: "tab",
        id: "id2",
      },
    ],
  },
  {
    type: "tabset",
    id: "tab2",
    children: [
      {
        type: "tab",
        id: "id3",
      },
    ],
  },
],},

I only want to remove object with id: "id2" from my input and here is my code:

layout.parent.filter((item) => item.children.filter((el) => el.id !== "id2"));

The output that I want:

layout: {
  parent: [
   {
    type: "tabset",
    id: "tab1",
    children: [
      {
        type: "tab",
        id: "id1",
      },
    ],
  },
  {
    type: "tabset",
    id: "tab2",
    children: [
      {
        type: "tab",
        id: "id3",
      },
    ],
  },
],},

But my code does not works fine. Please help me explain and suggest some new ways to resolve it.

Thank you so much

what is the output of your code?

majuran
– majuran

2021-04-01 03:00:06 +00:00
Commented Apr 1, 2021 at 3:00 — majuran
– majuran, Commented Apr 1, 2021 at 3:00
@majurageerthan It is the same as my input :(((

dacoten
– dacoten

2021-04-01 03:15:04 +00:00
Commented Apr 1, 2021 at 3:15 — dacoten
– dacoten, Commented Apr 1, 2021 at 3:15

danh · Accepted Answer · 2021-04-01 03:00:47Z

1

Replace the child array with the filtered version using assignment...

const layout = {
  parent: [{
      type: "tabset",
      id: "tab1",
      children: [{
          type: "tab",
          id: "id1",
        },
        {
          type: "tab",
          id: "id2",
        },
      ],
    },
    {
      type: "tabset",
      id: "tab2",
      children: [{
        type: "tab",
        id: "id3",
      }]
    }
  ]
}

layout.parent.forEach(parent => {
  parent.children = parent.children.filter(e => e.id !== 'id2')
})
console.log(layout)

answered Apr 1, 2021 at 3:00

danh

62.7k10 gold badges100 silver badges139 bronze badges

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

Comments

Nguyễn Văn Phong · Accepted Answer · 2021-04-01 03:35:39Z

1

Personally, we should use data instead of mutating it :)

You can use Array#map & Array#filter like this

const layout = {parent: [{type: "tabset",id: "tab1",children: [{ type: "tab", id: "id1", }, { type: "tab",
 id: "id2", }, ],  },{ type: "tabset",id: "tab2", children: [ { type: "tab", id: "id3",}] }]};

const result = layout.parent.map(({type, id, children}) => 
              ({type, id, children: children.filter(c => c.id !== "id2")}));

console.log({parent: result});

edited Apr 1, 2021 at 3:35

answered Apr 1, 2021 at 3:30

Nguyễn Văn Phong

14.2k19 gold badges47 silver badges65 bronze badges

1 Comment

Nguyễn Văn Phong Over a year ago

Does this answer your question? Let me know if you need any help ^^! Don't forget to accept my answer if it was useful to you @@dacoten

Collectives™ on Stack Overflow

Filtering nested object in array using JavaScript

2 Answers 2

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Related