Question

我正在研究一个React项目，该项目可以让我搜索一系列游戏，以帮助我根据自己的心情决定要玩的游戏，目前我可以将游戏添加到JSON文件中但我真的在搜索部分苦苦挣扎。

现在，要添加新游戏，您将输入标题，流派和游戏说明。类型字段是ReduxForm FieldArray对象，我认为这就是给我带来麻烦的原因。这是我当前的JSON文件

{
  "games": [
    {
      "name": "Rainbow Six: Siege",
      "genres": [
        {
          "genre": "tactical"
        },
        {
          "genre": "shooter"
        }
      ],
      "description": "tactical team based shooter",
      "id": 1
    },
    {
      "name": "Resident Evil 2",
      "genres": [
        {
          "genre": "horror"
        },
        {
          "genre": "survival"
        },
        {
          "genre": "shooter"
        }
      ],
      "description": "classic resident evil 2 remake in 2019",
      "id": 2
    },
    {
      "name": "Rocket League",
      "genres": [
        {
          "genre": "cars"
        },
        {
          "genre": "competition"
        },
        {
          "genre": "one more game"
        }
      ],
      "description": "soccar!",
      "id": 3
    }
  ]
}

这是我用来搜索的虚拟数据：

const searchedGenres = 'horror, shooter';
const searchedList = searchedGenres.split(', ');
let foundGame = [];

一旦我使用该数据进行搜索，计划就是允许我只在一个文本框中在前端输入数据，因此“恐怖，开枪”将是我的搜索词。此搜索的结果应该仅返回生化危机2，但是我也收到了彩虹六号：围攻，尽管它缺少我所请求的体裁之一。

searchedList.forEach(searchedGenre => {
  this.props.games.map(game => {
    if (
      game.genres.find(
        ({ genre }) =>
          genre.toLowerCase() ===
          searchedGenre.toLowerCase().trim()
      ) !== undefined
    ) {
      foundGames.push(game);
    }
  });
});

我了解为什么为什么我同时获得了《彩虹六号》和《生化危机》，因为我实际上并没有检查两种类型是否属于游戏类型我将游戏添加到foundGames数组中，但是我完全迷失了在添加之前如何确保所有游戏类型都在游戏中。

Answer 1

如果您的流派是一个简单的字符串数组而不是对象，这会容易一些，但是仍然可以通过利用some()中的every()和filter()来简洁地进行检查（顺便说一句filter()比map() + push()更好）

let games = [{"name": "Rainbow Six: Siege","genres": [{"genre": "tactical"},{"genre": "shooter"}],"description": "tactical team based shooter","id": 1},{"name": "Resident Evil 2","genres": [{"genre": "horror"},{"genre": "survival"},{"genre": "shooter"}],"description": "classic resident evil 2 remake in 2019","id": 2},{"name": "Rocket League","genres": [{"genre": "cars"},{"genre": "competition"},{"genre": "one more game"}],"description": "soccar!","id": 3}]

const searchedGenres = 'horror, shooter';
const searchedList = searchedGenres.split(', ');

let foundGame = games.filter(game => searchedList.every(searchItem => game.genres.some(g => g.genre == searchItem) ))
console.log(foundGame)

过滤条件基本上表明您希望searchedList中的每个游戏都至少匹配一种游戏类型。这将使其只返回与每种类型匹配的游戏。

是否可以获取与另一个数组中的项目匹配的对象数组中所有项目的列表？

1 个答案: