如何按对象数组过滤？

Question

My JSON looks like this:

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

and the following filtering code:

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

which doesn't work and says Cannot read property 'toString' of undefined . It works if I remove the 'rarities' key but I am unable to get it to filter based on objects in the rarities array too. The idea is that the user should be able to search and filter a table where the type, name or rarity inside rarities equals the entered search value. Does someone know what im supposed to do, do I need to do additional fintering for objects within the array?

Answer 1

This is because when checking for the key rarity: entry[k] where k = rarity entry[rarity] , at this point

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

)

will look like:

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

)

entry['rarity'] doesn't exist so its undefined so basically its trying to do undefined.toString().... . rarity is nested inside rarities . So to access this you would have to be looking inside entry['rarities']['rarity']

You could try importing lodash https://lodash.com/ and then use lodash's _.get method to have something like :

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

see that for your keys rarity is now rarities.rarity this should work