Combining two arrays to form a javascript object

Question

I have two arrays:

var columns = ["Date", "Number", "Size", "Location", "Age"];

var rows = [["2001", "5", "Big", "Sydney", "25"],["2005", "2", "Med", "Melbourne", "50"],["2012", "20", "Huge", "Brisbane", "80"]];

I'm trying to combine them into a javascript object for each item in the rows array. After that, I want to push each object into a new array.

Like:

var newarray = [];

//'thing' should be the same structure for each row item
var thing = {
   "Date" : "2001",
   "Number" : "5",
   "Size":"Big",
   "Location":"Sydney",
   "Age":"25"
}

newarray.push(thing);

I can do this when I know the names of the columns, but I need to be able to store the data in this way when the column name is unknown - i.e. based on the indexes of the columns array.

I tried it like this before:

       for(var y = 0; y < rows.length; y++){

            for(var i = 0; i < columns.length; i++){
                 thing[columns[i]] = rows[i][i];
           }
              newarray.push(thing)
       }

The code above only stored the first item again and again (according to rows.length).

I don't understand how to combine the column names with the rows to create an array of objects. The fact that 'rows' contains arrays is especially confusing..

Answer 1

You could as well do this in a more data-centric manner:

var columns = ["Date", "Number", "Size", "Location", "Age"];

var rows = [
  ["2001", "5", "Big", "Sydney", "25"],
  ["2005", "2", "Med", "Melbourne", "50"],
  ["2012", "20", "Huge", "Brisbane", "80"]
];

var result = rows.map(function(row) {
  return row.reduce(function(result, field, index) {
    result[columns[index]] = field;
    return result;
  }, {});
});

This way you would not have to deal with the temporary arrays.

In case your code should work on ancient browsers as well, I'd recommend to take a look at underscore.js for using map + reduce.