Javascript merge the values of 4 arrays into one object

Question

I have 4 arrays of the following format

arr1 = ['Hello', 'World', 'Hi']
arr2 = ['1', '2', '3']
arr3 = ['foo', 'bar', 'foobar']
arr4 = ['10', '20', '30']

I am trying to add each value at index[i] to a new object, the object looks like this

obj = {
 title: '',
 score: '',
 description: '',
 value: '',
}

For each indexed value in the array I would like to push it to a new instance of the obj object so I can end up with this

objects = [
 {
  title: 'Hello',
  score: '1',
  description: 'foo',
  value: '10',
 },
 {
  title: 'World',
  score: '2',
  description: 'bar',
  value: '20',
 },
 {
  title: 'Hi',
  score: '3',
  description: 'foobar',
  value: '30',
 }
]

So far I have been trying something like

objects = []
arr1.forEach((key, i) => objects[key] = arr2[i])

But that is assigning them as arr1val : arr2val

I will ultimately be setting this to state in my react app and passing it to another component as props to render on the page. The data is coming in from 3 different APIs, I am doing this to try and standardise the data received from each API so my component can use the data to render an articles list and user can switch between feeds.

Abdennour TOUMI · Accepted Answer · 2017-11-26 07:48:38Z

3

Map by the index of element across all arrays, also use map not forEach:

const objects = arr1.map((element, index) => (
 {title: element, score: arr2[index], description: arr3[index], value: arr4[index]}
))

Live demo is below:

const arr1 = ['Hello', 'World', 'Hi']
const  arr2 = ['1', '2', '3']
const arr3 = ['foo', 'bar', 'foobar']
const arr4 = ['10', '20', '30']

const objects = arr1.map((element, index) => (
 {title: element, score: arr2[index], description: arr3[index], value: arr4[index]}
))

console.log(objects)

answered Nov 26, 2017 at 7:48

Abdennour TOUMI

94.5k42 gold badges271 silver badges274 bronze badges

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

1 Comment

S.Gou Over a year ago

Yes! Thank you very much this works perfectly. Much appreciated.

Firemen26 · Accepted Answer · 2017-11-26 07:54:34Z

2

This code also works:

var arr = [];
for(var i=0; i<arr1.length; i++) {
    arr[i] = {};
    arr[i].title = arr1[i];
    arr[i].score = arr2[i];
    arr[i].description = arr3[i];
    arr[i].value = arr4[i];
}

answered Nov 26, 2017 at 7:54

Firemen26

1,05512 silver badges21 bronze badges

1 Comment

user1636522 Over a year ago

I prefer a good old for loop indeed. No need to bring out the big guns of fake functional programming :-)

Nina Scholz · Accepted Answer · 2017-11-26 08:46:55Z

I suggest to use an array of arrays and another array for the keys. This allows an arbitrary count of arrays and keys to use for transforming the data into an array of objects with hte wanted properties.

var array1 = ['Hello', 'World', 'Hi'],
    array2 = ['1', '2', '3'],
    array3 = ['foo', 'bar', 'foobar'],
    array4 = ['10', '20', '30'],
    keys = ['title', 'score', 'description', 'value'],
    result = [array1, array2, array3, array4].reduce(function (r, a, i) {
        a.forEach(function (v, j) {
            r[j] = r[j] || {};
            r[j][keys[i]] = v;
        });
        return r;
    }, []);

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

janos · Accepted Answer · 2017-11-26 08:01:02Z

0

If you don't want to type the property names twice, you could do like this:

const descriptor = {
  title: arr1,
  score: arr2,
  description: arr3,
  value: arr4
};

const objects = arr1.map((tmp, i) => {
  var o = {};
  Object.keys(descriptor).forEach(name => o[name] = descriptor[name][i]);
  return o;
});

answered Nov 26, 2017 at 8:01

janos

126k31 gold badges242 silver badges253 bronze badges

Comments

KooiInc · Accepted Answer · 2017-11-26 08:05:26Z

A reducer method would be in place I suppose

const arr1 = ['Hello', 'World', 'Hi', 'Hello2', 'World2', 'Hi2'];
const arr2 = ['1', '2', '3', '11', '22', '33'];
const arr3 = ['foo', 'bar', 'foobar', 'sea', 'shell', 'sea weed'];
const arr4 = ['10', '20', '30', '100', '200', '300'];

const arrays2Objects = arr1.reduce( (obj, next, i) =>  
  obj.concat({title: next, score: arr2[i], description: arr3[i], value: arr4[i]}),
  []
);

console.log(arrays2Objects);

Collectives™ on Stack Overflow

Javascript merge the values of 4 arrays into one object

5 Answers 5

1 Comment

1 Comment

1 Comment

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

1 Comment

1 Comment

Comments

Comments

Related