How to convert array into array of objects using .reduce()

Question

How do you convert a multi-dimensional array into an array of objects using .reduce()?

Starting array

[
    [
        ['juice', 'apple'], ['maker', 'motts'], ['price', 12]
    ],
    [
        ['juice', 'orange'], ['maker', 'sunkist'], ['price', 11]
    ]
]

And ending array

[
    {juice: 'apple', maker: 'motts', price: 12},
    {juice: 'orange', maker: 'sunkist', price: 11}
]

This is what I have now. This is really just me shooting in the dark.

var transformData = (array) => {
    var newArray = array.push(function (all, item, index) {
        var newItem = item.reduce(function (all, item, index) {
            all[item[0]] = item[1]
            return all
        }, {})
        return all
    }, [])
    newArray.push(newItem)
    return newArray
}

The odd thing is you think array.push works like array.reduce :p — Jaromanda X
– Jaromanda X, Commented Jul 19, 2017 at 5:57

Rajesh Dixit · Accepted Answer · 2017-07-19 05:58:20Z

1

You can try a combination of array.map and array.reduce.

Array.push is suited to add element to an array, but if you want to transform all elements of an array to a certain specification, its always better to use array.map

var data = [
    [
        ['juice', 'apple'], ['maker', 'motts'], ['price', 12]
    ],
    [
        ['juice', 'orange'], ['maker', 'sunkist'], ['price', 11]
    ]
]

var result = data.map(function(list){
  return list.reduce(function(o, kv){
    o[kv[0]] = kv[1];
    return o;
  }, {});
})

console.log(result)

answered Jul 19, 2017 at 5:58

Rajesh Dixit

25k5 gold badges52 silver badges86 bronze badges

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

1 Comment

ADASFA Over a year ago

This is great. I had something similar to this before, but I was using .reduce() in place of .map().

Nina Scholz · Accepted Answer · 2017-07-19 06:01:33Z

1

You could use Array#map in combination with Object.assign for the properties with a spread syntax ....

var data = [[['juice', 'apple'], ['maker', 'motts'], ['price', 12]], [['juice', 'orange'], ['maker', 'sunkist'], ['price', 11]]], 
    result = data.map(o => Object.assign(...o.map(p => ({ [p[0]]: p[1] }))));

console.log(result);

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

answered Jul 19, 2017 at 6:01

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

2 Comments

Rajesh Dixit Over a year ago

Does Object.assign(...o.map( have any advantages over array.reduce?

Jaromanda X Over a year ago

I knew there was a better way :p by the way ... go all the way with ES2015++ - .map(o => Object.assign(...o.map(([k, v]) => ({ [k]: v })))) (though, it does start looking like "brainf*ck" :p)

Hassan Imam · Accepted Answer · 2017-07-19 06:21:01Z

Here is a solution using reduce and foreach.

var items = [
    [
        ['juice', 'apple'], ['maker', 'motts'], ['price', 12]
    ],
    [
        ['juice', 'orange'], ['maker', 'sunkist'], ['price', 11]
    ]
];


var transformData = items.reduce((newArr, currArr) => {
  var obj = {};
  currArr.forEach((x) => {
    obj[x[0]] = x[1];
  });
  return newArr.concat(obj);
},[]);
console.log(transformData);

A solution using two reduce.

var items = [
    [
        ['juice', 'apple'], ['maker', 'motts'], ['price', 12]
    ],
    [
        ['juice', 'orange'], ['maker', 'sunkist'], ['price', 11]
    ]
];


var transformData = items.reduce((newArr, currArr) => {
  return newArr.concat(currArr.reduce((o, arr) =>{
      o[arr[0]] = arr[1];
      return o;
   }, {}));  
},[]);
console.log(transformData);

You can also change it to reduce instead of forEach const obj = currArr.reduce((a,x) => { a[x[0]] = x[1]; return a },{});
Thanks @GerardBanasig updated the solution using two reduce. :)

Jaromanda X · Accepted Answer · 2017-07-19 06:08:40Z

You're actually close, except you seem to think array.push works like array.reduce - it doesn't

var transformData = array => 
    array.map(subarray => 
        subarray.reduce((result, [key, value]) => {
            result[key] = value;
            return result;
        }, {})
    );

Since you're using some ES2015+ features, I used more ... the destructuring of the inner array [key, value]

I just have to add this "extension" to the best answer so far

const transformData=_=>_.map(_=>Object.assign(..._.map(([$,_])=>({[$]:_}))));

Try reading that in a few months and know what it's doing :p

rino ramadhan · Accepted Answer · 2017-07-19 06:26:21Z

0

try this:

var parray=[
[
    ['juice', 'apple'], ['maker', 'motts'], ['price', 12]
],
[
    ['juice', 'orange'], ['maker', 'sunkist'], ['price', 11]
]
];

var newArray=[]
parray.forEach(function(data){
var cak  =  data.reduce(function(a, b) {
a[b[0]]=b[1]
  return a;
}, {})
newArray.push(cak)
})
console.log(newArray)

answered Jul 19, 2017 at 6:26

rino ramadhan

823 bronze badges

Comments

Mulan · Accepted Answer · 2017-07-19 20:23:59Z

0

Here's a succinct expression using map and reduce along with object spread syntax.

const data = [
  [
    ['juice', 'apple'], ['maker', 'motts'], ['price', 12]
  ],
  [
    ['juice', 'orange'], ['maker', 'sunkist'], ['price', 11]
  ]
]

const data2 =
  data.map (pairs =>
    pairs.reduce ((o, [k,v]) =>
      ({ ...o, [k]: v }), {}))

console.log (data2)

answered Jul 19, 2017 at 20:23

Mulan

136k35 gold badges240 silver badges276 bronze badges

Collectives™ on Stack Overflow

How to convert array into array of objects using .reduce()

6 Answers 6

1 Comment

2 Comments

2 Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

2 Comments

2 Comments

Comments

Comments

Comments

Related