reduce key value pairs in JS Array to object

Question

I have one object that I had to take apart into two arrays to handle properly. It looked like this:

{
  city:"stuttgart",
  street:"randomstreet",
  ...
}

Since it needs to fit a certain directive I had to convert it to:

[
  {key:"city", value:"stuttgart"}
  {key:"street", value:"randomstreet"},
  ...
]

for this I first used

var mapFromObjectWithIndex = function (array) {
  return $.map(array, function(value, index) {
    return [value];
  });
};

var mapFromObjectWithValue = function (array) {
  return $.map(array, function(value, index) {
    return [index];
  });
});

to create two arrays, one containing the old key, the other one is holding the old value. Then I created another, two dimensional array map them into a single array doing this

var mapToArray = function (arrayValue, arrayIndex) {
  var tableData = [];
  for (var i = 0; i<arrayIndex.length; i++){
    tableData[i] = {key:arrayIndex[i] , value:arrayValue[i]};
  }
  return tableData;
};

(maybe I have already messed up by here, can this be done any easier?)

Now, I use the array (tableData) to display the data in a form. The value fields can be edited. In the end, I want to convert the array (tableData) to its original. (see first object)

Please note, that the original object doesn't only contain strings as values, but can also contain objects as well.

Just a side note: kyes in objects are not guaranteed to maintain the initial order. So, after converting your object to an array your data may be in random order. — strah
– strah, Commented Aug 9, 2016 at 15:04

rpadovani · Accepted Answer · 2016-08-09 15:17:01Z

12

I think conversion can be definitely easier:

var obj = {
  city:"stuttgart",
  street:"randomstreet",
};

var tableData = Object.keys(obj).map(k => {return {key: k, value: obj[k]}});

console.log(tableData);

var dataBack = {};
tableData.forEach(o => dataBack[o.key] = o.value);

console.log(dataBack);

What do you want to do with objects? Do you want to expand them as well? If yes you can do something like this (and it works with nested objects as well):

var obj = {
  city:"stuttgart",
  street:"randomstreet",
  obj: {a: 'a', b: 'b'},
  subObject: {aha: {z: 'z', y: 'y'}}
};

function trasformToTableData(obj) {
  if (typeof obj !== 'object') return obj;
  return Object.keys(obj).map(k => {return {key: k, value: trasformToTableData(obj[k])}});
}

var tableData = trasformToTableData(obj);
console.log(tableData);

function transformBack(obj) {
  if (Array.isArray(obj)) {
    var support ={};
    for (let i = 0; i < obj.length; i++) {
      support[obj[i].key] = transformBack(obj[i].value)
    }
    return support;
  }
  return obj;
}

var dataBack = {};
tableData.forEach(o => dataBack[o.key] = transformBack(o.value));

console.log(dataBack);

edited Aug 9, 2016 at 15:17

answered Aug 9, 2016 at 15:06

rpadovani

7,4102 gold badges34 silver badges50 bronze badges

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

2 Comments

mchl18 Over a year ago

I think your answer suits me best and is the most complete and flexible. Also thanks for simplifying the whole process extremely. Also the first time I see arrow notation (which, at least Webstorm didn't like, so I rewrote)

rpadovani Over a year ago

@MichaelGerullis glad it helped! Arrows functions are a quite powerful tool of ES6 - not in this example, but they do automatically set the binding of this keyword. Of course they can be changed in normal inline functions

Redu · Accepted Answer · 2016-08-09 15:14:01Z

3

Let's have some fun and turn our object into iterable to do the job as follows;

var input = {city:"stuttgart", street:"randomstreet", number: "42"};
   output = [];
input[Symbol.iterator] = function*(){
                           var ok = Object.keys(this),
                                i = 0;
                           while (i < ok.length) yield {key : ok[i], value: this[ok[i++]]};
                         };
output = [...input];
console.log(output);

edited Aug 9, 2016 at 15:14

answered Aug 9, 2016 at 15:08

Redu

26.3k6 gold badges61 silver badges84 bronze badges

3 Comments

XCS Over a year ago

Can you explain how your answer works? Also, the output doesn't seem to be in the correct form.

Redu Over a year ago

@Cristy Thank you i have corrected the output to show as required. In this snippet i am making an object iterable by assigning it a Symbol.iterator method. This makes iterators such as the for of loop or the spread operator to be able to iterate this object (by invoking the iterator method they get returned an iterator object and keep calling it's next method - AKA generators iterators) They get returned whatever we yield in the Symbol.iterator function (generator function) So that's how it is. :)

mchl18 Over a year ago

i just came back to this after quite some years. Fun code. Yeah. Definitely fun but at the time i had no idea what a generator was.

Joah Gerstenberg · Accepted Answer · 2016-08-09 15:07:53Z

2

This function will map your object to an array when you call objVar.mapToArray(), by using Object.keys() and .map()

Object.prototype.mapToArray = function() {
  return Object.keys(this).map(function(v) {
    return { key: v, value: this[v] };
  }.bind(this));
}

answered Aug 9, 2016 at 15:07

Joah Gerstenberg

4512 silver badges7 bronze badges

1 Comment

Thomas Over a year ago

1st: map() has a second argument, you don't need to bind, 2nd: if you use a fat arrow you don't even need this second argument, and 3rd: Guys, stop extending some native prototypes for every puny little utility you write. Especially don't extend Object's prototype, why? because "wtf".mapToArray() or window.addEventListener.mapToArray() everything inherits it. keep it simple: var mapToArray = obj => Object.keys(obj).map(k => ({ key: k, value: obj[k] }))

Corey Sery · Accepted Answer · 2016-08-09 15:11:45Z

1

I would do something like this:

var dataObj = {
  city:"stuttgart",
  street:"randomstreet",
};

function toKeyValue(obj) {
  var arr = [];
  for (var key in obj) {
    if(obj.hasOwnProperty(key)) {
      arr.push({'key': key, 'value': obj[key]});
    }
  }
  return arr;
}

var arrayKeyValue = toKeyValue(dataObj);
console.log(arrayKeyValue);

answered Aug 9, 2016 at 15:11

Corey Sery

1211 silver badge7 bronze badges

Collectives™ on Stack Overflow

reduce key value pairs in JS Array to object

4 Answers 4

2 Comments

3 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related