How to convert an array of key-value tuples into an object

Question

I have an array:

[ [ 'cardType', 'iDEBIT' ],
  [ 'txnAmount', '17.64' ],
  [ 'txnId', '20181' ],
  [ 'txnType', 'Purchase' ],
  [ 'txnDate', '2015/08/13 21:50:04' ],
  [ 'respCode', '0' ],
  [ 'isoCode', '0' ],
  [ 'authCode', '' ],
  [ 'acquirerInvoice', '0' ],
  [ 'message', '' ],
  [ 'isComplete', 'true' ],
  [ 'isTimeout', 'false' ] ]

But I can't access data via an array's key, e.g. arr['txnId'] does not return 20181. How can I convert the above array of tuples into an object, so that I can easily access data by key.

We have discussion earlier how to convert an Array to Object, You can refer it and have a best solution as per your requirement. stackoverflow.com/questions/4215737/convert-array-to-object — ANR Upgraded Version
– ANR Upgraded Version, Commented Aug 14, 2015 at 4:40

Toph · Accepted Answer · 2022-02-25 06:35:24Z

105

As baao notes, since 2019 you can use Object.fromEntries(arr) (docs) to do exactly this on all modern browsers:

var arr = [['cardType', 'iDEBIT'],
  ['txnAmount', '17.64'],
  ['txnId', '20181']];

console.log(Object.fromEntries(arr));

If that’s not available, my previous solution was to map to an array of key-value objects and combine the objects by spreading into Object.assign:

Object.assign(...arr.map(([key, val]) => ({[key]: val})))

edited Feb 25, 2022 at 6:35

answered Sep 8, 2016 at 18:41

Toph

2,7592 gold badges27 silver badges30 bronze badges

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

7 Comments

Chalk Over a year ago

Computed property names are also used in {[d[0]]: d[1]} :)

royhowie Over a year ago

Object.assign.apply(null, arr.map(([key, val]) => { return { [key]: val } })) is a little easier to read and understand (when spread onto multiple lines).

ctrl-alt-delor Over a year ago

What are the dots ...?

Toph Over a year ago

A similar one-liner (with reduce) which has the advantage of being more chainable: arr.reduce((obj, d) => Object.assign(obj, {[d[0]]: d[1]}), {})

ooo Over a year ago

Object.assign(...array.map( ([key, val]) => ({ [key]: val }) )) — An integration of @Toph's answer and @royhowie's comment.

|

baao · Accepted Answer · 2020-10-01 15:35:46Z

62

Update June 2020

ECMAScript 2021 brings Object.fromEntries which does exactly the requirement:

const array =    [ [ 'cardType', 'iDEBIT' ],
      [ 'txnAmount', '17.64' ],
      [ 'txnId', '20181' ],
      [ 'txnType', 'Purchase' ],
      [ 'txnDate', '2015/08/13 21:50:04' ],
      [ 'respCode', '0' ],
      [ 'isoCode', '0' ],
      [ 'authCode', '' ],
      [ 'acquirerInvoice', '0' ],
      [ 'message', '' ],
      [ 'isComplete', 'true' ],
      [ 'isTimeout', 'false' ] ];
      
const obj = Object.fromEntries(array);
console.log(obj);

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntries

This will do it:

const array =    [ [ 'cardType', 'iDEBIT' ],
      [ 'txnAmount', '17.64' ],
      [ 'txnId', '20181' ],
      [ 'txnType', 'Purchase' ],
      [ 'txnDate', '2015/08/13 21:50:04' ],
      [ 'respCode', '0' ],
      [ 'isoCode', '0' ],
      [ 'authCode', '' ],
      [ 'acquirerInvoice', '0' ],
      [ 'message', '' ],
      [ 'isComplete', 'true' ],
      [ 'isTimeout', 'false' ] ];
    
var obj = {};
array.forEach(function(data){
    obj[data[0]] = data[1]
});
console.log(obj);

edited Oct 1, 2020 at 15:35

answered Aug 14, 2015 at 4:21

baao

73.5k18 gold badges152 silver badges209 bronze badges

2 Comments

Alexander K Over a year ago

Looks like new Map(array) solution below is more straightforward

Ben jamin Over a year ago

Or even the answer with the "reduce"-method

royhowie · Accepted Answer · 2015-09-05 20:18:16Z

46

A more idiomatic approach would be to use Array.prototype.reduce:

var arr = [
  [ 'cardType', 'iDEBIT' ],
  [ 'txnAmount', '17.64' ],
  [ 'txnId', '20181' ],
  [ 'txnType', 'Purchase' ],
  [ 'txnDate', '2015/08/13 21:50:04' ],
  [ 'respCode', '0' ],
  [ 'isoCode', '0' ],
  [ 'authCode', '' ],
  [ 'acquirerInvoice', '0' ],
  [ 'message', '' ],
  [ 'isComplete', 'true' ],
  [ 'isTimeout', 'false' ]
];

