Convert an object into an array of objects, each containing one of the original object's properties and values

Question

So I have an object like this:

var obj = { foo: function() { ... }, bar: function() { ... }, baz: 10 };

I want to convert it to this using vanilla ECMAScript 3 Javascript:

[ 
    { name: "foo", value: function() { ... } }, 
    { name: "bar", value: function() { ... } }, 
    { name: "baz", value: 10 }
]

How can I do this?

Note: It has to work on IE8.

just b\\putting a box i.e var arrayOfObjects = [obj] should do the work. Sorry if not relevant. — user3235186
– user3235186, Commented Jul 27, 2015 at 17:58
@kcube You can't do that - it would make an Array of length 1 with the first item as your whole starting object; i.e. if you tried arrayOfObjects[1]; // undefined which is not desired behaviour — Paul S.
– Paul S., Commented Jul 27, 2015 at 18:05
oops i know that. Just got clear with op's question. In that case, for..in should do. — user3235186
– user3235186, Commented Jul 27, 2015 at 18:12

Paul S. · Accepted Answer · 2015-07-27 17:55:21Z

3

A simple for..in loop will do the trick, it's been around since ECMAScript 1.

function o2a(o) {
    var arr = [],
        k;
    for (k in o) {
        arr.push({'name': k, 'value': o[k]});
    }
    return arr;
}

// Now can do

var obj = { foo: function() { /* ... */ }, bar: function() { /* ... */ }, baz: 10 };
o2a(obj);
// [
//    {name:"foo", value: function.. },
//    {name:"bar", value: function.. },
//    {name:"baz", value: 10}
// ]

edited Jul 27, 2015 at 17:55

answered Jul 27, 2015 at 17:52

Paul S.

66.6k9 gold badges130 silver badges143 bronze badges

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

3 Comments

connexo Over a year ago

Does for..in work in IE8? Can it also be done with a classical for(var i = 0; i < whatever; i++) loop?

Luke Over a year ago

for..in works in IE 8. using a 'classical' loop would not work (unless all of your keys were numbers, which clearly they are not)

Paul S. Over a year ago

Another option you have is that you can always re-implement much of ES5 in browsers that don't support it by using a shim or polyfill. I don't see any other way but using for..in to get the keys of an Object below ES5 though

Luke · Accepted Answer · 2015-07-27 18:09:51Z

1

For future readers who don't need IE 8 support:

use map with Obect.keys():

myArr = Object.keys(obj).map(function(key) { return {name: key, value: obj[key]} } );

edited Jul 27, 2015 at 18:09

answered Jul 27, 2015 at 17:53

Luke

5,7465 gold badges40 silver badges68 bronze badges

3 Comments

Luke Over a year ago

No, I did not see that requirement. Did you just add that in?

connexo Over a year ago

No, I just added the IE8 clarification. The ECMAScript 3 requirement was there from the start.

Luke Over a year ago

sorry about that. Go with @Paul S. answer

Collectives™ on Stack Overflow

Convert an object into an array of objects, each containing one of the original object's properties and values

2 Answers 2

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related