按多个属性过滤嵌套 objects 的 objects 数组

Question

我有一个 objects

的数组

[
{
    "createdAt": {
        "seconds": 1654000036,
        "nanoseconds": 204000000
    },
    "lyrics": {
        "liryc-1-b": "Some example lyrics verse 1",
        "liryc-1-a": "Some example lyrics verse 2"
    },
    "category": "maculele",
    "title": "asdasd"
},
{
    "category": "corridos",
    "createdAt": {
        "seconds": 1653936021,
        "nanoseconds": 438000000
    },
    "lyrics": {
        "liryc-1-b": "lorem ipsum dolor lorem ipsum dolor lorem ipsum dolor lorem ipsum dolor lorem ipsum dolor lorem ipsum dolor ",
        "liryc-1-a": "lorem ipsum dolor lorem ipsum dolor lorem ipsum dolor lorem ipsum dolor lorem ipsum dolor lorem ipsum dolor lorem ipsum dolor lorem ipsum dolor lorem ipsum dolor lorem ipsum dolor "
    }
 }
]

我想搜索标题和歌词是否包含搜索引用。

我已经知道如何只按标题搜索，但我还需要按歌词搜索

<SongbookContainer>
            {query === ''
                ? songs.map((song, i) => <SongPreview key={i} song={song} />)
                : songs
                      .filter(song => song.title.toLowerCase().includes(query.toLowerCase()))
                      .map((filteredSong, i) => <SongPreview key={i} song={filteredSong} />)}
        </SongbookContainer>

如何同时按标题和歌词搜索？

Answer 1

尝试使用 some 方法过滤 lyrics 对象键或值：

<SongbookContainer>
  {query === ''
    ? songs.map((song, i) => <SongPreview key={i} song={song} />)
    : songs
        .filter((song) => {
          return song.title.toLowerCase().includes(query.toLowerCase()) && 
            // If you need to filter by key
            Object.keys(song.lyrics).some(lyricKey => lyricKey.toLowerCase().includes(query.toLowerCase())) 
            // Or, If you need to filter by value
            Object.values(song.lyrics).some(lyricValue => lyricValue.toLowerCase().includes(query.toLowerCase()))
        })
        .map((filteredSong, i) => <SongPreview key={i} song={filteredSong} />)}
</SongbookContainer>;

Answer 2

除了歌曲 title 之外，您还需要使用 lyrics object 的值检查相同的条件。您可以通过将 object 传递给 Object.values() 来获取 lyrics object 的值。使用 Array.some() 你可以评估是否有任何元素满足条件。作为 Array.some() returns 一个布尔值，它将使检查变得容易。

修复会是。

const songs = [
{
    "createdAt": {
        "seconds": 1654000036,
        "nanoseconds": 204000000
    },
    "lyrics": {
        "liryc-1-b": "Some example lyrics verse 1",
        "liryc-1-a": "Some example lyrics verse 2"
    },
    "category": "maculele",
    "title": "asdasd"
},
{
    "category": "corridos",
    "createdAt": {
        "seconds": 1653936021,
        "nanoseconds": 438000000
    },
    "lyrics": {
        "liryc-1-b": "lorem ipsum dolor lorem ipsum dolor lorem ipsum dolor lorem ipsum dolor lorem ipsum dolor lorem ipsum dolor ",
        "liryc-1-a": "lorem ipsum dolor lorem ipsum dolor lorem ipsum dolor lorem ipsum dolor lorem ipsum dolor lorem ipsum dolor lorem ipsum dolor lorem ipsum dolor lorem ipsum dolor lorem ipsum dolor "
    }
 }
]

const query = 'dolor';

songs.filter(song => song.title?.toLowerCase().includes(query.toLowerCase()) || Object.values(song.lyrics)?.some(l => l.toLowerCase().includes(query.toLowerCase()))).map(r => console.log(r));

此外，您需要检查歌曲标题是否为空或未定义为第二个 object 歌曲缺失 title 属性。您可以使用 Optional Chaining.

Answer 3

也许不是最佳答案，但它很有效。

const query = "title";

/**
* tools to parse data any data to string and find correspond word.
*/
function wordExist(data, word) {
  if (!data || !word) {
    return false;
  }
  const parse = JSON.stringify(data);
  return parse.includes(word);
}

// use like this in your current filter
  array.filter(
    (song) => wordExist(song.title, query) || wordExist(song?.lyrics, query)
  )
);

按多个属性过滤嵌套 objects 的 objects 数组

Filter array of objects with nested objects by multiple properties

javascript

reactjs

filter