如何獲得數組的真實結果總數？

Question

有人可以幫我用類別卡找到故事的數量嗎？

我的數據看起來像這樣：

export const data = [
{
    id: "1",
    location: "Mexico",
    title: "Mexico",
    text: "Intro about Mexico",
    image: Mexique.png,
    stories: [
      {
        category: "card",
        title: "Yucatan",
        location: "Mexico",
        text: "Mexico, ....",
      },
      {
        category: "route",
        title: "My route",
        location: "Mexico",
        text: "....",
      },
   {
        category: "story",
        title: "My story",
        location: "Mexico",
        text: "....",
      },
    ],
  },
]

現在我想知道顯示的卡片總數（類別為 card的故事）。 我嘗試了很多東西，這就是我的代碼現在的樣子，但我還沒有得到卡片的編號。

let nrOfCards = 0
data.map((card) => 
   card.stories.map((story) => {
      const storiesWithCategoryCard = story.category === 'card' 
      console.log(storiesWithCategoryCard)
})

在控制台中，我現在看到一個布爾值列表。 如果類別是卡片，則為真，否則為假。 我怎樣才能得到這個列表的長度？ 這沒有用：

nrOfCards = storiesWithCategoryCard.filter(Boolean).length

我希望有人能幫助我找到最后一塊拼圖！

Answer 1

您可以使用與在 map 回調中所做的相同的邏輯來確定過濾器回調中它是否為“卡片”。 你只會稍微提高短路執行的效率（使用.some() ）：

這將為您提供至少包含一個類別為“卡片”的故事的數據項數量。 如果您想要不同的結果，請參閱下文 - 從您的原始帖子中不清楚您在尋找什么。

 const data = [ { id: "1", location: "Mexico", title: "Mexico", text: "Intro about Mexico", image: 'Mexique.png', stories: [ { category: "card", title: "Yucatan", location: "Mexico", text: "Mexico, ....", }, { category: "route", title: "My route", location: "Mexico", text: "....", }, { category: "story", title: "My story", location: "Mexico", text: "....", }, ], }, ] let storiesWithCategoryCard = data.filter(item => { return item.stories.some(story => story.category === 'card'); }) console.log(storiesWithCategoryCard.length)

如果您想獲得類別為“卡片”的故事數量，使用.reduce()將是更好的選擇，如下所示：

 const data = [ { id: "1", location: "Mexico", title: "Mexico", text: "Intro about Mexico", image: 'Mexique.png', stories: [ { category: "card", title: "Yucatan", location: "Mexico", text: "Mexico, ....", }, { category: "route", title: "My route", location: "Mexico", text: "....", }, { category: "story", title: "My story", location: "Mexico", text: "....", }, ], }, ] let storiesWithCategoryCardCount = data.reduce((res, curr) => { let storyCardCount = curr.stories.filter(story => story.category === 'card').length; return res + storyCardCount; }, 0) console.log(storiesWithCategoryCardCount)

Answer 2

我認為它有多個id ：

 const data = [ { id: "1", location: "Mexico", title: "Mexico", text: "Intro about Mexico", image: 'Mexique.png', stories: [ { category: "card", title: "Yucatan", location: "Mexico", text: "Mexico, ....", }, { category: "route", title: "My route", location: "Mexico", text: "....", }, { category: "story", title: "My story", location: "Mexico", text: "....", }, ], }, { id: "2", location: "Mexico1", title: "Mexico1", text: "Intro about Mexico1", image: 'Mexique.png', stories: [ { category: "card", title: "Yucatan1", location: "Mexico1", text: "Mexico1, ....", }, { category: "route", title: "My route1", location: "Mexico1", text: "....", }, { category: "story", title: "My story1", location: "Mexico1", text: "....", }, ], }, ] const totalStories = data.reduce((res, ele) => { let num = ele.stories.reduce((r, e) => e.category === "card"? r+1: r, 0) return res + num }, 0) console.log(totalStories)

Answer 3

如果'stories'數組項中可以有更多帶有'card'類別的卡片，請嘗試以下方法：

let numOfCards = data.reduce((acc, dItem:any) => {
   let items = dItem.stories?.filter((story: any) => story.category === 'card').length; 
   return acc + items;
}, 0);