通過多個屬性過濾具有嵌套對象的對象數組

Question

我有一個對象數組

[
{
    "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

除了歌曲title ，您還需要檢查與lyrics對象的值相同的條件。 您可以通過將對象傳遞給Object.values()來獲取lyrics對象的值。 並且使用Array.some()您可以評估是否有任何元素滿足條件。 由於Array.some()返回一個布爾值，因此檢查起來很容易。

修復會。

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

此外，您需要檢查歌曲標題是否為 null 或未定義為缺少title屬性的歌曲的第二個對象。 您可以使用Optional Chaining來做到這一點。

Answer 2

嘗試使用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 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)
  )
);