Question

I have two objects returned from two different rest resources.

{
"id": 1,
"username": "jdoe"
}

{
"role_id": 1,
"role": "developer",
"members": [
    1,
    3,
    5
]
}

I’d like to use plain ole javascript to combine these two objects based into one where id is in the members array, so that i get back an object like has roles as the top node, then lists users of that role underneath.

Easily done?

Answer 1

I had a similar problem a couple weeks ago with a set of 10 AJAX calls that I wanted to mesh together. A simple method is to create a lookup table from the id values, then use the lookup table to combine the results. Here’s an example using multiple users and multiple roles:

var users = [
    { "id": 1, "username": "jdoe" },
    { "id": 3, "username": "dbob" },
    { "id": 5, "username": "jske" }
];
var roles = [
    { "role_id": 1, "role": "developer", "members": [1,3,5] },
    { "role_id": 2, "role": "admin", "members": [5] }
];

// create lookup table
for (var i = 0; i < users.length; i++)
    users.lookup[users[i].id] = users[i];

// populate members from users with lookup table
for (var i = 0; i < roles.length; i++)
    for (var j = 0; j < roles[i].members.length; j++)
        roles[i].members[j] = users.lookup[roles[i].members[j]];

Now the members in roles are references to the users rather than just the id’s:

[
  { "role_id": 1, "role": "developer", "members":
    [{ "id": 1, "username": "jdoe" },
     { "id": 3, "username": "dbob" },
     { "id": 5, "username": "jske" }] },
  { "role_id": 2, "role": "admin", "members": 
    [{ "id": 5, "username": "jske" }] }
]

And you can reference the usernames in a role like this:

for (var i = 0; i < roles[0].members.length; i++)
    alert(roles[0].members[i].username);

Demo: http://jsfiddle.net/2aqR5/1/