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

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!

CodePudding user response：

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)

CodePudding user response：

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)

CodePudding user response：

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