How to convert an object into an array in JavaScript?

Question

When I console.log on a variable called "source" I get the following:

[Object {
    name = "Yahoo", value = "yahoo"
},
Object {
    name = "yahtzee", value = "yahtzee"
},
Object {
    name = "Yakov Smirnoff", value = "yakov-smirnoff"
},
Object {
    name = "Yarbrough", value = "yarbrough"
},
Object {
    name = "yard sales", value = "yard-sales"
},
Object {
    name = "yarmulke", value = "yarmulke"
},
Object {
    name = "yawning", value = "yawning"
},
Object {
    name = "Yeah Yeah Yeahs", value = "yeah-yeah-yeahs"
},
Object {
    name = "Yeardly Smith", value = "yeardly-smith"
},
Object {
    name = "YearOne", value = "yearone"
},
Object {
    name = "Yeasayer", value = "yeasayer"
},
Object {
    name = "yelle", value = "yelle"
},
Object {
    name = "yelling", value = "yelling"
},
Object {
    name = "yellowpages", value = "yellowpages"
},
Object {
    name = "yellowstone", value = "yellowstone"
},
Object {
    name = "yemen", value = "yemen"
},
Object {
    name = "Yeoman", value = "yeoman"
},
Object {
    name = "Yes Dear", value = "yes-dear"
},
Object {
    name = "Yes Men", value = "yes-men"
},
Object {
    name = "yeti", value = "yeti"
},
Object {
    name = "yiddish", value = "yiddish"
},
Object {
    name = "ymca", value = "ymca"
},
Object {
    name = "yodeling", value = "yodeling"
},
Object {
    name = "yoga", value = "yoga"
},
Object {
    name = "yogurt", value = "yogurt"
},
Object {
    name = "Yoko Ono", value = "yoko-ono"
},
Object {
    name = "Yo-Landi Vi$$er", value = "yo-landi-vier"
},
Object {
    name = "yo momma", value = "yo-momma"
},
Object {
    name = "YONKERS", value = "yonkers"
},
Object {
    name = "yosemite", value = "yosemite"
},
Object {
    name = "yoshimoto", value = "yoshimoto"
},
Object {
    name = "Yoshio Yoda", value = "yoshio-yoda"
},
Object {
    name = "you got served", value = "you-got-served"
},
Object {
    name = "YourDailyLaughz", value = "yourdailylaughz"
},
Object {
    name = "yourfavorite", value = "yourfavorite"
},
Object {
    name = "Yoursie Thomas", value = "yoursie-thomas"
},
Object {
    name = "You Suck at Photoshop", value = "you-suck-at-photoshop"
},
Object {
    name = "Youth in Revolt", value = "youth-in-revolt"
},
Object {
    name = "Youtube Next Lab", value = "youtube-next-lab"
},
Object {
    name = "YSAP", value = "ysap"
},
Object {
    name = "yt3d:aspect=16:9", value = "yt3daspect169"
},
Object {
    name = "yt3d:enable=true", value = "yt3denabletrue"
},
Object {
    name = "yt3d:metadata=user", value = "yt3dmetadatauser"
},
Object {
    name = "yt3d:swap=true", value = "yt3dswaptrue"
},
Object {
    name = "y tu mama tambien", value = "y-tu-mama-tambien"
},
Object {
    name = "YuGiOh", value = "yugioh"
},
Object {
    name = "Yugo Koral", value = "yugo-koral"
},
Object {
    name = "Yuri Baranovsky", value = "yuri-baranovsky"
},
Object {
    name = "Yvan Attal", value = "yvan-attal"
},
Object {
    name = "Yvette Nicole Brown", value = "yvette-nicole-brown"
},
Object {
    name = "yvonne de carlo", value = "yvonne-de-carlo"
}]

If I stringify it first before console.logging it:

JSON.stringify(source);

I get:

