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

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

我的資料看起來像這樣：

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: "....",
      },
    ],
  },
]

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

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

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

nrOfCards = storiesWithCategoryCard.filter(Boolean).length

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

uj5u.com熱心網友回復：

您可以使用與地圖回呼中相同的邏輯來確定過濾器回呼中的“卡片”是否為“卡片”。您將通過短路執行（使用.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)

uj5u.com熱心網友回復：

我認為它有多個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)

uj5u.com熱心網友回復：

如果陣列項中可能有更多具有該'card'類別的卡片'stories'，請嘗試以下方法：

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

標籤：javascript 数组

上一篇：串列項未自行調整到選單底部

下一篇：在反應js中從子組件獲取資料到父組件