фильтровать объект по двум вложенным значениям

Question

У меня проблема с методом фильтра. На моей странице есть вход для поиска совпадений по названиям команд. Значение фильтра сохраняется в состоянии реакции. Объект совпадений выглядит следующим образом:

[
    {
        "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
    },
]

Я пробовал множество методов для фильтрации совпадений по имени команды, например:

      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);

, но ни один из них не работал. Есть ли способ отфильтровать эти совпадения, чтобы при вводе «синих» в поле ввода отображались все совпадения, в которых название команды содержит «синие»?

Заранее спасибо!

Answer 1

Попробуйте обновить условие до:

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;
  });

Answer 2

Вы сравниваете объекты с ===, который возвращает false. Вам нужно либо использовать метод глубокого сравнения из библиотеки, либо реализовать его самостоятельно, как показано ниже:

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);

По сути, вам просто нужно на go 1 уровень глубже: D если ваши критерии могут иметь несколько вложенных объектов, то нет смысла делать это вручную. Вы можете попытаться сопоставить критерии для запуска совпадений, чтобы не использовать === для объектов, а только для примитивов.

Answer 3

Свойство name отсутствует:

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