How to filter an Array of Objects inside another Array of Objects in JavaScript (es6)?

Question

I need to filter dogs and also the sitters inside this Array based on another Array sittersSelected. (It's ok to use es6). The problem for me is handling the nested array.

Not sure if it's possible but...

Data

dogs = [
  {
    name: 'Alice',
    sex: 'Female',
    breed: 'German Shepherd',
    sitters: [
      {
        id: '123',
        name: 'Abby'
      },
      {
        id: '456',
        name: 'Manny'
      },
      {
        id: '789',
        name: 'Mel'
      },
    ]
  },
  {
    name: 'Buckley',
    sex: 'Male',
    breed: 'Border Collie',
    sitters: [
      {
        id: '321',
        name: 'Gustavo'
      },
      {
        id: '654',
        name: 'Tommy'
      },
    ]
  },
  {
    name: 'Bear',
    sex: 'Male',
    breed: 'Mixed',
    sitters: [
      {
        id: '123',
        name: 'Abby'
      },
      {
        id: '135',
        name: 'Owen'
      },
    ]
  },
];

sittersSelected = ["Abby","Manny"];

Expected Output

filterResult = [
  {
    name: 'Alice',
    sex: 'Female',
    breed: 'German Shepherd',
    sitters: [
      {
        id: '123',
        name: 'Abby'
      },
      {
        id: '456',
        name: 'Manny'
      },
    ]
  },
  {
    name: 'Bear',
    sex: 'Male',
    breed: 'Mixed',
    sitters: [
      {
        id: '123',
        name: 'Abby'
      },
    ]
  },
];

I've tried

filterResult = dogs.filter(dog => dog.sitters.some(sitter => sittersSelected.includes(sitter.name)));

I managed to filter the dogs but not the sitters. Also tried other examples here on StackOverflow. Is there a way to do it? maybe with .map() ?

Thank you

How big can these two lists potentially be at their largest size? — Tobiah Rex, Feb 04 '21 at 01:49
@TobiahRex It is quite big, the data has more options... I just used `dogs` as an example. — John, Feb 04 '21 at 04:33

score 1 · Answer 1 · answered Feb 04 '21 at 01:31

1-use map to return new object contain only filtered sitters

2-use filter to return only dog have sitters

let dogs = [{ name: 'Alice', sex: 'Female', breed: 'German Shepherd', sitters: [{ id: '123', name: 'Abby' }, { id: '456', name: 'Manny' }, { id: '789', name: 'Mel' },] }, { name: 'Buckley', sex: 'Male', breed: 'Border Collie', sitters: [{ id: '321', name: 'Gustavo' }, { id: '654', name: 'Tommy' },] }, { name: 'Bear', sex: 'Male', breed: 'Mixed', sitters: [{ id: '123', name: 'Abby' }, { id: '135', name: 'Owen' },] },];

let sittersSelected = ["Abby", "Manny"];

dogs.map(dog => {
    return {
        ...dog,
        sitters: dog.sitters.filter(sitter => sittersSelected.includes(sitter.name))
    }
}).filter(dog => dog.sitters.length > 0);

It worked, thank you so much @ProSheta – John Feb 04 '21 at 04:37 — John, Feb 04 '21 at 04:37

score 0 · Answer 2 · edited Feb 04 '21 at 01:47

You'll need 2 steps.

First filter each sitters sub-array to include only the ones selected.
Filter out the parent array items by whether the sitters array contains any elements:

const dogs=[{name:"Alice",sex:"Female",breed:"German Shepherd",sitters:[{id:"123",name:"Abby"},{id:"456",name:"Manny"},{id:"789",name:"Mel"}]},{name:"Buckley",sex:"Male",breed:"Border Collie",sitters:[{id:"321",name:"Gustavo"},{id:"654",name:"Tommy"}]},{name:"Bear",sex:"Male",breed:"Mixed",sitters:[{id:"123",name:"Abby"},{id:"135",name:"Owen"}]}];

const sittersSelected = ["Abby","Manny"];

for (const dog of dogs) {
  dog.sitters = dog.sitters.filter(s => sittersSelected.includes(s.name));
}
const filteredDogs = dogs.filter(
  dog => dog.sitters.length
);
console.log(filteredDogs);

If you don't want to mutate the input array of objects, you can map it first to clone each dog.

Thanks @CertainPerformance it worked well. But as you suggest, I'm using `map()` to avoid mutating the array. — John, Feb 04 '21 at 04:35

How to filter an Array of Objects inside another Array of Objects in JavaScript (es6)?

Data

Expected Output

I've tried

2 Answers2