JS: Remove object from nested array and return parent array

Question

How do I remove the object in my array subBrands that is nested inside another array where the id property of an object is = to 31. I'm trying to get the whole parent array back without that subBrand removed.

Array is:

[
  {
    "id": 10,
    "name": "Parent Brand 1",
    "parent": null,
    "author": 1,
    "deleted_at": null,
    "created_at": "2017-02-02 09:55:51",
    "updated_at": "2017-02-02 09:55:51",
    "subBrands": [
      {
        "id": 31,
        "name": "Sub Brand 6",
        "parent": 10,
        "author": 1,
        "deleted_at": null,
        "created_at": "2017-02-02 11:24:49",
        "updated_at": "2017-02-02 11:42:02"
      },
      {
        "id": 32,
        "name": "Sub Brand 7",
        "parent": 10,
        "author": 1,
        "deleted_at": null,
        "created_at": "2017-02-02 11:24:57",
        "updated_at": "2017-02-02 11:42:18"
      },
      {
        "id": 33,
        "name": "Sub Brand 8",
        "parent": 10,
        "author": 1,
        "deleted_at": null,
        "created_at": "2017-02-02 11:25:04",
        "updated_at": "2017-02-02 11:42:34"
      },
      {
        "id": 34,
        "name": "Sub Brand 9",
        "parent": 10,
        "author": 1,
        "deleted_at": null,
        "created_at": "2017-02-02 11:25:39",
        "updated_at": "2017-02-02 11:42:43"
      },
      {
        "id": 35,
        "name": "Sub Brand 10",
        "parent": 10,
        "author": 1,
        "deleted_at": null,
        "created_at": "2017-02-02 11:25:46",
        "updated_at": "2017-02-02 11:42:52"
      },
      {
        "id": 36,
        "name": "Sub Brand 4",
        "parent": 10,
        "author": 1,
        "deleted_at": null,
        "created_at": "2017-02-02 11:43:53",
        "updated_at": "2017-02-02 11:43:53"
      }
    ]
  },
  {
    "id": 12,
    "name": "Parent Brand 2",
    "parent": null,
    "author": 1,
    "deleted_at": null,
    "created_at": "2017-02-02 09:56:16",
    "updated_at": "2017-02-02 09:56:16",
    "subBrands": []
  },
  {
    "id": 16,
    "name": "Brand no children",
    "parent": null,
    "author": 1,
    "deleted_at": null,
    "created_at": "2017-02-02 10:37:40",
    "updated_at": "2017-02-02 10:37:40",
    "subBrands": []
  },
  {
    "id": 37,
    "name": "Whoops brand",
    "parent": null,
    "author": 1,
    "deleted_at": null,
    "created_at": "2017-02-02 11:44:10",
    "updated_at": "2017-02-02 11:44:10",
    "subBrands": []
  }
]

What I'm trying to get is:

[
  {
    "id": 10,
    "name": "Parent Brand 1",
    "parent": null,
    "author": 1,
    "deleted_at": null,
    "created_at": "2017-02-02 09:55:51",
    "updated_at": "2017-02-02 09:55:51",
    "subBrands": [
      {
        "id": 32,
        "name": "Sub Brand 7",
        "parent": 10,
        "author": 1,
        "deleted_at": null,
        "created_at": "2017-02-02 11:24:57",
        "updated_at": "2017-02-02 11:42:18"
      },
      {
        "id": 33,
        "name": "Sub Brand 8",
        "parent": 10,
        "author": 1,
        "deleted_at": null,
        "created_at": "2017-02-02 11:25:04",
        "updated_at": "2017-02-02 11:42:34"
      },
      {
        "id": 34,
        "name": "Sub Brand 9",
        "parent": 10,
        "author": 1,
        "deleted_at": null,
        "created_at": "2017-02-02 11:25:39",
        "updated_at": "2017-02-02 11:42:43"
      },
      {
        "id": 35,
        "name": "Sub Brand 10",
        "parent": 10,
        "author": 1,
        "deleted_at": null,
        "created_at": "2017-02-02 11:25:46",
        "updated_at": "2017-02-02 11:42:52"
      },
      {
        "id": 36,
        "name": "Sub Brand 4",
        "parent": 10,
        "author": 1,
        "deleted_at": null,
        "created_at": "2017-02-02 11:43:53",
        "updated_at": "2017-02-02 11:43:53"
      }
    ]
  },
  {
    "id": 12,
    "name": "Parent Brand 2",
    "parent": null,
    "author": 1,
    "deleted_at": null,
    "created_at": "2017-02-02 09:56:16",
    "updated_at": "2017-02-02 09:56:16",
    "subBrands": []
  },
  {
    "id": 16,
    "name": "Brand no children",
    "parent": null,
    "author": 1,
    "deleted_at": null,
    "created_at": "2017-02-02 10:37:40",
    "updated_at": "2017-02-02 10:37:40",
    "subBrands": []
  },
  {
    "id": 37,
    "name": "Whoops brand",
    "parent": null,
    "author": 1,
    "deleted_at": null,
    "created_at": "2017-02-02 11:44:10",
    "updated_at": "2017-02-02 11:44:10",
    "subBrands": []
  }
]

