Javascript Advanced Array Manipulation

Given a truncated array of object

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",
    }]

I would love to transform it into an array like below:

    {
        emotionTags: 'moody',
        isGif: false,
        image: ["angry.jpeg", 'angry2.jpeg','angry3.jpeg', 'sad1.jpeg'],
        alt: ['A cat looking moody', 'A cat looking sad']
    },
    {
        emotionTags: 'insomniac',
        isGif: false,
        image: ['angry2.jpeg', 'insomnia.jpeg', 'insomnia1.jpeg'],
        alt: ['A cat looking moody', 'A cat looking insomniac',]
    },
    {
        emotionTags: 'confused',
        isGif: false,
        image: ['confused.jpeg'],
        alt: ['A cat looking confused']
    }
]

Such that all images that corresponds to a particular mood are grouped in an array of images (same with their alt if possible). images that correspond to more than one mood can also be grouped in that particular's mood object too.

I tried doing the below:

 let emotions = ['moody','insomniac','confused','sad','dominant','hungry','relaxed','angry']

 let modCatData = catsData.reduce((allCat, cat,idx)=>{
  let imageArr = []
  if(cat['emotionTags'].includes (emotions[idx])){
    imageArr.push(cat.image)
    allCat.push({
      'image':imageArr
    })
  }
  else{
    allCat.push({
      'image':cat.image
    })
  }
  return allCat
  
},[])

console.log(modCatData)ere

I was hoping to be able to pick an emotion, test it against the object emotions, and grouped the images that correspond with it, but i have difficulty grouping the images so far.

would appreciate a solution or direction if possible.

Firstly, the input you provided has no sentences like, "A cat looking insomniac" or "A cat looking sad" but your output includes those sentences. So, not sure what is your correct data.

Second, if I got your question correctly then you want to create an array of moods and group the images and alts of that particular mood in that single mood item. So you might try the following-

1. Run loop on mood array.
2. Filter which items are having the current mood.
3. Get the images and alts from the filtered items using the map function.
4. I used the Set operator to filter the unique images and alt in case of duplicity.

Here is the demo-

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

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",
  }
];

let emotions = ['moody', 'insomniac', 'confused', 'sad', 'dominant', 'hungry', 'relaxed', 'angry']

let final = [];

emotions.forEach(e => {
  let obj = {}
  let result = catsData.filter(cd => cd.emotionTags.includes(e))
  obj.emotionTags = e;
  obj.isGif = false;
  obj.image = [...new Set(result.map(item => item.image))]
  obj.alt = [...new Set(result.map(item => item.alt))]
  final.push(obj)
})

console.log(final)

<!-- end snippet -->

Let me know if your data is something different, I will update the answer.

Here is a way to do the grouping using a .reduce() call on the source array. Then you can just filter the result to a specific emotion you are looking for.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

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',
  },
];

const modified = catsData.reduce((aggregate, item) => {
  for (var emotion of item.emotionTags) {
    let existing = aggregate.find((i) => i.emotionTags === emotion);
    if (!existing) {
      aggregate.push((existing = { emotionTags: emotion, isGif: item.isGif, image: [], alt: [] }));
    }
    existing.image = [...new Set([...existing.image, item.image])]; // Trim to distinct values
    existing.alt = [...new Set([...existing.alt, item.alt])]; // Trim to distinct values
  }
  return aggregate;
}, []);

console.log(modified);

<!-- end snippet -->

You could use an object for grouping.

<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const
addIfNotExist = (array, value) => {
if (!array.includes(value)) array.push(value);
},
data = [{ 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" }],
result = Object.values(data.reduce((r, { emotionTags, isGif, ...o }) => {
emotionTags.forEach(emotionTag => {
r[emotionTag] ??= { emotionTag, isGif, image: [], alt: [] };
['image', 'alt'].forEach(k => addIfNotExist(r[emotionTag][k], o[k]));
});
return r;
}, {}));

console.log(result);

<!-- language: lang-css -->
.as-console-wrapper { max-height: 100% !important; top: 0; }
<!-- end snippet -->

There is no need to hard code the emotions. You can use a simple .reduce(). Try this

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

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", } ];

const result = catsData.reduce((acc, o) => {
    o.emotionTags.forEach(tag => {
        let item = acc.find(i => i.emotionTags === tag) ?? { emotionTags: tag, isGif: o.isGif, image: [], alt: [] };
        if (!item.image.length) acc.push(item);
        item.image.push(o.image);
        item.alt.push(o.alt);
    });

    return acc;
}, []);

console.log(result);

<!-- end snippet -->