¿alguien me puede ayudar a encontrar el número de historias con la tarjeta de categoría?
Mis datos se ven algo como esto:
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: "....", }, ], }, ]Ahora me gustaría saber el número total de tarjetas (historias con tarjeta de categoría ) que se muestran. Intenté muchas cosas, así es como se ve mi código ahora, pero aún no obtengo el número de tarjetas.
let nrOfCards = 0 data.map((card) => card.stories.map((story) => { const storiesWithCategoryCard = story.category === 'card' console.log(storiesWithCategoryCard) })En la consola ahora veo una lista de valores booleanos. Si la categoría es tarjeta es verdadero y en caso contrario falso. ¿Cómo puedo obtener la longitud de esta lista? Esto no funcionó:
nrOfCards = storiesWithCategoryCard.filter(Boolean).length¡Espero que alguien pueda ayudarme a encontrar la última pieza de mi rompecabezas!
Puede usar la misma lógica para determinar si es una 'tarjeta' en su devolución de llamada de filtro como lo hace en su devolución de llamada de mapa. Simplemente mejorará ligeramente la eficiencia con la ejecución de cortocircuito (usando .some() ):
Esto le dará la cantidad de elementos de datos que contienen al menos una historia con una categoría de 'tarjeta'. Vea a continuación si desea obtener resultados diferentes: no estaba claro en su publicación original lo que estaba buscando.
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) Si desea obtener la cantidad de historias con la categoría de 'tarjeta', usar .reduce() sería una mejor opción, como esta:
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)Creo que tiene múltiples 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)Si pudiera haber más tarjetas con la categoría 'card' en el elemento de matriz 'stories' , intente este enfoque:
let numOfCards = data.reduce((acc, dItem:any) => { let items = dItem.stories?.filter((story: any) => story.category === 'card').length; return acc + items; }, 0);