I'm open to using underscores. The closest I'm come is:

    var brands = _.filter(brands, function(n) { 
        return _.some(n.subBrands, function(subBrand){ 
            return subBrand.id != brand.id;
        });
    });

But that removes the arrays that don't contain a subBrand with an id of 31. So it's not very close to what I need.

Cheers!

@NinaScholz For the moment I just need it for a second level. Hopefully won't need it for any more. — BarryWalsh
– BarryWalsh, Commented Feb 2, 2017 at 14:46
"I'm trying to get the whole parent array back without that subBrand removed." Do you mean with the object removed? — guest271314
– guest271314, Commented Feb 2, 2017 at 14:46
@guest271314 Nope the whole thing back without the subbrand with an ID of 31. The second array is an example of what I'm trying to get back. — BarryWalsh
– BarryWalsh, Commented Feb 2, 2017 at 14:48
@BarryWalsh Yes, are you trying to remove object with id 31 from subBrands array? — guest271314
– guest271314, Commented Feb 2, 2017 at 14:50

ibrahim mahrir · Accepted Answer · 2017-02-02 14:54:40Z

19

var arr = [{"id":10,"name":"Parent Brand 1","parent":null,"author":1,"deleted_at":null,"created_at":"2017-02-02 09:55:51","updated_at":"2017-02-02 09:55:51","subBrands":[{"id":31,"name":"Sub Brand 6","parent":10,"author":1,"deleted_at":null,"created_at":"2017-02-02 11:24:49","updated_at":"2017-02-02 11:42:02"},{"id":32,"name":"Sub Brand 7","parent":10,"author":1,"deleted_at":null,"created_at":"2017-02-02 11:24:57","updated_at":"2017-02-02 11:42:18"},{"id":33,"name":"Sub Brand 8","parent":10,"author":1,"deleted_at":null,"created_at":"2017-02-02 11:25:04","updated_at":"2017-02-02 11:42:34"},{"id":34,"name":"Sub Brand 9","parent":10,"author":1,"deleted_at":null,"created_at":"2017-02-02 11:25:39","updated_at":"2017-02-02 11:42:43"},{"id":35,"name":"Sub Brand 10","parent":10,"author":1,"deleted_at":null,"created_at":"2017-02-02 11:25:46","updated_at":"2017-02-02 11:42:52"},{"id":36,"name":"Sub Brand 4","parent":10,"author":1,"deleted_at":null,"created_at":"2017-02-02 11:43:53","updated_at":"2017-02-02 11:43:53"}]},{"id":12,"name":"Parent Brand 2","parent":null,"author":1,"deleted_at":null,"created_at":"2017-02-02 09:56:16","updated_at":"2017-02-02 09:56:16","subBrands":[]},{"id":16,"name":"Brand no children","parent":null,"author":1,"deleted_at":null,"created_at":"2017-02-02 10:37:40","updated_at":"2017-02-02 10:37:40","subBrands":[]},{"id":37,"name":"Whoops brand","parent":null,"author":1,"deleted_at":null,"created_at":"2017-02-02 11:44:10","updated_at":"2017-02-02 11:44:10","subBrands":[]}];


var id = prompt("Id of subbrands to remove: ");

arr.forEach(function(o) {
  o.subBrands = o.subBrands.filter(s => s.id != id);
});

console.log(arr);

answered Feb 2, 2017 at 14:54

ibrahim mahrir

31.8k5 gold badges50 silver badges78 bronze badges

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

8 Comments

