How do I convert a javascript object array to a string array of the object attribute I want?

Question

Possible Duplicate:
Accessing properties of an array of objects

Given:

[{
    'id':1,
    'name':'john'
},{
    'id':2,
    'name':'jane'
}........,{
    'id':2000,
    'name':'zack'
}]

What's the best way to get:

['john', 'jane', ...... 'zack']

Must I loop through and push item.name to another array, or is there a simple function to do it?

Are you sure you need to convert it to an array like that? Oftentimes, doing a conversion like this is an indication that you may be going about your underlying problem the wrong way. It might be useful to take a step back and make sure that's not the case here. — Shauna, Dec 20 '12 at 13:25
@shauna my problem is this. im using bootstrap's typeahead it only access the second format: which is a array of string. my ajax calls will return the first format cuz i need the ID. i can of cuz go and extend boostrap's typeahead but rather do this: send the 2nd format to bootstrap. just keep the first format around and when user selects a choice check this first object and use the id as needed. — PK., Dec 20 '12 at 13:36

score 211 · Accepted Answer · edited Sep 29 '17 at 07:25

211

If your array of objects is items, you can do:

var items = [{
  id: 1,
  name: 'john'
}, {
  id: 2,
  name: 'jane'
}, {
  id: 2000,
  name: 'zack'
}];

var names = items.map(function(item) {
  return item['name'];
});

console.log(names);
console.log(items);

Documentation: map()

edited Sep 29 '17 at 07:25

H. Pauwelyn

13,575
26
81
144

answered Dec 20 '12 at 13:25

techfoobar

65,616
14
114
135

2

@bru.scopelliti `map()` is native JavaScript and not just jQuery. – Sirko Dec 20 '12 at 13:27
2

@bru.scopelliti - my answer has nothing to do with jQuery.. – techfoobar Dec 20 '12 at 13:27
1

that's not jQuery. That's just modern javascript. Cool, huh? – marcus erronius Dec 20 '12 at 13:28
1

@bru.scopelliti: I don't see any jQuery there. – Cerbrus Dec 20 '12 at 13:28
1

since we are using `map` make use of arrow function and we need only single line solution – Akhil Aravind Feb 09 '19 at 13:58
4

You can use more modern syntax like this: names = items.map((item) => item.name); – John Gilmer Jan 29 '21 at 13:35
names = items.map(item => item.name); – Marius Lian Dec 19 '21 at 04:29

score 11 · Answer 2 · answered Dec 20 '12 at 13:25

11

Use the map() function native on JavaScript arrays:

var yourArray = [ {
    'id':1,
    'name':'john'
},{
    'id':2,
    'name':'jane'
}........,{
    'id':2000,
    'name':'zack'
}];

var newArray = yourArray.map( function( el ){ 
                                return el.name; 
                               });

answered Dec 20 '12 at 13:25

Sirko

72,589
19
149
183

How can we map JSON structure like this ? `var yourArray = [ { "options": [ { 'id':2, 'name':'Javascript' },{ 'id':2000, 'name':'Ruby' } ] }];` – H.Husain Feb 09 '19 at 13:32

score 3 · Answer 3 · answered Dec 20 '12 at 13:30

3

You can do this to only monitor own properties of the object:

var arr = [];

for (var key in p) {
    if (p.hasOwnProperty(key)) {
        arr.push(p[key]);
    }
}

answered Dec 20 '12 at 13:30

looper

1,929
23
42

score 0 · Answer 4 · answered Dec 20 '12 at 13:25

You can use this function:

function createStringArray(arr, prop) {
   var result = [];
   for (var i = 0; i < arr.length; i += 1) {
      result.push(arr[i][prop]);
   }
   return result;
}

Just pass the array of objects and the property you need. The script above will work even in old EcmaScript implementations.

How do I convert a javascript object array to a string array of the object attribute I want?

4 Answers4

Linked