group array of objects with inner array of strings javascript

June 3, 2022

I have an array of objects like below –

const books = [
  {
    name:"abc",
    isbn: 123,
    tags: ["tagA","tagB","tagC"]
  },
  {
    name:"xyz",
    isbn: 456,
    tags: ["tagB","tagC"]
  },
  {
    name:"pqr",
    isbn: 456,
    tags: ["tagB"]
  }
];

I want to group it based on tags of each object, and push the matched objects into the tags values which is string array. My expected output shoulb be an object having the grouped value as key and the value should be the array of matched values.

My Expected Output is-

const expected = {
    "tagA" : [
     {
         name:"abc",
       isbn: 123,  
     },
  ],
    "tagB" : [
     {
         name:"abc",
       isbn: 123,  
     },
     {
         name:"xyz",
       isbn: 456,  
     },
     {
         name:"pqr",
       isbn: 456,  
     },
  ],
    "tagC" : [
      {
         name:"abc",
       isbn: 123,  
     },
     {
         name:"xyz",
       isbn: 456,  
     },
  ],
}

>Solution :

This is a very standard ‘group by’ with an extra loop to add each element to multiple groups.

Here using destructuring to isolate the tags array from the rest of the book object, iterating over each tag creating a property in the result using logical nullish assignment (??=) if it doesn’t already exist, and then pushing a clone of each book using spread syntax

const books = [{ name: "abc", isbn: 123, tags: ["tagA", "tagB", "tagC"] }, { name: "xyz", isbn: 456, tags: ["tagB", "tagC"] }, { name: "pqr", isbn: 456, tags: ["tagB"] }];

const result = {};
for (const { tags, ...book } of books) {
  for (const tag of tags) {
    (result[tag] ??= []).push({...book});
  }
}

console.log(result);