Filter multidimensional array that contains a certain value

Question

I have an array...

var families = [
  {
    family:"Jones",
    kids: [
      {name:"Kelly", gender:'female'},
      {name:"Mike", gender:'male'},
      {name:"Bill", gender:'male'}
    ]
  },{
    family:"Smiths",
    kids: [
      {name:"Roger", gender:'male'}
    ]
  }
]

...that I need filter through and sort out familys by gender. So if I search for 'female' I want an array of families that contain females in their family. Regardless if there is a male in the family. So in the above code, if I search for female, only one family would return. But if I searched by male, 2 families would return.

My try looks like this:

var filter = 'female';
filteredList = families.filter(function (family) {
  return family.kids.filter(function (kid) {
    return kid.gender.toLowerCase().indexOf(filter) !== -1;
  })
})

Am I not returning it properly?

Answer 1

You should just use filter and some like so:

var families=[{family:"Jones",kids:[{name:"Kelly",gender:'female'},{name:"Mike",gender:'male'},{name:"Bill",gender:'male'}]},{family:"Smiths",kids:[{name:"Roger",gender:'male'}]}];
var filter = "female";
const res = families.filter(({ kids }) => kids.some(({ gender }) => gender == filter));
console.log(res);

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

ES5 syntax:

var families=[{family:"Jones",kids:[{name:"Kelly",gender:'female'},{name:"Mike",gender:'male'},{name:"Bill",gender:'male'}]},{family:"Smiths",kids:[{name:"Roger",gender:'male'}]}];
var filter = "female";
var res = families.filter(function(family) {
  return family.kids.some(function(kid) {
    return kid.gender == filter;
  })
});
console.log(res);

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