Search code examples
javascriptangularjsjsonunderscore.jsarray-merge

Merge two Arrays using underscore.js in AngularJS

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: enter image description here

Solution

  • 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);