filter object by two nested values

Question

I'm facing a problem with filter method. On my page there's an input to search matches by team names. Filter value is being stored to React state. Matches object looks like this:

[
    {
        "id": 4,
        "teamBlue": {
            "id": 36,
            "name": "nameForTeamBlue",
            "playerList": [
                {
                    [...]
                }
            ]
        },
        "teamRed": {
            "id": 37,
            "name": "nameForTeamRed",
            "playerList": [
                {
                    [...]
                }
            ]
        },
        "localDate": "2020-01-01",
        "localTime": "00:00:00",
        "referee": null,
        "commentator1": null,
        "commentator2": null,
        "streamer": null,
        "stage": {
            "id": 2,
            "name": "GROUPSTAGE"
        },
        "onLive": true,
        "finished": false
    },
]

I tried tons of methods to filter matches by team name, for example:

      let criteria = {
        teamBlue: {
          name: this.state.filter
        },
        teamRed: {
          name: this.state.filter
        }
      };
      let filteredMatches = this.state.matches.filter(function(item) {
        for (let key in criteria) {
          if (item[key] === undefined || item[key] !== criteria[key])
            return false;
        }
        return true;
      });
      console.log(filteredMatches);

but none of them worked. Is there any way to filter these matches so when I type "blue" into my input, it will show all matches where team name contains "blue"?

Thanks in advance!

You only filter by name or if criteria has key id then you want to filter by id as well? — HMR
– HMR, Commented Mar 22, 2020 at 11:36

Sajib Khan · Accepted Answer · 2020-03-22 11:54:44Z

1

Try updating the condition to:

if (!item[key] || item[key].name !== criteria[key].name)

let filteredMatches = this.state.matches.filter(function(item) {
    let flag = true;

    for (let key in criteria) {

      // update this to
      if (!item[key] || item[key].name !== criteria[key].name)
        flag = false;
    }
    return flag;
  });

edited Mar 22, 2020 at 11:54

answered Mar 22, 2020 at 11:31

Sajib Khan

24.4k9 gold badges69 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Sajib Khan Over a year ago

Ok, could you check you conditions inside if? and also update the json object and input (I don't see any blue in the json object)

ProbDed Over a year ago

let criteria = { teamBlue: { name: this.state.filter } }; also for teamBlue there is "name": "nameForTeamBlue" so it contains "blue"

HMR Over a year ago

@SajibKhan at the moment criteria[key] is { name: this.state.filter }, so you're comparing objects that always return false.

Sajib Khan Over a year ago

Try this condition: if (!item[key] || item[key].name !== criteria[key].name)

HMR Over a year ago

@Apraxia if name property was assumed all along then why even nest it in criteria, you could simplify with criteria = { teamBlue: this.state.filter...

Slai · Accepted Answer · 2020-03-22 11:47:07Z

0

The name property is missing :

if (key in item && item[key].name !== criteria[key].name)

answered Mar 22, 2020 at 11:47

Slai

23k5 gold badges49 silver badges55 bronze badges

Comments

zavr · Accepted Answer · 2020-03-22 12:12:58Z

You're comparing objects with === which will return false. You either need to use a deep comparison method from a library, or implement it yourself like below:

const matches = [ {"id": 4,
    "teamBlue": {
        "id": 36,
        "name": "nameForTeamBlue",
        "playerList": []
    },
    "teamRed": {
        "id": 37,
        "name": "nameForTeamRed",
        "playerList": []
    },
}, {"id": 4,
    "teamBlue": {
        "id": 36,
        "name": "nameForTeamBlue",
        "playerList": []
    },
    "teamRed": {
        "id": 37,
        "name": "nameForTeamRead",
        "playerList": []
    },
}]

const criteria = {
  teamBlue: {
    name: 'nameForTeamBlue',
  },
  teamRed: {
    name: 'nameForTeamRed',
  }
}

const filteredMatches = matches.filter((item) => {
  const allCriteriaMatched = Object.entries(criteria)
    .every(([key, value]) => {
      const matched = Object.entries(value).every(([criteriaKey, criteriaValue]) => {
        const itemValue = item[key][criteriaKey]
        const matched = itemValue == criteriaValue
        if (!matched) console.log('Item %s does not matched criteria %s. Item\'s value is %s, but criteria value is %s', item[key]['id'], criteriaKey, itemValue, criteriaValue, criteriaValue)
        return matched
      })
      if (!matched) return false
      return true
    }, {})
  return allCriteriaMatched
})
console.log(filteredMatches);

Basically, you just need to go 1 level deeper :D if your criteria can have multiple nested objects, then there's no point doing it manually. You can try to map criteria to run against matches so that you don't use === on objects, but only primitives.

Collectives™ on Stack Overflow

filter object by two nested values

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related