How to construct an array of objects by using the keys of another array of objects and values from the array of arrays?

Question

I have two arrays as listed below. I'm trying to create a new array of objects by using the field key in array_1 and the values in array_2.

const result = []
array_1 = [{ name: "Color" , field: "color"}, {name: "Shape", field: "shape" }, { name: "Whatever", field: "whatever" }]

array_2 = [["green", "rectangular", "whatever1"], ["yellow", "circle", "whatever2"]]

The result should be:

console.log(result)
// [{color:"green", shape:"rectangular", whatever: "whatever1"}, 
//  { color:"yellow", shape: "circle", whatever:"whatever2"}]

I did this at my final trial:

const rowObj = {}
const result = array.map((subarray) => subarray.map((cell, index) => {
      console.log(cell,index)
      rowObj[columns[index].field] = cell
      return rowObj
    }))

Basically, I was overwriting the same object.

Thanks,

You tried doing it yourself?

Yousaf
– Yousaf

2021-05-12 13:21:35 +00:00
Commented May 12, 2021 at 13:21 — Yousaf
– Yousaf, Commented May 12, 2021 at 13:21
Yes, I did. My result was [ [{}] , [{}] ].

shunshun
– shunshun

2021-05-12 13:23:05 +00:00
Commented May 12, 2021 at 13:23 — shunshun
– shunshun, Commented May 12, 2021 at 13:23
Please include that code in your question.

Yousaf
– Yousaf

2021-05-12 13:24:13 +00:00
Commented May 12, 2021 at 13:24 — Yousaf
– Yousaf, Commented May 12, 2021 at 13:24
Thanks for all of your help

shunshun
– shunshun

2021-05-12 13:53:50 +00:00
Commented May 12, 2021 at 13:53 — shunshun
– shunshun, Commented May 12, 2021 at 13:53

Yousaf · Accepted Answer · 2021-05-12 13:29:36Z

1

One way to do it is to map() over the array_2 and in each iteration:

Create a new object
Iterate over the array_1 to fill the newly created object. You can use the index parameter of the forEach() method's callback function to get the field property from the objects inside array_1.

and then return that object from the callback function of the map() method.

const array_1 = [
  { name: 'Color', field: 'color' },
  { name: 'Shape', field: 'shape' },
  { name: 'Whatever', field: 'whatever' },
];

const array_2 = [
  ['green', 'rectangular', 'whatever1'],
  ['yellow', 'circle', 'whatever2'],
];

const result = array_2.map(arr => {
  const o = {};

  arr.forEach((str, idx) => {
    o[array_1[idx].field] = str;
  });
  
  return o;
}); 

console.log(result);

answered May 12, 2021 at 13:29

Yousaf

29.5k6 gold badges54 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

mickl · Accepted Answer · 2021-05-12 13:25:06Z

1

You can use array.map to iterate both arrays and take advantage of Object.fromEntries to build new objects based on the order of array elements:

array_1 = [{ name: "Color" , field: "color"}, {name: "Shape", field: "shape" }, { name: "Whatever", field: "whatever" }]

array_2 = [["green", "rectangular", "whatever1"], ["yellow", "circle", "whatever2"]]

let result = array_2.map(
      x => Object.fromEntries(
        array_1.map((y,i) => ([y.field, x[i]]))))

console.log(result);

answered May 12, 2021 at 13:25

mickl

50.1k9 gold badges71 silver badges99 bronze badges

Comments

Damiaan Dufaux · Accepted Answer · 2021-05-12 14:15:24Z

Explanation

You could create a function that creates a constructor based on the descriptions of your object's fields like this:

function createConstructor(fieldsDescriptor) {
  return function(fields) {
    fieldsDescriptor.forEach((descriptor, index) => {
      this[descriptor.field] = fields[index]
    })
  }
}

Then you could, for example, make a sampleConstructor that creates objects based on the field names of array_1:

const SampleConstructor = createConstructor(array_1)

And then, for each entry in array_2 you could apply your SampleConstructor:

const result = array_2.map(fields => new SampleConstructor(fields))

Motivation

Creating a dedicated constructor adds some clear semantics to your app, shows readers what you are doing and also stores constructor information in the created objects at runtime.

When you later want to know which constructor made which objects you can just call object.constructor and use this information to determine what kind of objects they are.

For example calling result[0].constructor == SampleConstructor will be true because SampleConstructor is the constructor that created the first result.

Demo

Here is a full demo

const array_1 = [{ name: "Color" , field: "color"}, {name: "Shape", field: "shape" }, { name: "Whatever", field: "whatever" }]
const array_2 = [["green", "rectangular", "whatever1"], ["yellow", "circle", "whatever2"]]

function createConstructor(fieldsDescriptor) {
  return function(fields) {
    fieldsDescriptor.forEach((descriptor, index) => {
      this[descriptor.field] = fields[index]
    })
  }
}

const SampleConstructor = createConstructor(array_1)
const results = array_2.map(fields => new SampleConstructor(fields))
console.log(results)

const EmptyConstructor = createConstructor([])
console.log(results[0].constructor == SampleConstructor)
console.log(results[0].constructor == EmptyConstructor)

srinivast6 · Accepted Answer · 2021-05-12 13:33:40Z

0

You can try this

array_1 = [
      { name: 'Color', field: 'color' },
      { name: 'Shape', field: 'shape' },
      { name: 'Whatever', field: 'whatever' }
    ];
    
    array_2 = [
      ['green', 'rectangular', 'whatever1'],
      ['yellow', 'circle', 'whatever2']
    ];
    
    const keys = array_1.map(item => item.field);
    
    const output = [];
    array_2.forEach(item => {
      const temp = {};
      for (let i = 0; i < keys.length; i++) {
        const key = keys[i];
        const value = item[i];
        temp[key] = value;
      }
      output.push(temp);
    });
    
    console.log(output);

answered May 12, 2021 at 13:33

srinivast6

3471 gold badge3 silver badges13 bronze badges

Collectives™ on Stack Overflow

How to construct an array of objects by using the keys of another array of objects and values from the array of arrays?

4 Answers 4

Comments

Comments

Explanation

Motivation

Demo

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Explanation

Motivation

Demo

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related