JS - Filter Nested Array of Objects

Question

Sample JSON Data:

const data = [{
    "_id": "5cc5df25a193c21608666b00",
    "departmentName": "Software Dev",
    "managerId": "5cc5df25a193c21608666b01",
    "managerEmail": "[email protected]",
    "teams": [{
        "teamName": "SWD Team 1",
        "teamLeadId": "5cc5df25a193c21608666b02",
        "teamLeadEmail": "[email protected]",
        "teamMembers": [{
          "memberId": "5cc5df25a193c21608666b03",
          "memberEmail": "[email protected]"
        }]
      },
      {
        "teamName": "SWD Team 2",
        "teamLeadId": "5cc5df25a193c21608666b04",
        "teamLeadEmail": "[email protected]",
        "teamMembers": [{
            "memberId": "5cc5df25a193c21608666b05",
            "memberEmail": "[email protected]"
          },
          {
            "memberId": "5cc5df25a193c21608666b06",
            "memberEmail": "[email protected]"
          }
        ]
      }
    ]
  },
  {
    "_id": "5cc5df25a193c21608666b07",
    "departmentName": "Software QA",
    "managerId": "5cc5df25a193c21608666b08",
    "managerEmail": "[email protected]",
    "teams": [{
        "teamName": "QA Team 1",
        "teamLeadId": "5cc5df25a193c21608666b09",
        "teamLeadEmail": "[email protected]",
        "teamMembers": [{
          "memberId": "5cc5df25a193c21608666b10",
          "memberEmail": "[email protected]"
        }]
      },
      {
        "teamName": "QA Team 2",
        "teamLeadId": "5cc5df25a193c21608666b11",
        "teamLeadEmail": "[email protected]",
        "teamMembers": []
      },
      {
        "teamName": "QA Team 3",
        "teamLeadId": "5cc5df25a193c21608666b12",
        "teamLeadEmail": "[email protected]",
        "teamMembers": [{
            "memberId": "5cc5df25a193c21608666b13",
            "memberEmail": "[email protected]"
          },
          {
            "memberId": "5cc5df25a193c21608666b14",
            "memberEmail": "[email protected]"
          },
          {
            "memberId": "5cc5df25a193c21608666b15",
            "memberEmail": "[email protected]"
          }
        ]
      }
    ]
  },
  {
    "_id": "5cc5df25a193c21608666b16",
    "departmentName": "Software Creative",
    "managerId": "5cc5df25a193c21608666b17",
    "managerEmail": "[email protected]",
    "teams": []
  },
  {
    "_id": "5cc5df25a193c21608666b18",
    "departmentName": "Software BA",
    "managerId": "5cc5df25a193c21608666b19",
    "managerEmail": "[email protected]",
    "teams": [{
      "teamName": "BA Team 1",
      "teamLeadId": "5cc5df25a193c21608666b20",
      "teamLeadEmail": "[email protected]",
      "teamMembers": []
    }]
  }
];

jsFiddle

Desc: There're three levels. Top = Department, Middle = Team, and Bottom = Team Members. One department can have 0 or more Teams. One team can have 0 or more Team Members.

Goal: I'm trying to ONLY return the data where teamMembers array has at least one value populated.

So what should be eliminated in the output is 1) Software QA/QA Team 2- just the QA Team 2 because the other QA Teams have teamMembers 2) Software Creative - the entire object because it doesn't even have a team, let alone a teamMember, and 3) Software BA - has one team, but no teamMembers. These three objects do NOT have a single value populated inside teamMembers array.

