0

I'm getting an array object that looks like this. My goal is to combine or merge them based on duplicate keys.

documents: [
    {
        image: 'sample image 1',
        id_side: 'Front',
        type: 'Passport'
    },
    {
        image: 'sample image 2',
        id_side: 'Back',
        type: 'Passport'
    },
    {
        image: 'sample image 3',
        id_side: 'Back',
        type: 'License'
    }
]

How can I arrange it to look like this?

documents: [
    {
        documentType: 'Passport',
        requiredDocs: [
            {
                image: 'sample image 1',
                id_side: 'Front',
                type: 'Passport'
            },
            {
                image: 'sample image 2',
                id_side: 'Back',
                type: 'Passport'
            }
        ]
    },
    {
        documentType: 'License',
        requiredDocs: [
            {
                image: 'sample image 3',
                id_side: 'Back',
                type: 'License'
            }
        ]
    }
]

I have found a similar question but I can't seem to make it work in my case. See the similar question in this link: How to merge/combine array of objects based on duplicate keys?

DayIsGreen
  • 255
  • 1
  • 4
  • 16
  • If you ok with using libraries - lodash [groupBy](https://lodash.com/docs/4.17.15#groupBy) is what you need – Andrey Jun 16 '22 at 09:28

4 Answers4

2

You can achieve your output with this

const documents = [
  {
    image: "sample image 1",
    id_side: "Front",
    type: "Passport"
  },
  {
    image: "sample image 2",
    id_side: "Back",
    type: "Passport"
  },
  {
    image: "sample image 3",
    id_side: "Back",
    type: "License"
  }
];

let output = {};
  documents.forEach((docs) => {
    if (output[docs.type]) {
      output[docs.type].requiredDocs.push(docs);
    } else {
      output[docs.type] = {
        documentType: docs.type,
        requiredDocs: [docs]
      };
    }
  });

  console.log(Object.values(output));
Abbas Shaikh
  • 304
  • 1
  • 9
0

Use reduce() to create an accumulation object, and then map() the entries of that object to your desired output format:

const data = [{
  image: 'sample image 1',
  id_side: 'Front',
  type: 'Passport'
}, {
  image: 'sample image 2',
  id_side: 'Back',
  type: 'Passport'
}, {
  image: 'sample image 3',
  id_side: 'Back',
  type: 'License'
}];

const result = Object.entries(data.reduce((a, v) => ({
  ...a,
  [v.type]: [...a[v.type] || [], v]
}), {})).map(([documentType, requiredDocs]) => ({
  documentType,
  requiredDocs
}));

console.log(result);
Robby Cornelissen
  • 91,784
  • 22
  • 134
  • 156
0

This assumes that the key that you want to deal with is type. Build an object mapping from the type to all the relevant objects, and then map it to the desired format.

const obj={documents:[{image:'sample image 1',id_side:'Front',type:'Passport'},{image:'sample image 2',id_side:'Back',type:'Passport'},{image:'sample image 3',id_side:'Back',type:'License'}]};

let types = obj.documents.reduce((a, { type, ...r }) => {
  a[type] = a[type] || [];
  a[type].push({ type, ...r });
  return a;
}, {});

let result = Object.entries(types).map(([ documentType, requiredDocs ]) => ({ documentType, requiredDocs }));

console.log(result);
.as-console-wrapper { max-height: 100% !important; top: auto; }
Jack Bashford
  • 43,180
  • 11
  • 50
  • 79
0

First you can use an Object {} to store as key value pair such that unique items will be treated as key:

const data = [{
  image: 'sample image 1',
  id_side: 'Front',
  type: 'Passport'
}, {
  image: 'sample image 2',
  id_side: 'Back',
  type: 'Passport'
}, {
  image: 'sample image 3',
  id_side: 'Back',
  type: 'License'
}];
const Obj = {}, arr = []
data.forEach(element => {
  if (Obj[element.type]) Obj[element.type].push(element)
  else Obj[element.type] = [element]
})
for (const eachType in Obj) {
  arr.push({ documentType: eachType, requiredDocs: Obj[eachType] })
}
console.log(arr)
Arjun Singh
  • 302
  • 1
  • 12