Nina Scholz Over a year ago

you create all new reference by filtering an array. this looks a bit over the top for this purpose, even if there is not an object with the wanted id, you yield a new array.

guest271314 Over a year ago

Why should a new array be created at each iteration at .forEach(), where requirement is to remove an object from existing array?

ibrahim mahrir Over a year ago

@NinaScholz @guest271314 If you consider that the only other approach is to call forEach and splice on each found element, this will be the best.

guest271314 Over a year ago

@ibrahimmahrir "If you consider that the only other approach is to call forEach and splice on each found element, this will be the best." That is not the only other possible approach. That is the pattern that you have selected to use. What do you mean by "best"? Creating a new array is not necessary to achieve expected result of removing an object from an existing array.

Nina Scholz Over a year ago

@BarryWalsh, i don't know, if i am the right person, my proposal is below, but anyway do you need one original array and another without the specific id? or just one?

|

Nina Scholz · Accepted Answer · 2017-02-02 14:50:28Z

4

You could iterate the parent part, and the children and if found splice the object.

var data = [{ id: 10, name: "Parent Brand 1", parent: null, author: 1, deleted_at: null, created_at: "2017-02-02 09:55:51", updated_at: "2017-02-02 09:55:51", subBrands: [{ id: 31, name: "Sub Brand 6", parent: 10, author: 1, deleted_at: null, created_at: "2017-02-02 11:24:49", updated_at: "2017-02-02 11:42:02" }, { id: 32, name: "Sub Brand 7", parent: 10, author: 1, deleted_at: null, created_at: "2017-02-02 11:24:57", updated_at: "2017-02-02 11:42:18" }, { id: 33, name: "Sub Brand 8", parent: 10, author: 1, deleted_at: null, created_at: "2017-02-02 11:25:04", updated_at: "2017-02-02 11:42:34" }, { id: 34, name: "Sub Brand 9", parent: 10, author: 1, deleted_at: null, created_at: "2017-02-02 11:25:39", updated_at: "2017-02-02 11:42:43" }, { id: 35, name: "Sub Brand 10", parent: 10, author: 1, deleted_at: null, created_at: "2017-02-02 11:25:46", updated_at: "2017-02-02 11:42:52" }, { id: 36, name: "Sub Brand 4", parent: 10, author: 1, deleted_at: null, created_at: "2017-02-02 11:43:53", updated_at: "2017-02-02 11:43:53" }] }, { id: 12, name: "Parent Brand 2", parent: null, author: 1, deleted_at: null, created_at: "2017-02-02 09:56:16", updated_at: "2017-02-02 09:56:16", subBrands: [] }, { id: 16, name: "Brand no children", parent: null, author: 1, deleted_at: null, created_at: "2017-02-02 10:37:40", updated_at: "2017-02-02 10:37:40", subBrands: [] }, { id: 37, name: "Whoops brand", parent: null, author: 1, deleted_at: null, created_at: "2017-02-02 11:44:10", updated_at: "2017-02-02 11:44:10", subBrands: [] }];

data.some(function (a) {
    return a.subBrands.some(function (b, i, bb) {
        if (b.id === 31) {
            bb.splice(i, 1);
            return true;
        }
    });
});

console.log(data);

.as-console-wrapper { max-height: 100% !important; top: 0; }

answered Feb 2, 2017 at 14:50

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

5 Comments

ibrahim mahrir Over a year ago

This will remove the match subBrands of only the first found object that contained them. Consider arr = [{sb: [id:31]}, {sb: [id:31]}, {sb: [id:31]}] will remove only the first object found by some.

Nina Scholz Over a year ago

@ibrahimmahrir, i am assuming all id are unique. no need to filter all sub array. this generates new references, which are not necessary. save the environment.

ibrahim mahrir Over a year ago

I'm not talking about the subBrands array itself (those ID should be unique). I'm talking about different objects that contain a subBrand array.

ibrahim mahrir Over a year ago

Plus this is not a typlical use of some. It should be used just to check if an item match some criteria or not (as lookahead for other stuff).

guest271314 Over a year ago

@ibrahimmahrir "Plus this is not a typlical use of some. It should be used just to check if an item match some criteria or not (as lookahead for other stuff)." ? What do you mean by "should be used"? There are no restrictions on use of Array.prototype methods for different tasks.

brad · Accepted Answer · 2019-02-25 12:18:29Z

