create a new object from two different objects in js

Question

I'm struggling with the following task.

On the one hand I have the following object:

[
  {
    name: "VALUE1",
    type: "select",
    label: "Label"
  },
  {
    name: "VALUE2",
    type: "select",
    label: "Label"
  },
  {
    name: "VALUE3",
    type: "select",
    label: "Label"
  },
];

On the other hand I have some content for the object above, with I want to merge in a new object.
Here's the content:

[
  {
    VALUE1: "CONTENT",
    VALUE2: "CONTENT",
    VALUE3: "CONTENT",
    VALUE4: "CONTENT",
    VALUE5: "CONTENT",
  },
  {
    VALUE1: "CONTENT",
    VALUE2: "CONTENT",
    VALUE3: "CONTENT",
    VALUE4: "CONTENT",
    VALUE5: "CONTENT",
  },
  {
    VALUE1: "CONTENT",
    VALUE2: "CONTENT",
    VALUE3: "CONTENT",
    VALUE4: "CONTENT",
    VALUE5: "CONTENT",
  }
]

Please notice that the key from the second object matches with the value from the first
At the end I need a object which should have the following structure:

[
  {
    name: 'VALUE1'
    id: 'CONTENT 1 ',
    label: 'LABEL 1',
    type: 'select'
    selectMenuOptions: {
      VALUE1: "CONTENT",
      VALUE1: "CONTENT",
      VALUE1: "CONTENT",
      VALUE1: "CONTENT",
      VALUE1: "CONTENT",
    }
  },
  {
    name: 'VALUE2'
    id: 'CONTENT 2 ',
    label: 'LABEL 2',
    type: 'select'
    selectMenuOptions: {
      VALUE2: "CONTENT",
      VALUE2: "CONTENT",
      VALUE2: "CONTENT",
      VALUE2: "CONTENT",
      VALUE2: "CONTENT",
    }
  },
  {
    name: 'VALUE3'
    id: 'CONTENT 3 ',
    label: 'LABEL 3',
    type: 'select'
    selectMenuOptions: {
      VALUE3: "CONTENT",
      VALUE3: "CONTENT",
      VALUE3: "CONTENT",
      VALUE3: "CONTENT",
      VALUE3: "CONTENT",
    }
  },
]

Some background information if it helps:

• Angular 14
• The object I try to form is for dynamic forms

Answer 1

Given these arrays:

const arr1 = [
  {
    name: "VALUE1",
    type: "select",
    label: "LABEL1"
  },
  {
    name: "VALUE2",
    type: "select",
    label: "LABEL2"
  },
  {
    name: "VALUE3",
    type: "select",
    label: "LABEL3"
  },
];

const arr2 = [
  {
    VALUE1: "CONTENT01",
    VALUE2: "CONTENT02",
    VALUE3: "CONTENT03",
    VALUE4: "CONTENT04",
    VALUE5: "CONTENT05",
  },
  {
    VALUE1: "CONTENT11",
    VALUE2: "CONTENT12",
    VALUE3: "CONTENT13",
    VALUE4: "CONTENT14",
    VALUE5: "CONTENT15",
  },
  {
    VALUE1: "CONTENT21",
    VALUE2: "CONTENT22",
    VALUE3: "CONTENT23",
    VALUE4: "CONTENT24",
    VALUE5: "CONTENT25",
  }
]

You can merge them like so:

function merge() {
  const map = new Map<string, string[]>();
  for (const obj of arr2) {
    for (const key of Object.keys(obj)) {
      if (!map.get(key)) map.set(key, []);
      map.get(key).push(obj[key]);
    }
  }
  for (const obj of arr1) {
    obj['selectMenuOptions'] = map.get(obj.name) || [];
  }
}

Which causes arr1 to look like this:

[
  {
    name: 'VALUE1',
    type: 'select',
    label: 'LABEL1',
    selectMenuOptions: ['CONTENT01', 'CONTENT11', 'CONTENT21'],
  },
  {
    name: 'VALUE2',
    type: 'select',
    label: 'LABEL2',
    selectMenuOptions: ['CONTENT02', 'CONTENT12', 'CONTENT22'],
  },
  {
    name: 'VALUE3',
    type: 'select',
    label: 'LABEL3',
    selectMenuOptions: ['CONTENT03', 'CONTENT13', 'CONTENT23'],
  },
]

---

I've excluded id since you haven't provided any information on how to generate the id, and presumably name is unique, so it should function as an id.

Also, you can't have an object like:

const obj = {
  VALUE1: 'CONTENT1',
  VALUE1: 'CONTENT2',
  VALUE1: 'CONTENT3',
}

What would obj.VALUE1 return in this case?

So I made selectMenuOptions an array instead.

---

Stackblitz: https://stackblitz.com/edit/typescript-txtmnf?file=index.ts

Answer 2

it is not very clear what data structure you wish to have. I will put you a simple example of a "merge" of this data, inspired by this you should be able to get to your goal.

const a = [
  {
    name: "VALUE1",
    type: "select",
    label: "LABEL 1"
  },
  {
    name: "VALUE2",
    type: "select",
    label: "LABEL 2"
  },
  {
    name: "VALUE3",
    type: "select",
    label: "LABEL 3"
  },
]
const b = [
  {
    VALUE1: "CONTENT 1",
    VALUE2: "CONTENT 2",
    VALUE3: "CONTENT 3",
    VALUE4: "CONTENT 4",
    VALUE5: "CONTENT 5",
  },
  {
    VALUE1: "CONTENT 1",
    VALUE2: "CONTENT 2",
    VALUE3: "CONTENT 3",
    VALUE4: "CONTENT 4",
    VALUE5: "CONTENT 5",
  },
  {
    VALUE1: "CONTENT 1",
    VALUE2: "CONTENT 2",
    VALUE3: "CONTENT 3",
    VALUE4: "CONTENT 4",
    VALUE5: "CONTENT 5",
  }
]

const merged = a.map(element => {
  element.selectMenuOptions = b.map(be => ({ [element.name]: be[element.name] }))
  return element
});