How to filter an array of objects in react based on a specific dynamic property?

Question

I am calling an API and getting the data as such.

0: {team: {…}, league: {…}, games: {…}, substitutes: {…}, shots: {…}, …}
1: {team: {…}, league: {…}, games: {…}, substitutes: {…}, shots: {…}, …}
2: {team: {…}, league: {…}, games: {…}, substitutes: {…}, shots: {…}, …}
3: {team: {…}, league: {…}, games: {…}, substitutes: {…}, shots: {…}, …}
4: {team: {…}, league: {…}, games: {…}, substitutes: {…}, shots: {…}, …}

Now what I want to do is map through this array of objects and filter it with the same teams all in one array of objects while the other teams in another and as such.

0:
cards: {yellow: 2, yellowred: 0, red: 0}
dribbles: {attempts: 9, success: 5, past: null}
duels: {total: 113, won: 58}
fouls: {drawn: 9, committed: 16}
games: {appearences: 23, lineups: 11, minutes: 1007, number: null, position: 'Attacker', …}
goals: {total: 8, conceded: 0, assists: 3, saves: null}
league: {id: 135, name: 'Serie A', country: 'Italy', logo: 'https://media.api-sports.io/football/leagues/135.png', flag: 'https://media.api-sports.io/flags/it.svg', …}
passes: {total: 414, key: 23, accuracy: 13}
penalty: {won: null, commited: null, scored: 0, missed: 1, saved: null}
shots: {total: 42, on: 20}
substitutes: {in: 12, out: 4, bench: 14}
tackles: {total: null, blocks: 1, interceptions: 3}
team: {id: 489, name: 'AC Milan', logo: 'https://media.api-sports.io/football/teams/489.png'}
[[Prototype]]: Object

Each team will have a different Id. And since I don't know the ids of the team before hand, I don't know how to filter it otherwise. Everything is dynamic, even the ids.

sounds like a simple 'group by' [How can I group an array of objects by key?](https://stackoverflow.com/questions/40774697/how-can-i-group-an-array-of-objects-by-key). Voted to close for clarity. — pilchard, May 26 '22 at 08:20

Edmund's Echo · Answer 1 · 2022-05-26T09:27:12.980

Here is how I break down these types of problems.

Is it a reduction or map? The former is true when the result can be/ must be keyed.
What feeds the (1)?

My first guess is that you have a reduction fed by an array of teams.

A reduction is a function that looks something like (array, {}) -> { key: value }

The array has the information to create both the keys and values.

Array: the rawDatas

keyFromRawFn:

rawData => rawData.team.id

valueFromRawFn:

rawData => a record as described in your result

So, the reduction will be,

rawDatas.reduction((newObj, rawData) => {
   const key = keyFromRawFn(rawData);
   const value = valueFromRawFn(rawData);
   newObj[key] = value;
   return newObj;
}, {});

This presumes the array length of the rawDatas = number of teams. Seems like a reasonable first guess because you have “games” for each “team”.

If not, this remains a valid “core” routine. We would need to figure out a “pre-processing” to get to a rawDatas that meets the criteria. That pre-processing would be a reduction with id as key, value yet another reduction that combines each preRawData by the preRawDatas entries (using sum if counts, or averages if they all have the number of games, or sum of game_count x average).

kiarash shamaii · Accepted Answer · 2022-05-26T08:57:49.050

var _ = require('lodash');

list = [
  {check: 1 , team: {id: 489, name: 'AC Milan'} }, { check: 1 , team: {id: 489, name: 'AC Milan1'} },
  { check: 1 , team: {id: 489, name: 'AC Milan1'} }, { check: 2 , team: {id: 489, name: 'AC Milan3'}},
  { check: 2  , team: {id: 489, name: 'AC Milan2'}}, { check: 3 , team: {id: 489, name: 'AC Milan5'}},
  { check: 5  , team: {id: 489, name: 'AC Milan3'}}, { check: 5 , team: {id: 489, name: 'AC Milan7'} }
]

test = _.groupBy(list, "team.name");

console.log(test)

How to filter an array of objects in react based on a specific dynamic property?

2 Answers2