4

I nest two forEach loops and return when the item has been found and removed:

let items = [{id: 1, subItems: [{id: 1}, {id: 2}]}];

const subItemToBeRemovedId = 1;

items.forEach((item) => item.subItems.forEach((subItem, index) => {
    if (subItem.id === subItemToBeRemovedId) {
        return item.subItems.splice(index, 1);
    }
}));

console.log(items);

edited Feb 25, 2019 at 12:18

answered Feb 25, 2019 at 11:53

brad

1,44520 silver badges33 bronze badges

Comments

Z-Bone · Accepted Answer · 2017-02-02 14:57:39Z

foreach seems to work:

var brands=[{id:10,name:"Parent Brand 1",parent:null,author:1,deleted_at:null,created_at:"2017-02-02 09:55:51",updated_at:"2017-02-02 09:55:51",subBrands:[{id:31,name:"Sub Brand 6",parent:10,author:1,deleted_at:null,created_at:"2017-02-02 11:24:49",updated_at:"2017-02-02 11:42:02"},{id:32,name:"Sub Brand 7",parent:10,author:1,deleted_at:null,created_at:"2017-02-02 11:24:57",updated_at:"2017-02-02 11:42:18"},{id:33,name:"Sub Brand 8",parent:10,author:1,deleted_at:null,created_at:"2017-02-02 11:25:04",updated_at:"2017-02-02 11:42:34"},{id:34,name:"Sub Brand 9",parent:10,author:1,deleted_at:null,created_at:"2017-02-02 11:25:39",updated_at:"2017-02-02 11:42:43"},{id:35,name:"Sub Brand 10",parent:10,author:1,deleted_at:null,created_at:"2017-02-02 11:25:46",updated_at:"2017-02-02 11:42:52"},{id:36,name:"Sub Brand 4",parent:10,author:1,deleted_at:null,created_at:"2017-02-02 11:43:53",updated_at:"2017-02-02 11:43:53"}]},{id:12,name:"Parent Brand 2",parent:null,author:1,deleted_at:null,created_at:"2017-02-02 09:56:16",updated_at:"2017-02-02 09:56:16",subBrands:[]},{id:16,name:"Brand no children",parent:null,author:1,deleted_at:null,created_at:"2017-02-02 10:37:40",updated_at:"2017-02-02 10:37:40",subBrands:[]},{id:37,name:"Whoops brand",parent:null,author:1,deleted_at:null,created_at:"2017-02-02 11:44:10",updated_at:"2017-02-02 11:44:10",subBrands:[]}];

brands.forEach(function(brand) {
    brand.subBrands = brand.subBrands.filter(function(subBrand){
      return subBrand.id != 31;
  })  
});

console.log(brands);

David Ballester · Accepted Answer · 2017-02-02 14:50:27Z

0

If you just need to look into the "subBrands" property of each item of your array, and you are using underscore, this works:

var myBrand = _.each(brands, function(brand) {
  brand.subBrands = _.filter(brand.subBrands, function(subBrand) {
    return subBrand.id != 31;
  });
});

answered Feb 2, 2017 at 14:50

David Ballester

5773 silver badges17 bronze badges

Comments

Tim S. · Accepted Answer · 2017-02-02 14:57:56Z

0

The jQuery way

function removeById(data, id){

   $(data).each(function(i, e){

      if(e.subBrands.length > 0){

         $(e.subBrands).each(function(_i, _e){

            if(_e.id == id){

              e.subBrands.splice(_i,1);
              return false;

            }

        });

     }

   });

  return data;

}

console.log(removeById(data,32))

this function will return your whole data array without the specifiec id object

answered Feb 2, 2017 at 14:57

Tim S.

3891 silver badge5 bronze badges

Comments

guest271314 · Accepted Answer · 2017-02-02 15:04:32Z

0

You can use for..of loop to iterate each subBrands array, Array.prototype.splice() to remove object having id 31 from array.

for (let {subBrands} of data) {
  let n = 0;
  for (let {id} of subBrands) {
    if (id === 31) {
      subBrands.splice(n, 1);
      break;
    }
    ++n;
  }
}

answered Feb 2, 2017 at 15:04

guest271314

1

Collectives™ on Stack Overflow

JS: Remove object from nested array and return parent array

7 Answers 7

8 Comments

5 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

8 Comments

5 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related