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:

jitender · Accepted Answer · 2017-10-25 13:02:47Z

1

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

answered Oct 25, 2017 at 13:02

jitender

10.4k1 gold badge21 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Asim Over a year ago

i did like this: var temp=$scope.account.find(function(d){return d.accountId == item.accountId}); but got this error: o.account.find is not a function

jitender Over a year ago

Log to console $scope.acount and see the output it should work if this is an array

Asim Over a year ago

if i want to remove the first result just keep the container response? because now both results are merged and kept.

Asim Over a year ago

check the update in question so you can understand better :) @jitender

jitender Over a year ago

@Asim i don't get what you exactly trying to do now you want as many records as container have?

|

Vikas Gupta · Accepted Answer · 2017-10-25 13:09:38Z

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

answered Oct 25, 2017 at 13:09

Vikas Gupta

1,2311 gold badge12 silver badges27 bronze badges

1 Comment

Asim Over a year ago

i cannot add $scope.GTMcontainers in getContainer(function(array1--> here should be $scope.GTMcontainers) but i get error. i used var=response but it says its local variable

Collectives™ on Stack Overflow

Merge two Arrays using underscore.js in AngularJS

2 Answers 2

7 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related