var obj = arr.reduce(function (o, currentArray) {
  var key = currentArray[0], value = currentArray[1]
  o[key] = value
  return o
}, {})

console.log(obj)
document.write(JSON.stringify(obj).split(',').join(',<br>'))

This is more visually appealing, when done with ES6 (rest parameters) syntax:

let obj = arr.reduce((o, [ key, value ]) => {
    o[key] = value
    return o
}, {})

edited Sep 5, 2015 at 20:18

answered Aug 14, 2015 at 4:29

royhowie

11.2k14 gold badges54 silver badges67 bronze badges

2 Comments

huygn Over a year ago

cleaner way to avoid param reassign const obj = arr.reduce((obj, [ key, value ]) => { return { ...obj, [key]: value }; }, {});

Nils Magne Lunde Over a year ago

Or even avoid the return statement: const obj = arr.reduce(obj, [key, value] => ({ ...obj, [key]: value }), {})

Paolo · Accepted Answer · 2020-03-02 06:47:47Z

35

Use Map.

new Map(array);

The Map object holds key-value pairs and remembers the original insertion order of the keys. Any value (both objects and primitive values) may be used as either a key or a value.

This works because the type of your variable array is Array<[key,value]>. The Map constructor can be initialized with an array of arrays where the first element of the inner arrays is the key and the second is the value.

const array = [
  ['cardType', 'iDEBIT'],
  ['txnAmount', '17.64'],
  ['txnId', '20181'],
  ['txnType', 'Purchase'],
  ['txnDate', '2015/08/13 21:50:04'],
  ['respCode', '0'],
  ['isoCode', '0'],
  ['authCode', ''],
  ['acquirerInvoice', '0'],
  ['message', ''],
  ['isComplete', 'true'],
  ['isTimeout', 'false']
];

const obj = new Map(array);

console.log(obj.get('txnDate'));

edited Mar 2, 2020 at 6:47

Paolo

21.4k21 gold badges78 silver badges124 bronze badges

answered Aug 14, 2016 at 23:11

Rick Viscomi

8,9224 gold badges42 silver badges57 bronze badges

9 Comments

kashiraja Over a year ago

Don't do this...it's too simple ^^

abalter Over a year ago

@Rick I'm confused here. I just tried this in the console: array = [['a', 1],['b','two'],['c', [3,3,3]]] and then obj = new Map(array);. However, obj.a and obj['a'] are both undefined. So how does this achieve the objective?

abalter Over a year ago

@RickViscomi -- Ok. Did not know about Map object. However, I would say that what most people are looking for is to get a regular JS object.

Rick Viscomi Over a year ago

Not sure what most people are looking for, but the original question is looking for the value '2015/08/13 21:50:04' given the property txnDate and I think this is the most semantic way to do that.

Rick Viscomi Over a year ago

@PA. typeof new Map() // "object" :)

|

Oswaldo · Accepted Answer · 2018-05-31 14:44:56Z

15

arr.reduce((o, [key, value]) => ({...o, [key]: value}), {})

edited May 31, 2018 at 14:44

answered Mar 1, 2017 at 5:32

Oswaldo

3,4165 gold badges29 silver badges37 bronze badges

Comments

Penny Liu · Accepted Answer · 2019-06-19 07:15:06Z

8

With Object.fromEntries, you can convert from Array to Object:

var entries = [
  ['cardType', 'iDEBIT'],
  ['txnAmount', '17.64'],
  ['txnId', '20181'],
  ['txnType', 'Purchase'],
  ['txnDate', '2015/08/13 21:50:04'],
  ['respCode', '0'],
  ['isoCode', '0'],
  ['authCode', ''],
  ['acquirerInvoice', '0'],
  ['message', ''],
  ['isComplete', 'true'],
  ['isTimeout', 'false']
];
var obj = Object.fromEntries(entries);
console.log(obj);

edited Jun 19, 2019 at 7:15

answered Jun 19, 2019 at 7:09

Penny Liu

17.9k5 gold badges89 silver badges109 bronze badges

1 Comment

Joseph Connolly Over a year ago

This is pretty cool, just be aware that as of writing this its status is: Draft. And the comment is: Initial definition in ECMAScript 2019.

Imesh Chandrasiri · Accepted Answer · 2015-08-14 04:21:13Z

3

use the following way to convert the array to an object easily.

var obj = {};
array.forEach(function(e){
   obj[e[0]] = e[1]
})

This will use the first element as the key and the second element as the value for each element.

