【问题标题】:Is it possible to get a list of all items in an array of objects that match items in another array?是否可以获得与另一个数组中的项目匹配的对象数组中所有项目的列表?
【发布时间】:2019-08-27 22:40:06
【问题描述】:

我正在开发一个 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 数组中,但我完全不知道如何在添加游戏之前确保所有类型都在游戏中。

【问题讨论】:

    标签: javascript arrays reactjs javascript-objects


    【解决方案1】:

    如果您的流派是一个简单的字符串数组而不是对象,这会更容易一些,但是您仍然可以通过在filter() 中利用some()every() 进行非常简洁的检查(顺便说一句,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 中的每个游戏至少匹配游戏中的一种类型。这将使它只返回匹配所有类型的游戏。

    【讨论】:

    • 这太完美了!谢谢!
    猜你喜欢
    • 1970-01-01
    • 2021-12-03
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-04-05
    • 2021-12-26
    相关资源
    最近更新 更多