Pluck JavaScript object items into separate arrays

Question

I need to take an array of objects like this...

var users = [{
    id: 0,
    full_name: 'None',
    gravatar_url: 'http://gravatar.com/avatar/31b64e4876d603ce78e04102c67d6144?s=80'
},
{
    id: 1,
    full_name: 'Jason Davis',
    gravatar_url: 'http://gravatar.com/avatar/31b64e4876d603ce78e04102c67d6144?s=80'
},
{
    id: 2,
    full_name: 'Eric',
    gravatar_url: 'http://gravatar.com/avatar/31b64e4876d603ce78e04102c67d6144?s=80'
}];

and build these 3 arrays from the objects above. The array key number should match on all. So array with full_name = Jason Davis should match array key 1 on the ID array

THe idea is I should be able to rebuild the objects above by doing this...

id[1]
full_name[1]  
gravatar_url[1]

these above should all map to the object with user Jason Davis.

var id = [0, 1, 2];

var full_name = [
     'None',
     'Jason Davis',
     'Eric'
];

var gravatar_url = [
    'http://gravatar.com/avatar/31b64e4876d603ce78e04102c67d6144?s=80',
    'http://gravatar.com/avatar/31b64e4876d603ce78e04102c67d6144?s=80',
    'http://gravatar.com/avatar/31b64e4876d603ce78e04102c67d6144?s=80'
];

The Reasoning

I am building this using a popover selector library...

The library only accepts a single array of data which is shown as each item. In this image it is the user name.

(to clarify, the image above I added the thumbnail images into the DOM manually, the library does not accept a 2nd data on each item yet)

By doing what my question ask, I can assign the user image to another array

The library builds the items HTML like this...

        for (var i in this.options.items) {
            var itemElement = $(this.options.templates.pickerItem);
            itemElement.find('i').html(this.options.items[i]);
            itemElement.data('pickerValue', this.options.items[i])
                    .on('click.picker', itemClickFn);
            this.picker.find('.picker-items').append(itemElement);
        }

It calls this.options.items[i] to get the name. If I have my own 2nd array of images I can use the key to show the correct user image with its name!

What problem are you having? Just loop through the original array, and push each property onto the corresponding array. — Barmar, Oct 28 '15 at 04:32
Please update the question with your attempted solution, so we can help you fix it. — Barmar, Oct 28 '15 at 04:41

score 2 · Answer 1 · answered Oct 28 '15 at 04:35

The simplest way would be to loop over your array and insert each property into an appropriate array:

var id = [], full_name = [], gravatar_url = [];
for(var i = 0; i < users.length; i++) {
    var u = users[i];                 
    id.push(u.id);
    full_name.push(u.full_name);
    gravatar_url.push(u.gravatar_url);
}

score 1 · Answer 2 · answered Oct 28 '15 at 04:34

You can use .map for this

Try like this

var id=users.map(function(x){ return x.id; });
console.log(id);
var full_name=users.map(function(x){ return x.full_name; });
console.log(full_name);
var gravatar_url=users.map(function(x){ return x.gravatar_url; });
console.log(gravatar_url);

Snippet

var users = [{
    id: 0,
    full_name: 'None',
    gravatar_url: 'http://gravatar.com/avatar/31b64e4876d603ce78e04102c67d6144?s=80'
},
{
    id: 1,
    full_name: 'Jason Davis',
    gravatar_url: 'http://gravatar.com/avatar/31b64e4876d603ce78e04102c67d6144?s=80'
},
{
    id: 2,
    full_name: 'Eric',
    gravatar_url: 'http://gravatar.com/avatar/31b64e4876d603ce78e04102c67d6144?s=80'
}];

var id=users.map(function(x){ return x.id; });
console.log(id);
var full_name=users.map(function(x){ return x.full_name; });
console.log(full_name);
var gravatar_url=users.map(function(x){ return x.gravatar_url; });
console.log(gravatar_url);

score 1 · Answer 3 · answered Oct 28 '15 at 04:35

1

You can use the map functionality here.

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

Now the names is the array of full_names as you intended.

answered Oct 28 '15 at 04:35

Ash

2,575
2
19
27

bozzmob · Accepted Answer · 2015-10-28T04:46:13.237

This is a simple way of doing things.

The process is-

Read the array, store the data into specific arrays as needed. Access them using index.

var users = [{
    id: 0,
    full_name: 'None',
    gravatar_url: 'http://gravatar.com/avatar/31b64e4876d603ce78e04102c67d6144?s=80'
},
{
    id: 1,
    full_name: 'Jason Davis',
    gravatar_url: 'http://gravatar.com/avatar/31b64e4876d603ce78e04102c67d6144?s=80'
},
{
    id: 2,
    full_name: 'Eric',
    gravatar_url: 'http://gravatar.com/avatar/31b64e4876d603ce78e04102c67d6144?s=80'
}];

var id_arr=[];
var name_arr=[];
var gravatar_url_arr=[];

for (var i=0; i<users.length;i++)
{
  id_arr[i] = users[i].id;
  name_arr[i] = users[i].full_name;
  gravatar_url_arr[i] = users[i].gravatar_url;
}

//Displaying all arrays
console.log(id_arr);
console.log(name_arr);
console.log(gravatar_url_arr);

//Get's the result what you need
console.log(id_arr[1]);
console.log(name_arr[1]);
console.log(gravatar_url_arr[1]);

Demo - JSFiddle

[why is using for-in with array iteration a bad idea?](http://stackoverflow.com/questions/500504/why-is-using-for-in-with-array-iteration-such-a-bad-idea?lq=1) — Barmar, Oct 28 '15 at 04:40
@Barmar Updated the optimal code. Thanks for the info. I didn't know that. Added a JSFiddle link as well for more clarity demo. — bozzmob, Oct 28 '15 at 04:47

score 0 · Answer 5 · answered Oct 28 '15 at 08:14

Try using for loop , while loop , Object.keys()

var len = users.length, max = len * len, res = [];
for (var i = 0, j = len; i < max; i++) {
   if (!res[i % j]) {
     res[i % j] = Array();
     var k = 0;
     while (k < len) {
       res[i % j][k] = users[k][Object.keys(users[i % j])[i % j]];
       ++k;
     } 
   } 
}

var id = res[0], full_name = res[1], gravatar = res[2];

var users = [{
  id: 0,
  full_name: 'None',
  gravatar_url: 'http://gravatar.com/avatar/31b64e4876d603ce78e04102c67d6144?s=80'
}, {
  id: 1,
  full_name: 'Jason Davis',
  gravatar_url: 'http://gravatar.com/avatar/31b64e4876d603ce78e04102c67d6144?s=80'
}, {
  id: 2,
  full_name: 'Eric',
  gravatar_url: 'http://gravatar.com/avatar/31b64e4876d603ce78e04102c67d6144?s=80'
}];

var len = users.length, max = len * len, res = [];
for (var i = 0, j = len; i < max; i++) {
   if (!res[i % j]) {
     res[i % j] = Array();
     var k = 0;
     while (k < len) {
       res[i % j][k] = users[k][Object.keys(users[i % j])[i % j]];
       ++k;
     } 
   } 
}

var id = res[0], full_name = res[1], gravatar = res[2];

console.log(JSON.stringify(res, null, 2)
            ,"\n\n", id[1], full_name[1], gravatar[1])

Pluck JavaScript object items into separate arrays

5 Answers5