5

I have two arrays:

array1 = ["Bob", "John", "Dave"]; array2 = [1, 2, 3]; 

Is there combine the two into a javascript array filled with objects that looks like:

[ {meta: 'Bob', value: 1 }, {meta: 'John', value: 2}, {meta: 'Dave', value: 3} ] 
2
  • 3
    There certainly is and I'd be more than happy to help you understand how. Have you tried anything yourself? Commented Feb 24, 2017 at 21:56
  • While I'm extremely comfortable with handling and juggling array data, I'm the complete opposite when it comes to objects, more so when combining the two. The closest I got was getting one array to be the key and the second to be the value. Commented Feb 24, 2017 at 21:59

5 Answers 5

5

Let's break it down.

You have two arrays of equal length and you want to extract a value from each.

// Could also do array2.length since they're the same size for (var i = 0; i < array1.length; i++) { var val1 = array1[i]; var val2 = array2[i] } 

and you want to create an object using those two values

for (var i = 0; i < array1.length; i++) { var val1 = array1[i]; var val2 = array2[i] var obj = { meta: val1, value: val2 }; } 

Finally, you want to store each of those generated objects in an array

var result = []; for (var i = 0; i < array1.length; i++) { var val1 = array1[i]; var val2 = array2[i] var obj = { meta: val1, value: val2 }; result.push(obj); } 

And now you have your result!

You could rewrite this in a number of ways. For example:

var result = array1.map(function(val1, index) { return { meta: val1, value: array2[index] }; }); 

or if you're in an environment which supports it:

let result = array1.map((val1, index) => ( { meta: val1, value: array2[index] } )); 
Sign up to request clarification or add additional context in comments.

Comments

4

It's one of the ways how to achieve it. You can use Array#forEach function to iterate over every element from array1. Then, create empty object and set specified properties - in your case: meta and value. Then - assign elements to it and just push it into the arr variable.

var array1 = ["Bob", "John", "Dave"], array2 = [1, 2, 3], arr = []; array1.forEach(function(v,i){ var obj = {}; obj.meta = v; obj.value = array2[i]; arr.push(obj); }); console.log(arr);

5 Comments

This was it! Thank you so much! Definitely saving this snippet.
Why would you create an empty object first rather than using an object literal to create all the properties in one statement?
@eeetee Thank you, have a great day (:
@nnnnnn Let me think, I saw that method many times on the Stack, even my JS Guru - Nina Scholz used to set objects this way. Anyways - it's just one of the ways how to solve it.
Upvoting because I think this is the most intuitive for ES5. I actually came looking for a slightly different use case: use the values in array1 as the keys, array2 as the values. ` array1 = ["Bob", "John", "Dave"]; array2 = [1, 2, 3]; var obj = {}; array1.forEach(function(v,i){ {obj[v] = array2[i]}; }); `
2

Simple solution using Array.prototype.map() function:

var array1 = ["Bob", "John", "Dave"], array2 = [1, 2, 3], combined = array1.map(function(v, k, a){ return {meta: v, value: array2[k]}; }); console.log(combined);

Comments

1

You could use an object and iterate the keys and the values.

var array1 = ["Bob", "John", "Dave"], array2 = [1, 2, 3], object = { meta: array1, value: array2 }, result = Object.keys(object).reduce(function (r, k) { object[k].forEach(function (a, i) { r[i] = r[i] || {}; r[i][k] = a; }); return r; }, []); console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }

2 Comments

overcomplicated for such simple case
@RomanPerekhrest, while this may be true for this case, for more properties it might work well.
0

Assuming you're using Chrome, you could do:

const combined = array1.map((name,i) => ({meta: name, value: array2[i]}))

5 Comments

Why Chrome important?
Chrome and Firefox both support that syntax. Not sure about older versions of IE. Specifically const and the fat arrow syntax could be trouble.
while your solution is good, I also wanted to see Ecmascript5 version
IE11 supports const but not arrow functions. MS Edge supports both.
Good to know @nnnnnn

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.