With the information below I am trying loop through cards, if there is a nested object of helper, return that objects title. But am either receiving undefined or errors. I was thinking maybe reduce would be viable here?
Sample Array:
cards: [
0: {
title: 'Something',
logo: 'logo link here',
},
1: {
title: 'Something 2',
logo: 'logo link here',
helper: {
text: 'helper text',
},
},
2: {
title: 'Something 3',
logo: 'logo link here',
},
]
code:
cards.filter((item) => {
if (item.helper) setHelperActive({...helperActive, item.title: true})
})
let cards = [
{
title: 'Something',
logo: 'logo link here',
},
{
title: 'Something else',
logo: 'logo link here',
helper: {
text: 'helper text',
},
},
{
title: 'Something',
logo: 'logo link here',
},
{
title: 'Lorem Epsum',
logo: 'logo link here',
helper: {
text: 'helper text',
},
}
]
let filtered = []
for(let i = 0; i < cards.length; i++) {
if(cards[i].helper) {
filtered.push(cards[i].title)
}
}
console.log(filtered);the solution is to use map not filter should be like this:
var titles = cards.map(card=>{ return card.title })
Using .filter() and checking if the object has a prop named helper. In case of multiple objects matching the criteria, their title's will be joined as a comma-separated string.
Snippet
let cards = [
{
title: 'Something',
logo: 'logo link here',
},
{
title: 'Something 2',
logo: 'logo link here',
helper: {
text: 'helper text',
},
},
{
title: 'Something',
logo: 'logo link here',
},
{
title: 'Something 4',
logo: 'logo link here',
helper: {
text: 'helper text',
},
},
]
// to list titles from all matching objects as a comma-separated string
console.log(cards.filter(ob => 'helper' in ob).map(({ title }) => title).join());
// suppose only the first matched object's title is required
console.log(cards.find(ob => 'helper' in ob)?.title ?? 'no match found');