Question

我的JSON看起来像这样：

{
    id: 1,
    type: "Sword",
    name: "ABC",
    description: 'ABC',
    rarities: [
      {
        rarity: 'Common',
        damage: 100
      },
      {
        rarity: 'Uncommon',
        damage: 200
      },
      {
        rarity: 'Rare',
        damage: 300
      }
   ]
}...

和以下过滤代码：

const string = "Search query";
const keys = ['type', 'name', 'rarity'];
this.setState({
   data: data.filter(entry => keys.some(k => entry[k]
     .toString()
     .toLowerCase()
     .includes(string)
   ))
})

不起作用，说Cannot read property 'toString' of undefined。如果我删除了'rarities'键，它也可以工作，但是我也无法使其基于稀有数组中的对象进行过滤。这个想法是，用户应该能够搜索和过滤一个表，其中稀有中的类型，名称或稀有度等于输入的搜索值。有人知道我该怎么做吗，我需要对数组内的对象进行额外的扫描吗？

Answer 1

这是因为此时检查关键稀有度：entry[k]其中k =稀有度entry[rarity]

keys.some(k => entry[k]
 .toString()
 .toLowerCase()
 .includes(string)

）

外观如下：

keys.some(k => entry['rarity']
 .toString()
 .toLowerCase()
 .includes(string)

）

entry['rarity']不存在，因此它的undefined基本上就是它尝试做的undefined.toString()....。稀有性嵌套在rarities中。因此，要访问此页面，您必须在entry['rarities']['rarity']

内浏览

您可以尝试导入lodash https://lodash.com/，然后使用lodash的_.get方法添加类似以下内容：

const string = "Search query";
const keys = ['type', 'name', 'rarities.rarity'];
this.setState({
   data: data.filter(entry => keys.some(k => _.get(entry, k)
     .toString()
     .toLowerCase()
     .includes(string)
   ))
})

看到您的密钥rarity现在为rarities.rarity 这应该工作

如何按对象数组过滤？

1 个答案: