如何获得数组的真实结果总数

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

现在我想知道显示的卡片总数(类别卡片的故事)。我尝试了很多东西，这就是我的代码现在的样子，但我还没有得到卡的数量。

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

在控制台中，我现在看到了布尔值列表。如果类别是卡片，则为true，否则为false。我怎样才能得到这份清单的长度？这不起作用：

nrOfCards = storiesWithCategoryCard.filter(Boolean).length

我希望有人能帮我找到我的最后一块拼图！

Answer 1

您可以在过滤器回调中使用与在映射回调中相同的逻辑来确定它是否是"卡"。短路执行(使用.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);