can someone help me to find the number of stories with the category card?
My data looks something like this:
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: "....",
},
],
},
]
Now I would like to know the total number of cards (stories with category card) that are displayed. I tried a lot of things, this is how my code looks like now but I don't get the nr of cards yet.
let nrOfCards = 0
data.map((card) =>
card.stories.map((story) => {
const storiesWithCategoryCard = story.category === 'card'
console.log(storiesWithCategoryCard)
})
In the console I now see a list of booleans. If the category is card it is true and otherwise false. How can I get the lenght of this list? This didn't work:
nrOfCards = storiesWithCategoryCard.filter(Boolean).length
I hope someone can help my to find the last piece of my puzzle!
You can use the same logic to determine if it's a 'card' in your filter callback as you do in your map callback. You'll just slightly improve the efficiency with short-circuit execution (using .some()):
This will get you the number of data items that contain at least one story with a category of 'card'. See below if you want different results - it was unclear from your original post what you were looking for.
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)If you want to get the number of stories with the category of 'card', using .reduce() would be a better option, like this:
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)I think it has multi 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)If there could be more cards with the 'card' category in the 'stories' array item, try this approach:
let numOfCards = data.reduce((acc, dItem:any) => {
let items = dItem.stories?.filter((story: any) => story.category === 'card').length;
return acc + items;
}, 0);