How can I filter this data and return an array matching the condition in JavaScript?

This is the data I am working with below.

const data = [
  {
    name: "Frank Blanchard",
    gender: "male",
    friends: [
      {
        name: "Corina Irwin",
        gender: "female",
        sub_friends: [
          {
            name: "Alyssa Shelton",
            eyeColor: "brown",
            gender: "female",
          },
          {
            name: "Patrice Morton",
            eyeColor: "blue",
            gender: "female",
          },
          {
            name: "Hazel Berry",
            eyeColor: "blue",
            gender: "female",
          },
          {
            name: "Tricia Wells",
            eyeColor: "blue",
            gender: "female",
          },
          {
            name: "Mendoza Patton",
            eyeColor: "blue",
            gender: "male",
          },
        ],
      },
      {
        name: "Jayne Boyd",
        gender: "female",
        sub_friends: [
          {
            name: "Jacobs Potter",
            eyeColor: "blue",
            gender: "male",
          },
        ],
      },
      {
        name: "Justine Fox",
        gender: "female",
        sub_friends: [
          {
            name: "Madeline Harrell",
            eyeColor: "brown",
            gender: "female",
          },
          {
            name: "Simpson Pratt",
            eyeColor: "blue",
            gender: "male",
          },
          {
            name: "Rachel Mooney",
            eyeColor: "blue",
            gender: "female",
          },
        ],
      },
    ],
  },
  {
    name: "Ingrid Blackwell",
    gender: "female",
    friends: [
      {
        name: "Melody Carroll",
        gender: "female",
        sub_friends: [
          {
            name: "Sonja Gillespie",
            eyeColor: "blue",
            gender: "female",
          },
        ],
      },
      {
        name: "Herring Kaufman",
        gender: "male",
        sub_friends: [
          {
            name: "Kathy Pennington",
            eyeColor: "blue",
            gender: "female",
          },
          {
            name: "Marisa Mckee",
            eyeColor: "blue",
            gender: "female",
          },
          {
            name: "Gillespie Dyer",
            eyeColor: "brown",
            gender: "male",
          },
          {
            name: "Aida Cantrell",
            eyeColor: "blue",
            gender: "female",
          },
          {
            name: "Lucy Mcconnell",
            eyeColor: "brown",
            gender: "female",
          },
        ],
      },
    ],
  },
  {
    name: "Isabelle Moon",
    gender: "female",
    friends: [
      {
        name: "Elnora Stone",
        gender: "female",
        sub_friends: [
          {
            name: "Collins Alford",
            eyeColor: "brown",
            gender: "male",
          },
        ],
      },
    ],
  },
];

I want to go through to sub_friends and return all that match gender === male. My initial test was filtering to the sub_friends, which I then returned. But I am getting an empty array.

var filtered = data.filter(({ friends }) => {
    friends.filter(({ sub_friends }) => {
      return sub_friends.filter((element) => element.gender === "male");
    });
  });

console.log("LOG: ", filtered);

I also tried using map

var filtered = data.map(({ friends }) => {
    friends.map(({ sub_friends }) => {
      return sub_friends.filter((element) => element.gender === "male");
    });
  });

console.log("LOG: ", filtered);

I get

Array(3) [ undefined, undefined, undefined ]

The output I want is an array, that I can map, to display the names in sub_friends.

>Solution :

You can use flatMap and filter together to achieve your goal.

flatMap is to group all specific items into a new array.

From your data, you have a list of friends and then find all sub_friends to put them under the same array. The last part is filtering all info.gender === "male" from sub_friends.

//minified your data (not important)
const data=[{name:"Frank Blanchard",gender:"male",friends:[{name:"Corina Irwin",gender:"female",sub_friends:[{name:"Alyssa Shelton",eyeColor:"brown",gender:"female"},{name:"Patrice Morton",eyeColor:"blue",gender:"female"},{name:"Hazel Berry",eyeColor:"blue",gender:"female"},{name:"Tricia Wells",eyeColor:"blue",gender:"female"},{name:"Mendoza Patton",eyeColor:"blue",gender:"male"}]},{name:"Jayne Boyd",gender:"female",sub_friends:[{name:"Jacobs Potter",eyeColor:"blue",gender:"male"}]},{name:"Justine Fox",gender:"female",sub_friends:[{name:"Madeline Harrell",eyeColor:"brown",gender:"female"},{name:"Simpson Pratt",eyeColor:"blue",gender:"male"},{name:"Rachel Mooney",eyeColor:"blue",gender:"female"}]}]},{name:"Ingrid Blackwell",gender:"female",friends:[{name:"Melody Carroll",gender:"female",sub_friends:[{name:"Sonja Gillespie",eyeColor:"blue",gender:"female"}]},{name:"Herring Kaufman",gender:"male",sub_friends:[{name:"Kathy Pennington",eyeColor:"blue",gender:"female"},{name:"Marisa Mckee",eyeColor:"blue",gender:"female"},{name:"Gillespie Dyer",eyeColor:"brown",gender:"male"},{name:"Aida Cantrell",eyeColor:"blue",gender:"female"},{name:"Lucy Mcconnell",eyeColor:"brown",gender:"female"}]}]},{name:"Isabelle Moon",gender:"female",friends:[{name:"Elnora Stone",gender:"female",sub_friends:[{name:"Collins Alford",eyeColor:"brown",gender:"male"}]}]}];

//the main logic
const results = data.flatMap(info => info.friends).flatMap(info => info.sub_friends).filter(info => info.gender === "male")

console.log(results)