Problem of working with Data

Javascript
1

During my learning journey on Scrimba, I noticed that I’ve some difficulties with the steps to follow until we render the Data on the page for the users. For example from const catsData = [
{
emotionTags: [“moody”],
isGif: false,
image: “angry.jpeg”,
alt: “A cat looking moody”,
},
{
emotionTags: [“moody”, “insomniac”],
isGif: false,
image: “angry2.jpeg”,
alt: “A cat looking moody”,
},
{
emotionTags: [“moody”],
isGif: false,
image: “angry3.jpeg”,
alt: “A cat looking moody”,
},
{
emotionTags: [“confused”, “sad”],
isGif: false,
image: “confused.jpeg”,
alt: “A cat looking confused”,
},
{
emotionTags: [“dominant”, “moody”],
isGif: false,
image: “dominant.jpeg”,
alt: “A cat looking dominant”,
},
{
emotionTags: [“happy”, “relaxed”],
isGif: false,
image: “happy.jpeg”,
alt: “A cat looking happy”,
},
{
emotionTags: [“hungry”],
isGif: false,
image: “hungry.jpeg”,
alt: “A cat looking hungry”,
},
{
emotionTags: [“hungry”],
isGif: false,
image: “hungry1.jpeg”,
alt: “A cat looking hungry”,
},
{
emotionTags: [“insomniac”],
isGif: false,
image: “insomnia.jpeg”,
alt: “A cat looking insomniac”,
},
{
emotionTags: [“insomniac”],
isGif: false,
image: “insomnia1.jpeg”,
alt: “A cat looking insomniac”,
},
{
emotionTags: [“relaxed”],
isGif: false,
image: “lazy.jpeg”,
alt: “A cat looking lazy”,
},
{
emotionTags: [“scared”],
isGif: false,
image: “nervous.jpeg”,
alt: “A cat looking nervous”,
},
{
emotionTags: [“sad”],
isGif: false,
image: “sad.jpeg”,
alt: “A cat looking sad”,
},
{
emotionTags: [“sad”, “moody”],
isGif: false,
image: “sad1.jpeg”,
alt: “A cat looking sad”,
},
{
emotionTags: [“moody”],
isGif: true,
image: “angry.gif”,
alt: “A cat looking moody”,
},
{
emotionTags: [“moody”],
isGif: true,
image: “angry2.gif”,
alt: “A cat looking angry”,
},
{
emotionTags: [“confused”],
isGif: true,
image: “confused2.gif”,
alt: “A cat looking confused”,
},
{
emotionTags: [“dominant”],
isGif: true,
image: “dominant.gif”,
alt: “A cat looking dominant”,
},
{
emotionTags: [“happy”],
isGif: true,
image: “happy.gif”,
alt: “A cat looking happy”,
},
{
emotionTags: [“hungry”, “sad”, “confused”],
isGif: true,
image: “confused.gif”,
alt: “A cat looking hungry”,
},
{
emotionTags: [“hungry”],
isGif: true,
image: “hungry.gif”,
alt: “A cat looking hungry”,
},
{
emotionTags: [“hungry”],
isGif: true,
image: “hungry2.gif”,
alt: “A cat looking hungry”,
},
{
emotionTags: [“insomniac”, “scared”],
isGif: true,
image: “insomnia2.gif”,
alt: “A cat looking insomniac”,
},
{
emotionTags: [“relaxed”],
isGif: true,
image: “lazy.gif”,
alt: “A cat looking relaxed”,
},
{
emotionTags: [“relaxed”],
isGif: true,
image: “relaxed2.gif”,
alt: “A cat looking relaxed”,
},
{
emotionTags: [“scared”, “sad”],
isGif: true,
image: “nervous.gif”,
alt: “A cat looking nervous”,
},
{
emotionTags: [“scared”],
isGif: true,
image: “nervous2.gif”,
alt: “A cat looking scared”,
},
{
emotionTags: [“sad”],
isGif: true,
image: “sad.gif”,
alt: “A cat looking sad”,
},
]

function getEmotionsArray(cats){
const emotionsArray =
for (let i = 0; i < cats.length; i++){
for (let j=0; j < cats[i].emotionTags.length; j++){
emotionsArray.push(cats[i].emotionTags[j])
}
}
console.log(emotionsArray)
}
I do not know what to do to find a solution about it. Please can anyone lead me? Thank you in advance

Without Data, when I see a design I can manage to do it until I reach the result, but with Data…:unamused::unamused::unamused:

2

Hey @Kolie11, is this on a specific course? I think this is that cat meme project you’re working I think?

If you’re able to link me to your scrim with your other code, I can check to see what the problem could be.

3

Yeah I’m talking about the meme project I followed on scrimba. I want to try it from scratch, but when I try I get lost and dont know which step should I take.

4

Are you coding it on our platform or on an external editor? Curious of the code you have so far. I recommend popping the code into a scrim so we can collaborate on it.