How can I get the total number of truthy results of my array?

Question

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!

Answer 1

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)

Answer 2

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)

Answer 3

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