Remove Object inside Array inside another Array Javascript

Question

let bigArray = [
{
    Name: 'Alice',
    children: [
                 {Name: 'AliceChild1', Country: 'country1'}, 
                 {Name: 'AliceChild2', Country: 'country2'}
    ]
},
{
    Name: 'Bob',
    children: [
                 {Name: 'BobChild1', Country: 'country3'}, 
                 {Name: 'BobChild2', Country: 'country4'}
    ]
},
{
    Name: 'Sam',
    children: [
                 {Name: 'SamChild1', Country: 'country5'}, 
                 {Name: 'SamChild2', Country: 'country6'}
    ]
},
]

I want to remove an object from array inside another array. Property Name is unique. For an example if BobChild2 is removed bigArray should return as

let bigArray = [
{
    Name: 'Alice',
    children: [
                 {Name: 'AliceChild1', Country: 'country1'}, 
                 {Name: 'AliceChild2', Country: 'country2'}
    ]
},
{
    Name: 'Bob',
    children: [
                 {Name: 'BobChild1', Country: 'country3'},
    ]
},
{
    Name: 'Sam',
    children: [
                 {Name: 'SamChild1', Country: 'country5'}, 
                 {Name: 'SamChild2', Country: 'country6'}
    ]
},
]

What is the best way to do this in JavaScript ?

Updated: My answer

function removeChild(bigArray, childName) {
  let copyBigArray = []
  bigArray.forEach((item) => {
    let Obj = {
      Name: item.Name,
      children: item.children.filter(c => c.Name !== childName)
    }
    copyBigArray.push(Obj)
  })
  return copyBigArray
}

"The best way" - why don't we start with the way you have tried, first? — evolutionxbox
– evolutionxbox, Commented May 4, 2021 at 9:58
bigArray[1].children = bigArray[1].children.filter(child => child.Name === 'BobChild2')? — Mosh Feu
– Mosh Feu, Commented May 4, 2021 at 10:00
Why did you put an answer in the question? Why not just write an answer? — evolutionxbox
– evolutionxbox, Commented May 4, 2021 at 10:39

AbsoluteBeginner · Accepted Answer · 2021-05-04 11:18:15Z

1

Try this way:

let bigArray = [{
    Name: 'Alice',
    children: [{
        Name: 'AliceChild1',
        Country: 'country1'
      },
      {
        Name: 'AliceChild2',
        Country: 'country2'
      }
    ]
  },
  {
    Name: 'Bob',
    children: [{
        Name: 'BobChild1',
        Country: 'country3'
      },
      {
        Name: 'BobChild2',
        Country: 'country4'
      }
    ]
  }
]


bigArray.forEach(function(o) {
  o.children = o.children.filter(s => s.Name != 'BobChild2');
});

console.log(bigArray);

edited May 4, 2021 at 11:18

AbsoluteBeginner

2,2833 gold badges15 silver badges24 bronze badges

answered May 4, 2021 at 10:28

faramarz razmi

2791 silver badge7 bronze badges

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

Comments

Chrillewoodz · Accepted Answer · 2021-05-04 10:17:23Z

0

To support any nested depth you can do something like this:

function searchAndRemove(arr, query) {

    for (var i = arr.length; i > 0; i--) {

        if (query == arr[i].Name) {
            arr.splice(i, 1);
        }
    }
        
    if (arr.children) {
        searchAndRemove(arr.children, query);
    }
}

searchAndRemove(bigArray, 'BobChild2');

This will go through your array recursively until it finds all occurrences of BobChild2 and removes them.

edited May 4, 2021 at 10:17

answered May 4, 2021 at 10:06

Chrillewoodz

28.5k23 gold badges102 silver badges189 bronze badges

4 Comments

evolutionxbox Over a year ago

arr: any[], query: string what is this for?

Chrillewoodz Over a year ago

@evolutionxbox I had missed the query argument for the inner function. Other than that I'm not sure what you mean?

evolutionxbox Over a year ago

It’s not standard JavaScript and I don’t see typescript in the tags nor being used in the examples?

Chrillewoodz Over a year ago

@evolutionxbox Ah, old habit, lol. Updated answer.

tsnkff · Accepted Answer · 2021-05-04 10:20:54Z

Well the structure isn't optimal because it'll require iterating over 2 arrays, but I'd use filter() (documentation) something like this:

function deepFilter(array, name) {
  return array.map(arr => {
     if (!arr || !arr.children) {
       return arr;
     }
     arr.children = arr.children.filter(c => c.Name !== name);
     return arr;
  })
}

Filter has to return a Boolean to know if the element should be returned or not. Map has to return an element.

If you want to remove an element from the first Array once its children are empty, you could replace the map by a filter.

function deepFilter(array, name) {
  return array.filter(arr => {
     if (!arr || !arr.children || !arr.children.length) {
       return false;
     }
     arr.children = arr.children.filter(c => c.Name !== name);
     return arr && arr.children && arr.children.length;
  })
}

--

Use them by doing:

const new = deepFilter(bigArray, 'SamChild1')

Filip Huhta · Accepted Answer · 2021-05-04 10:28:27Z

Here is an example how you could achieve it:

let bigArray = [
{
    Name: 'Alice',
    children: [
                 {Name: 'AliceChild1', Country: 'country1'}, 
                 {Name: 'AliceChild2', Country: 'country2'}
    ]
},
{
    Name: 'Bob',
    children: [
                 {Name: 'BobChild1', Country: 'country3'}, 
                 {Name: 'BobChild2', Country: 'country4'}
    ]
},
{
    Name: 'Sam',
    children: [
                 {Name: 'SamChild1', Country: 'country5'}, 
                 {Name: 'SamChild2', Country: 'country6'}
    ]
},
]


function filterName(name, data) {
  return data.reduce((arr, item) => {
    if (item.Name != name) {
      if (item.children) item.children = filterName(name, item.children)
      arr.push(item)
    }
    return arr  
  }, [])
}

console.log(filterName("BobChild2", bigArray));

Erfan Bahramali · Accepted Answer · 2021-05-04 10:34:39Z

A main loop for the initial values of the array

Another loop for children values

The first parameter is the array itself that wants to be filtered, for example: bigArray

The second parameter is the value for the filter, for example: BobChild2

The third parameter is the key for the filter, for example: Name

let bigArray = [{
        Name: 'Alice',
        children: [
            { Name: 'AliceChild1', Country: 'country1' },
            { Name: 'AliceChild2', Country: 'country2' }
        ]
    },
    {
        Name: 'Bob',
        children: [
            { Name: 'BobChild1', Country: 'country3' },
            { Name: 'BobChild2', Country: 'country4' }
        ]
    },
    {
        Name: 'Sam',
        children: [
            { Name: 'SamChild1', Country: 'country5' },
            { Name: 'SamChild2', Country: 'country6' }
        ]
    },
];

function filterBigArray(array, value, filter) {
    let result = [];
    bigArray.forEach(person => {
        let childs = [];
        person.children.forEach(children => {
            if (children[filter] !== value) {
                childs.push(children);
            }
        });
        result.push(childs);
    });
    return result;
}
let res = filterArray(bigArray, 'BobChild2', 'Name');
console.log(res);

You can also filter different keys, for example:

let res = filterBigArray(bigArray, 'country3', 'Country');
console.log(res);

Collectives™ on Stack Overflow

Remove Object inside Array inside another Array Javascript

5 Answers 5

Comments

4 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related