JS converting array of object into another array of objects, using keys of the first one

Question

I know it's a very simple task, but I can't see how to get it. I always get an array with three objects, but all of those objects are identical. So a little help would be truly welcome. I have an array of objects with one key-value pair and want to convert it into an array of objects with two key-value pairs.

what_i_have = [
    {apple: 1.5},
    {lemon: 7},
    {orange: 4}
]

what_i_want = [
    {key: ’apple’, title: ‘apple’},
    {key: ‘lemon’, title: ‘lemon’},
    {key: ‘orange’, title: ‘orange’}
]

Here I attach my last attempts:

Attempt 1:

var attempt_1 = [];
var key_title_object = {};
for(var i in what_i_have){
    key_title_object.key = Object.keys(what_i_have[i])[“0”]; 
            key_title_object.title = Object.keys(what_i_have[i])[“0”]; 
    attempt_1.push(key_title_object)
}

Attempt 2:

var myKeys = [];
for(var i in what_i_have){
    var w = Object.keys(what_i_have[i]])["0"]
    myKeys.push(w)
}

var attempt_2 = [];
var key_title_object = {};
for (var i in myKeys) {
       key_title_object.key = myKeys[i]; 
       key_title_object.title= myKeys[i]; 
       attempt_2.push(key_title_object)
}

Thanks in advance!

punkbit · Accepted Answer · 2017-02-27 00:14:41Z

3

Yes, you can find a working example here, check the snippet:

var foobar = [
    {apple: 1.5},
    {lemon: 7},
    {orange: 4}
]


var x = foobar.map(function (obj) {
 var myKey = Object.keys(obj)[0]
 return {key: myKey, title: myKey}
})

console.log(x)

The output is:

[
  {
    "key": "apple",
    "title": "apple"
  },
  {
    "key": "lemon",
    "title": "lemon"
  },
  {
    "key": "orange",
    "title": "orange"
  }
]

answered Feb 27, 2017 at 0:14

punkbit

7,73711 gold badges58 silver badges97 bronze badges

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

1 Comment

punkbit Over a year ago

@Dubliner your accepted answer has a different result than what you asked. So, I guess your description have a typo, but anyway..all good.

punkbit · Accepted Answer · 2017-02-27 00:52:07Z

2

a = [{ a: 1 }, { b: 2 }];
b = a.map(function(x) {
  for (key in x) {
    return { key: key, title: key };
  }
});
console.log(JSON.stringify(a));
console.log(JSON.stringify(b));

Output:

[{"a":1},{"b":2}]
[{"key":"a","title":1},{"key":"b","title":2}]

edited Feb 27, 2017 at 0:52

punkbit

7,73711 gold badges58 silver badges97 bronze badges

answered Feb 27, 2017 at 0:21

Amir

2423 silver badges11 bronze badges

2 Comments

Amir Over a year ago

@punkbit Seems like the question has been edited while I was providing the answer, but if that's what the OP wants, then your edit should do.

Amir Over a year ago

@Dubliner are you sure you want the same key, title in your output? cuz it generally is not really useful.

nnnnnn · Accepted Answer · 2017-02-27 00:23:58Z

In both attempts the problem is that within the loop you are re-using the same key_title_object object that is created before the loop. Each element that you push into the array refers to the same object.

You just need to create a new object within the loop so that each array element refers to a different object. The smallest change from your current code would be to move the line var key_title_object = {}; into the loop:

what_i_have = [
    {apple: 1.5},
    {lemon: 7},
    {orange: 4}
]
var attempt_1 = [];

for(var i in what_i_have){
    var key_title_object = {};  // <-- this line was before the loop
    key_title_object.key = Object.keys(what_i_have[i])["0"]; 
            key_title_object.title = Object.keys(what_i_have[i])["0"]; 
    attempt_1.push(key_title_object)
}
console.log(attempt_1);

A much neater solution is to use the array .map() method, which calls a function that you supply once per array element, and creates a new array using the values returned by your function:

what_i_have = [
    {apple: 1.5},
    {lemon: 7},
    {orange: 4}
]

var result = what_i_have.map(function(v) {
  var keyName = Object.keys(v)[0]
  return { key: keyName, title: keyName };
});

console.log(result);

guest271314 · Accepted Answer · 2017-02-27 00:43:55Z

1

You can use Array.prototype.map(), Object.entries(), Array.prototype.pop() to get property name of current object to set at returned object within an array

var what_i_want = what_i_have.map(o => Object.entries(o).map(([key]) =>
                    ({key:key, title:key})).pop())

answered Feb 27, 2017 at 0:43

guest271314

1

Collectives™ on Stack Overflow

JS converting array of object into another array of objects, using keys of the first one

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related