Merge two Arrays using underscore.js in AngularJS

Question

I have two api requests and both gets a result of JSON. The first request is "account" request and second is "Container" request. Now:

• Request for all Accounts (accountid: 1, name: account1, blabla)
• Request for all Containers (accountid: 1, name: Container1, blabla)

This is the result JSON of Accounts:

account: [
{
    accountId: "123456789",
    fingerprint: null,
    name: "Account2",
    path: "accounts/123456789",
},

This is the result JSON of Containers:

{
    accountId: "123456789",
    containerId: "123****",
    domainName: null,
    fingerprint: "123*****",
    name: "Container23",
    path: "accounts/123456789/containers/123******",
    publicId: "GTM-****"
},

As you can see the container result contains the accountid so im trying to merge those two results so it becomes this combined (container):

{
    accountId: "123456789",
    name: "Account2",           <------ THIS is what i want to merge
    containerId: "123****",
    domainName: null,
    fingerprint: "123*****",
    name: "Container23",
    path: "accounts/123456789/containers/123******",
    publicId: "GTM-****"
},

Remember there are many containers and accounts not just one block.

What i have tried using underscore:

var mergedList = _.map($scope.GTMcontainers, function(data){
                                return _.extend(data, _.findWhere($scope.account, { id: data.accountId }));
                            });
                            console.log(mergedList);

Here is my AngularJS

function getContainer() {
   $http.get("http://******")
        .then(function (response) {
            $scope.GTMcontainers = response.data;
            console.log(response);
            $scope.loading = false;
        })
        .then(function () {
            $http.get("http://******")
                .then(function (response2) {
                    $scope.account = response2.data;
                    console.log(response2);

                    var mergedList = _.map($scope.GTMcontainers, function(data){
                        return _.extend(data, _.findWhere($scope.account, { id: data.accountId }));
                    });
                    console.log(mergedList);
                })
        })
}

Using this underscore gives me exactly the same JSON result as i requested (no merge).

Hope some one has experience with this.

Thanks

Updated:

Answer 1

I have faced that issue, I knew I have got responses, but data was not merged. So I have used callbacks.

    function getContainer(callback) {
       $http.get("http://******")
            .then(function (response) {
                $scope.GTMcontainers = response.data;
                console.log(response);
                $scope.loading = false;
            })
            .then(function () {
                $http.get("http://******")
                    .then(function (response2) {
                        $scope.account = response2.data;
                        console.log(response2);
                        if(response && response2){
                        callback(response,response2);
}


                    })
            })
    }

At function call time--

getContainer(function(array1,array2){
   if(array1 && array2 && array1.length>0 && array2.length>0){
var mergedList = _.map(array1, function(data){
                                return _.extend(data, _.findWhere(array2, { id: data.accountId }));
                            });
                            console.log(mergedList);
}
})

Answer 2

using simple javascript

var accounts = [
{
accountId: "123456789",
fingerprint: null,
name: "Account2",
path: "accounts/123456789",
},{
accountId: "123456780",
fingerprint: null,
name: "Account3",
path: "accounts/123456789",
}]

var containers =[{
accountId: "123456789",
containerId: "123****",
domainName: null,
fingerprint: "123*****",
name: "Container23",
path: "accounts/123456789/containers/123******",
publicId: "GTM-****"
},{
accountId: "123456780",
containerId: "123****",
domainName: null,
fingerprint: "123*****",
name: "Container24",
path: "accounts/123456789/containers/123******",
publicId: "GTM-****"
}]

var result=[];
containers.forEach(function(item){
var temp=accounts.find(function(d){return d.accountId == item.accountId});
if(temp)
item.name = temp.name;
result.push(item);
})

console.log(result);