answered Aug 14, 2015 at 4:21

Imesh Chandrasiri

5,67915 gold badges64 silver badges107 bronze badges

Comments

sudo soul · Accepted Answer · 2019-02-27 23:14:12Z

3

ES5 Version using .reduce()

const object = array.reduce(function(accumulatingObject, [key, value]) {
  accumulatingObject[key] = value;
  return accumulatingObject;
}, {});

edited Feb 27, 2019 at 23:14

answered Feb 27, 2019 at 21:57

sudo soul

1,70215 silver badges20 bronze badges

2 Comments

Paul Kenjora Over a year ago

How do I use this? Sorry, javascript newb, not sure how to call this?

sudo soul Over a year ago

@PaulKenjora Where it says const object = array.reduce ... array is the name of the variable with the original array, and object is the name of the variable you are assigning the new value to. It's already being called, and assigning the value to a new variable object.

A. Moynet · Accepted Answer · 2018-04-25 19:38:42Z

2

Short ES6 way with Airbnb code style

Exemple:

const obj = arr.reduce((prevObj, [key, value]) => ({ ...prevObj, [key]: value }), {});

answered Apr 25, 2018 at 19:38

A. Moynet

4903 silver badges8 bronze badges

Comments

Vaibhav Namburi · Accepted Answer · 2019-04-10 03:53:14Z

2

The new JS API for this is Object.fromEntries(array of tuples), it works with raw arrays and/or Maps

answered Apr 10, 2019 at 3:53

Vaibhav Namburi

212 bronze badges

1 Comment

Keith Dawson Over a year ago

Provide a code sample combining your suggestion with the code from the user that posted the question to make your answer more useful

Anand Dwivedi · Accepted Answer · 2015-08-14 04:24:36Z

1

easiest way to do it where array is of your JSON data :

var obj = {};
array.forEach(function(Data){
obj[Data[0]] = Data[1]
})

answered Aug 14, 2015 at 4:24

Anand Dwivedi

1,50814 silver badges24 bronze badges

Comments

Appeiron · Accepted Answer · 2016-11-14 16:08:27Z

1

I much more recommend you to use ES6 with it's perfect Object.assign() method.

Object.assign({}, ...array.map(([ key, value ]) => ({ [key]: value })));

What happening here - Object.assign() do nothing but take key:value from donating object and puts pair in your result. In this case I'm using ... to split new array to multiply pairs (after map it looks like [{'cardType':'iDEBIT'}, ... ]). So in the end, new {} receives every key:property from each pair from mapped array.

answered Nov 14, 2016 at 16:08

Appeiron

1,0617 silver badges14 bronze badges

Comments

Bhaskar Thakur · Accepted Answer · 2017-06-20 09:51:54Z

1

You could do this easily using array reduce in ES6

In this example we create a reducer function and pass an object '{}' as initial value to the reduce function along with the reducer

const arr =    [ [ 'cardType', 'iDEBIT' ],
  [ 'txnAmount', '17.64' ],
  [ 'txnId', '20181' ],
  [ 'txnType', 'Purchase' ],
  [ 'txnDate', '2015/08/13 21:50:04' ],
  [ 'respCode', '0' ],
  [ 'isoCode', '0' ],
  [ 'authCode', '' ],
  [ 'acquirerInvoice', '0' ],
  [ 'message', '' ],
  [ 'isComplete', 'true' ],
  [ 'isTimeout', 'false' ] ];

const reducer = (obj, item) => {
  obj[item[0]] = item[1];
  return obj;
};

const result = arr.reduce(reducer, {});

console.log(result);

edited Jun 20, 2017 at 9:51

answered Jun 20, 2017 at 9:28

Bhaskar Thakur

112 bronze badges

Comments

Mohamed.Abdo · Accepted Answer · 2021-06-28 08:18:26Z

0

let obj ={'abc':123,'other':566};

// first way
let coll= Object.entries(obj).map(i=>Object.assign({'key':i[0],'value':i[1]}))

results: coll => 
0: {key: "abc", value: 123}
1: {key: "other", value: 566}

// second way
let coll2= new Map(Object.entries(obj))
results: coll2 =? 
//[[Entries]]
0: {"abc" => 123}
1: {"other" => 566}

answered Jun 28, 2021 at 8:18

Mohamed.Abdo

2,2201 gold badge21 silver badges12 bronze badges

Collectives™ on Stack Overflow

How to convert an array of key-value tuples into an object

14 Answers 14

7 Comments

Update June 2020

2 Comments

2 Comments

9 Comments

Comments

1 Comment

Comments

2 Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

14 Answers 14

7 Comments

Update June 2020

2 Comments

2 Comments

9 Comments

Comments

1 Comment

Comments

2 Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Linked

Related