Create Array of Objects using array.push(obj) error

Question

Attempting to create an array of objects from 2 arrays of different lengths. One array has the key values and the other is an array of arrays which stores the values for each key:

var keyArray = ["key1","key2","key3","key4"];
var valuesArray = [{"value1","value2","value3","value4"},{"value5","value6","value7","value8"},{"value9","value10","value11","value12"}];

I am trying to create a new results array with each foo object:

var currentKey; // temp variable
var currentValue; // temp variable
var foo = {}; 
var results = [];

for(var i = 0; i < valuesArray.length; i++) {
  for(var j = 0; j < keyArray.length; j++) {
    currentKey = keyArray[j];
    currentValue = valuesArray[i][j];
    foo[currentKey] = currentValue;
  }
results.push(foo);
}
console.log(results); // results = [{key1: "value9", key2: "value10", key3: "value11", key4: "value12"},{key1: "value9", key2: "value10", key3: "value11", key4: "value12"},{key1: "value9", key2: "value10", key3: "value11", key4: "value12"}]

Expected Results:

console.log(results) // results = [{key1: "value1", key2: "value2", key3: "value3", key4: "value4"},{key1: "value5", key2: "value6", key3: "value7", key4: "value8"},{key1: "value9", key2: "value10", key3: "value11", key4: "value12"}]

For some reason, only the last item in valuesArray ({value9,value10,value11,value12}) gets pushed into the results array

Answer 1

You are updating the same foo object all the time. You should reassign a new object to foo on each iteration of the outer loop:

var keyArray = ["key1","key2","key3","key4"];
var valuesArray = [["value1","value2","value3","value4"
],["value5","value6","value7","value8"],["value9","value10","value11","value12"]];

var currentKey; // temp variable
var currentValue; // temp variable
var foo; 
var results = [];

for(var i = 0; i < valuesArray.length; i++) {
  foo = {};
  for(var j = 0; j < keyArray.length; j++) {
    currentKey = keyArray[j];
    currentValue = valuesArray[i][j];
    foo[currentKey] = currentValue;
  }
  results.push(foo);
}
console.log(results);

You can also use Array.map() to iterate the values array, and Array.reduce() to generate an object for each sub-array:

var keyArray = ["key1","key2","key3","key4"];
var valuesArray = [["value1","value2","value3","value4"
],["value5","value6","value7","value8"],["value9","value10","value11","value12"]];

var results = valuesArray.map(function(s) {
  return keyArray.reduce(function(o, k, i) {
    o[k] = s[i];
  
    return o;
  }, {});
});

console.log(results);