I feel like I need to use Array.prototype.filter() but not sure how I go about it with nested objects (#JSnewbie). Also, I'm learning JS right now so some suggestions with the most current ways to accomplish this would be awesome.

Desired Output:

[
  {
    "_id": "5cc5df25a193c21608666b00",
    "departmentName": "Software Dev",
    "managerId": "5cc5df25a193c21608666b01",
    "managerEmail": "[email protected]",
    "teams": [
      {
        "teamName": "SWD Team 1",
        "teamLeadId": "5cc5df25a193c21608666b02",
        "teamLeadEmail": "[email protected]",
        "teamMembers": [
          {
            "memberId": "5cc5df25a193c21608666b03",
            "memberEmail": "[email protected]"
          }
        ]
      },
      {
        "teamName": "SWD Team 2",
        "teamLeadId": "5cc5df25a193c21608666b04",
        "teamLeadEmail": "[email protected]",
        "teamMembers": [
          {
            "memberId": "5cc5df25a193c21608666b05",
            "memberEmail": "[email protected]"
          },
          {
            "memberId": "5cc5df25a193c21608666b06",
            "memberEmail": "[email protected]"
          }
        ]
      }
    ]
  },
  {
    "_id": "5cc5df25a193c21608666b07",
    "departmentName": "Software QA",
    "managerId": "5cc5df25a193c21608666b08",
    "managerEmail": "[email protected]",
    "teams": [
      {
        "teamName": "QA Team 1",
        "teamLeadId": "5cc5df25a193c21608666b09",
        "teamLeadEmail": "[email protected]",
        "teamMembers": [
          {
            "memberId": "5cc5df25a193c21608666b10",
            "memberEmail": "[email protected]"
          }
        ]
      },
      {
        "teamName": "QA Team 3",
        "teamLeadId": "5cc5df25a193c21608666b12",
        "teamLeadEmail": "[email protected]",
        "teamMembers": [
          {
            "memberId": "5cc5df25a193c21608666b13",
            "memberEmail": "[email protected]"
          },
          {
            "memberId": "5cc5df25a193c21608666b14",
            "memberEmail": "[email protected]"
          },
          {
            "memberId": "5cc5df25a193c21608666b15",
            "memberEmail": "[email protected]"
          }
        ]
      }
    ]
  }
]

What you need is in fact Array.prototype.reduce()

PopGoesTheWza
– PopGoesTheWza

2019-04-28 19:27:38 +00:00
Commented Apr 28, 2019 at 19:27 — PopGoesTheWza
– PopGoesTheWza, Commented Apr 28, 2019 at 19:27

Nina Scholz · Accepted Answer · 2019-04-29 05:26:49Z

You could reduce the array and use a recursive approach which checks and returns an array for the nested properties.

Thge function filter takes a data array and an array of the keys of the nested properties. It returns an array with items, if the array of the wanted key has some items.

If some more keys are available, the actual property with an array is handed over and checked. If the result is not an empty array, a copy of the actual object is taken as well as the result of filtering and this object is pushed to the result set.

If no more keys are available, the unchanged object is taken for the result set.

function filter(array, [key, ...keys]) {
    return array.reduce((r, o) => {
        if (o[key] && o[key].length) {
            if (keys.length) {
                var temp = filter(o[key], keys);
                if (temp.length) r.push(Object.assign({}, o, { [key]: temp }));
            } else {
                r.push(o);
            }
        }
        return r;
    }, []);
}

var data = [{ _id: "5cc5df25a193c21608666b00", departmentName: "Software Dev", managerId: "5cc5df25a193c21608666b01", managerEmail: "[email protected]", teams: [{ teamName: "SWD Team 1", teamLeadId: "5cc5df25a193c21608666b02", teamLeadEmail: "[email protected]", teamMembers: [{ memberId: "5cc5df25a193c21608666b03", memberEmail: "[email protected]" }] }, { teamName: "SWD Team 2", teamLeadId: "5cc5df25a193c21608666b04", teamLeadEmail: "[email protected]", teamMembers: [{ memberId: "5cc5df25a193c21608666b05", memberEmail: "[email protected]" }, { memberId: "5cc5df25a193c21608666b06", memberEmail: "[email protected]" }] }] }, { _id: "5cc5df25a193c21608666b07", departmentName: "Software QA", managerId: "5cc5df25a193c21608666b08", managerEmail: "[email protected]", teams: [{ teamName: "QA Team 1", teamLeadId: "5cc5df25a193c21608666b09", teamLeadEmail: "[email protected]", teamMembers: [{ memberId: "5cc5df25a193c21608666b10", memberEmail: "[email protected]" }] }, { teamName: "QA Team 2", teamLeadId: "5cc5df25a193c21608666b11", teamLeadEmail: "[email protected]", teamMembers: [] }, { teamName: "QA Team 3", teamLeadId: "5cc5df25a193c21608666b12", teamLeadEmail: "[email protected]", teamMembers: [{ memberId: "5cc5df25a193c21608666b13", memberEmail: "[email protected]" }, { memberId: "5cc5df25a193c21608666b14", memberEmail: "[email protected]" }, { memberId: "5cc5df25a193c21608666b15", memberEmail: "[email protected]" }] }] }, { _id: "5cc5df25a193c21608666b16", departmentName: "Software Creative", managerId: "5cc5df25a193c21608666b17", managerEmail: "[email protected]", teams: [] }, { _id: "5cc5df25a193c21608666b18", departmentName: "Software BA", managerId: "5cc5df25a193c21608666b19", managerEmail: "[email protected]", teams: [{ teamName: "BA Team 1", teamLeadId: "5cc5df25a193c21608666b20", teamLeadEmail: "[email protected]", teamMembers: [] }] }],
    result = filter(data, ['teams', 'teamMembers']);

console.log(result);

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

Thank you for the most dynamic solution. Can you tell me a little bit more about what the fx is doing? kind of confusing to follow at the moment.

J. Nicastro · Accepted Answer · 2019-04-28 20:09:01Z

You can filter the ones with no teams and then map them to a new array filtering the empty teams.

First you have to filter the ones that doesn't have any team with any team members at all. But you will be left with teams with no team members. So then you have to use .map to only add the teams with team members.

const filterEmptyTeams = (data) => data.filter((department) => {
  const teams = department.teams.filter((team) => team.teamMembers.length > 0)
  return teams.length !== 0
}).map((department) => {
 const teams = department.teams.filter((team) =>      team.teamMembers.length > 0)
  return {...department, teams}
})

const data = [{
    "_id": "5cc5df25a193c21608666b00",
    "departmentName": "Software Dev",
    "managerId": "5cc5df25a193c21608666b01",
    "managerEmail": "[email protected]",
    "teams": [{
        "teamName": "SWD Team 1",
        "teamLeadId": "5cc5df25a193c21608666b02",
        "teamLeadEmail": "[email protected]",
        "teamMembers": [{
          "memberId": "5cc5df25a193c21608666b03",
          "memberEmail": "[email protected]"
        }]
      },
      {
        "teamName": "SWD Team 2",
        "teamLeadId": "5cc5df25a193c21608666b04",
        "teamLeadEmail": "[email protected]",
        "teamMembers": [{
            "memberId": "5cc5df25a193c21608666b05",
            "memberEmail": "[email protected]"
          },
          {
            "memberId": "5cc5df25a193c21608666b06",
            "memberEmail": "[email protected]"
          }
        ]
      }
    ]
  },
  {
    "_id": "5cc5df25a193c21608666b07",
    "departmentName": "Software QA",
    "managerId": "5cc5df25a193c21608666b08",
    "managerEmail": "[email protected]",
    "teams": [{
        "teamName": "QA Team 1",
        "teamLeadId": "5cc5df25a193c21608666b09",
        "teamLeadEmail": "[email protected]",
        "teamMembers": [{
          "memberId": "5cc5df25a193c21608666b10",
          "memberEmail": "[email protected]"
        }]
      },
      {
        "teamName": "QA Team 2",
        "teamLeadId": "5cc5df25a193c21608666b11",
        "teamLeadEmail": "[email protected]",
        "teamMembers": []
      },
      {
        "teamName": "QA Team 3",
        "teamLeadId": "5cc5df25a193c21608666b12",
        "teamLeadEmail": "[email protected]",
        "teamMembers": [{
            "memberId": "5cc5df25a193c21608666b13",
            "memberEmail": "[email protected]"
          },
          {
            "memberId": "5cc5df25a193c21608666b14",
            "memberEmail": "[email protected]"
          },
          {
            "memberId": "5cc5df25a193c21608666b15",
            "memberEmail": "[email protected]"
          }
        ]
      }
    ]
  },
  {
    "_id": "5cc5df25a193c21608666b16",
    "departmentName": "Software Creative",
    "managerId": "5cc5df25a193c21608666b17",
    "managerEmail": "[email protected]",
    "teams": []
  },
  {
    "_id": "5cc5df25a193c21608666b18",
    "departmentName": "Software BA",
    "managerId": "5cc5df25a193c21608666b19",
    "managerEmail": "[email protected]",
    "teams": [{
      "teamName": "BA Team 1",
      "teamLeadId": "5cc5df25a193c21608666b20",
      "teamLeadEmail": "[email protected]",
      "teamMembers": []
    }]
  }
];

console.log(filterEmptyTeams(data))

Thank you for the suggestion and explanation on what the code is doing.

PopGoesTheWza · Accepted Answer · 2019-04-28 20:46:56Z

1

Here is a version with two nested .reduce()

const result = data.reduce(
  (acc, e) => {
    if (e.teams && e.teams.length > 0) {
      const teams = e.teams.reduce(
        (acc, e) => {
          if (e.teamMembers && e.teamMembers.length > 0) {
            acc.push({...e});
          }
          return acc;
        },
        [],
      );
      if (teams.length > 0) {
        acc.push({...e, teams});
      }
    }
    return acc
  },
  [],
);

answered Apr 28, 2019 at 20:46

PopGoesTheWza

6186 silver badges14 bronze badges

1 Comment

007 Over a year ago

Thank you for providing another option. Cheers!

Collectives™ on Stack Overflow

JS - Filter Nested Array of Objects

3 Answers 3

1 Comment

2 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

1 Comment

Related