javascript: convert two dimensional array to array of objects using the first 'row' to define properties

Question

In order to populate a data-grid that receives array of row objects, I am looking for a good solution to convert an array such as this:

[  
['country', 'population'],
['someplace', 100],
['otherplace', 200]
]

into an array of objects such as this:

[
{country: 'someplace', population: 100},
{country: 'otherplace', population: 200},
]

UPDATE:

this is the solution I am using so far:

 function arrayToRows(arr) {
var defs = [];
var data = [];
var rows = [];
var r;
var obj;



var headerRow = arr.shift(); //remove header row

defs = headerRow.map(function(cell) {
  return {
    field: cell,
    displayName: cell
  }
});


for (var i = 0; i < arr.length; i++) {
  r = arr[i];
  obj = {};

  for (var j = 0; j < defs.length; j++) {
    obj[defs[j].field] = r[j];
  }
  rows.push(obj);
}
return rows;

}

yes, I have solved it, but interested in better solutions. will update answer with my solution.... — CodeToad
– CodeToad, Commented Apr 7, 2014 at 16:02

Bergi · Accepted Answer · 2014-04-07 16:04:19Z

21

var array = [  
    ['country', 'population'],
    ['someplace', 100],
    ['otherplace', 200]
];

var keys = array.shift();
var objects = array.map(function(values) {
    return keys.reduce(function(o, k, i) {
        o[k] = values[i];
        return o;
    }, {});
});

answered Apr 7, 2014 at 16:04

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

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

Comments

Raos · Accepted Answer · 2020-04-08 01:40:58Z

4

let array = [['country', 'population'],['someplace', 100],['otherplace', 200]];
let [keys, ...rows] = array;
let result = rows.map(r => (keys.reduce((o, k, i) => (o[k] = r[i], o), {})));
console.log(result)

answered Apr 8, 2020 at 1:40

Raos

4241 gold badge6 silver badges9 bronze badges

Comments

joseporto · Accepted Answer · 2014-04-07 17:46:24Z

3

Hey by using the library underscore.js (http://underscorejs.org/#object) you can accomplish this really easily like this:

var array = [['country', 'population'],['someplace', 100],['otherplace', 200]];
var output = [];

for(var index=1; index<array.length; index++){
    output.push(_.object(array[0],array[index]));
}

console.log(output);

Checking this link: http://jsfiddle.net/BqA3Y/2/

answered Apr 7, 2014 at 17:46

joseporto

3182 silver badges9 bronze badges

Comments

Patrick Evans · Accepted Answer · 2014-04-07 16:09:56Z

2

Using a combination of map and forEach you can map the subsequent array elements to the columns specified in the first element.

var arr = [  
   ['country', 'population'],
   ['someplace', 100],
   ['otherplace', 200]
];

var cols = arr.shift();
newArr = arr.map(function(element,index){
   var newObj = {};
   element.forEach(function(data,index){
      newObj[cols[index]]=data;
   });
   return newObj;
});

answered Apr 7, 2014 at 16:09

Patrick Evans

42.8k6 gold badges81 silver badges94 bronze badges

Comments

Gaurang Tandon · Accepted Answer · 2014-04-07 16:04:05Z

1

var array = [
    ['country', 'population'],
    ['someplace', 100],
    ['otherplace', 200]
];

var objects = [], one = array[0][0], two = array[0][1];

for (var i = 1, len = array.length; i < len; i++) {
    var object = {};
    object[one] = array[i][0];
    object[two] = array[i][1];
    objects.push(object);
}

console.log(objects);

DEMO

edited Apr 7, 2014 at 16:04

answered Apr 7, 2014 at 15:57

Gaurang Tandon

6,88911 gold badges52 silver badges96 bronze badges

4 Comments

B-M Over a year ago

This isn't exactly an answer to what was asked, if I understand the question correctly. The first row is supposed to be dynamic (not always country/population) so this would not fulfill the needs of the OP.

Gaurang Tandon Over a year ago

@Brett I thought it was just for demonstration. Nevermind, editing.

Bergi Over a year ago

The length of the keys array is probably dynamic as well…

Gaurang Tandon Over a year ago

@Bergi Yep, I should have further modified my code, you are right, but I had gone to sleep. Nevertheless, your answer's much better !

Alex Roth · Accepted Answer · 2014-04-07 16:06:35Z

1

You would need to use a bit of iteration to do this! The following code is an untested example to demonstrate what you would have to do.

function convertToObjectArray(table)
{
    var output = [];

    for(var i = 1; i < table.length; i++)
    {
        var obj = {};
        for(var x = 0; x < table[0].length; x++)
         obj[table[0][x]] = table[i][x];

         output.push(obj);
    }

    return output;
}

Another note with this example is you should edit this, however, to make sure the subsequent arrays are the same length or you could run into null values.

answered Apr 7, 2014 at 16:06

Alex Roth

1621 gold badge2 silver badges8 bronze badges

Comments

Nick Parsons · Accepted Answer · 2021-08-30 06:04:00Z

You can do this pretty nicely with destructuring and Object.fromEntries():

const arr = [ ['country', 'population'], ['someplace', 100], ['otherplace', 200] ];
const [props, ...valsArr] = arr;
const res = valsArr.map(vals => Object.fromEntries(vals.map((val, i) => [props[i], val])));
console.log(res);

Explanation:

const [props, ...valsArr] = arr

This creates two new variables, props being the first value in your array:

['country', 'population']

and valsArr as being the remaining elements in your array:

[ ['someplace', 100], ['otherplace', 200] ]

Next, we use .map() on this array to map each inner [place, population] array to an array of objects. To do this, we use Object.fromEntries() on a mapped version of each [place, population] array. The mapped version of each inner array turns into:

[
  ["country", place],  // props[i] would be 'country' from the above `props` array
  ["population", population] // props[i+1] would be 'population' from the above `props` array
]

The above array of [prop, value] inner arrays can be passed to Object.fromEntries(), which will be an object for you with the keys from the first index and the values from the second index.

Gilberto Avalos · Accepted Answer · 2014-04-07 16:32:54Z

-1

function toObjects (array) {
  var new_array = [];
  var headers = [];

  for(var i = 0; i < array.length; i++){
    var obj = {};
    for(var j = 0; j < array[i].length; j++){
      if(i === 0){
        headers.push(array[i][j]);
      } else {
        obj[headers[j]] = array[i][j];
      }
    }
    if(i > 0){
      new_array.push(obj);
    }
  }
  return new_array;
}

edited Apr 7, 2014 at 16:32

answered Apr 7, 2014 at 15:59

Gilberto Avalos

5123 silver badges7 bronze badges

1 Comment

Bergi Over a year ago

['country', 'population'] is supposed to be dynamic

Collectives™ on Stack Overflow

javascript: convert two dimensional array to array of objects using the first 'row' to define properties

8 Answers 8

Comments

Comments

Comments

Comments

4 Comments

Comments

Explanation:

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

Comments

Comments

Comments

Comments

4 Comments

Comments

Explanation:

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related