[{
    "name": "Yahoo",
    "value": "yahoo"
}, {
    "name": "yahtzee",
    "value": "yahtzee"
}, {
    "name": "Yakov Smirnoff",
    "value": "yakov-smirnoff"
}, {
    "name": "Yarbrough",
    "value": "yarbrough"
}, {
    "name": "yard sales",
    "value": "yard-sales"
}, {
    "name": "yarmulke",
    "value": "yarmulke"
}, {
    "name": "yawning",
    "value": "yawning"
}, {
    "name": "Yeah Yeah Yeahs",
    "value": "yeah-yeah-yeahs"
}, {
    "name": "Yeardly Smith",
    "value": "yeardly-smith"
}, {
    "name": "YearOne",
    "value": "yearone"
}, {
    "name": "Yeasayer",
    "value": "yeasayer"
}, {
    "name": "yelle",
    "value": "yelle"
}, {
    "name": "yelling",
    "value": "yelling"
}, {
    "name": "yellowpages",
    "value": "yellowpages"
}, {
    "name": "yellowstone",
    "value": "yellowstone"
}, {
    "name": "yemen",
    "value": "yemen"
}, {
    "name": "Yeoman",
    "value": "yeoman"
}, {
    "name": "Yes Dear",
    "value": "yes-dear"
}, {
    "name": "Yes Men",
    "value": "yes-men"
}, {
    "name": "yeti",
    "value": "yeti"
}, {
    "name": "yiddish",
    "value": "yiddish"
}, {
    "name": "ymca",
    "value": "ymca"
}, {
    "name": "yodeling",
    "value": "yodeling"
}, {
    "name": "yoga",
    "value": "yoga"
}, {
    "name": "yogurt",
    "value": "yogurt"
}, {
    "name": "Yoko Ono",
    "value": "yoko-ono"
}, {
    "name": "Yo-Landi Vi$$er",
    "value": "yo-landi-vier"
}, {
    "name": "yo momma",
    "value": "yo-momma"
}, {
    "name": "YONKERS",
    "value": "yonkers"
}, {
    "name": "yosemite",
    "value": "yosemite"
}, {
    "name": "yoshimoto",
    "value": "yoshimoto"
}, {
    "name": "Yoshio Yoda",
    "value": "yoshio-yoda"
}, {
    "name": "you got served",
    "value": "you-got-served"
}, {
    "name": "YourDailyLaughz",
    "value": "yourdailylaughz"
}, {
    "name": "yourfavorite",
    "value": "yourfavorite"
}, {
    "name": "Yoursie Thomas",
    "value": "yoursie-thomas"
}, {
    "name": "You Suck at Photoshop",
    "value": "you-suck-at-photoshop"
}, {
    "name": "Youth in Revolt",
    "value": "youth-in-revolt"
}, {
    "name": "Youtube Next Lab",
    "value": "youtube-next-lab"
}, {
    "name": "YSAP",
    "value": "ysap"
}, {
    "name": "yt3d:aspect=16:9",
    "value": "yt3daspect169"
}, {
    "name": "yt3d:enable=true",
    "value": "yt3denabletrue"
}, {
    "name": "yt3d:metadata=user",
    "value": "yt3dmetadatauser"
}, {
    "name": "yt3d:swap=true",
    "value": "yt3dswaptrue"
}, {
    "name": "y tu mama tambien",
    "value": "y-tu-mama-tambien"
}, {
    "name": "YuGiOh",
    "value": "yugioh"
}, {
    "name": "Yugo Koral",
    "value": "yugo-koral"
}, {
    "name": "Yuri Baranovsky",
    "value": "yuri-baranovsky"
}, {
    "name": "Yvan Attal",
    "value": "yvan-attal"
}, {
    "name": "Yvette Nicole Brown",
    "value": "yvette-nicole-brown"
}, {
    "name": "yvonne de carlo",
    "value": "yvonne-de-carlo"
}]

Is there any way I can convert source into an array that looks like:

["Yahoo", "yahtzee", "Yakov Smirnoff", etc...]

Basically I just need the "name"s and not the "value"s, and I need them all in one array. How can this be done?

If you want to use underscore.js: `_.pluck(arr, "name")`. – pimvdb Mar 07 '12 at 18:10 — pimvdb, Mar 07 '12 at 18:10

Linus Thiel · Answer 1 · 2018-09-22T08:32:15.707

21

As an alternative to the other answers, you could use Array.prototype.map. Note, though, that it's fairly new and not available in older browsers -- for these, I recommend es5-shim.

var names = source.map(function(item) { return item.name });

Update: With ES6, it would look something like this:

const names = source.map(item => item.name)

edited Sep 22 '18 at 08:32

answered Mar 07 '12 at 18:13

Linus Thiel

38,647
9
109
104

score 17 · Accepted Answer · answered Mar 07 '12 at 18:09

17

Just use a simple for loop:

var arr = [];
for (var i = 0; i < objects.length; i++) {
    arr.push(objects[i].name);
}

answered Mar 07 '12 at 18:09

Niko

26,516
9
93
110

thanks this works, as a variation would you know how to get back an object that looks like this: Yahoo,yahtzee,Yakov Smirnoff instead of an array that looks like this: ["Yahoo", "yahtzee", "Yakov Smirnoff"] ? – Mar 07 '12 at 18:28
2

@JakeRow123 An object doesn't really make sense because each property would need a name and a value. An array is more appropriate for this type of collection. What is the object to be used for? – Michael Berkowski Mar 07 '12 at 18:49

score 9 · Answer 3 · answered Jul 06 '20 at 06:55

Update 06 July 2020

In ES6, there are three (3) variations to convert an Object to an Array as follows:

const MyObjects = {   key1: 'value 1',   key2: 'value 2', };

// Method 1: Converts the keys to Array
// --------------------------------------

Object.keys(MyObjects);
// ['key1', 'key2']

// Method 2 Converts the Values to Array
// --------------------------------------

Object.values(MyObjects);
// ['value 1', 'value 2']

// Method 3 Converts both Values and Keys
// --------------------------------------

Object.entries(MyObjects);
// [ ['key1', 'value 1'], ['key2', 'value 2'] ]

Converting an Array back to an Object can be done as follows:

const array = [  ['one', 1],   ['two', 2], ];

Object.fromEntries(array);

// { one: 1, two: 2 }

Michael Berkowski · Answer 4 · 2012-03-07T18:14:51.570

4

Your outer structure is an array containing a bunch of object literals. Push the name property of each object literal onto a new array, via a simple for loop.

var outArray = [];
for (i=0; i<inArray.length; i++ {
  outArray.push(inArray[i].name);
}

console.log(outArray);

edited Mar 07 '12 at 18:14

answered Mar 07 '12 at 18:09

Michael Berkowski

267,341
46
444
390

score 1 · Answer 5 · answered Mar 07 '12 at 18:10

1

var result = [];

for (var i in source)
  result.push(source[i].name);

answered Mar 07 '12 at 18:10

Ohas

1,887
4
21
29

4

It's generally discouraged to use javascript's `for(... in ...)` for arrays. Use `map`, `filter` etc, or a regular `for` loop for arrays, and `for(... in ...)` for objects. – Linus Thiel Mar 07 '12 at 18:15

How to convert an object into an array in JavaScript?

5 Answers5

Update 06 July 2020

Linked