Merge Object AngularJS from two http request

Question

I'm trying to merge two HTTP.get request into one $scope because i want to display the data in same ng-repeat table. Im using chained promises like this in my AngularJS application:

AngularJS:

function getContainer() {
            $http.get("/api/containers")
                .then(function (response) {
                    $scope.GTMcontainersAccount = response.data;
                    $scope.loading = false;


                    // Retrive containerId and AccountID then request to show Counter of how many Tags, Triggers and Variables are available in each Container
                    angular.forEach($scope.GTMcontainersAccount, function (key) {
                        angular.forEach(key, function (keydata) {
                            $scope.accountId = keydata.accountId;
                            $scope.containerId = keydata.containerId;
                            $http.get("/api/tags", {
                                params: {
                                    "param1": $scope.accountId,
                                    "param2": $scope.containerId
                                }
                            }).then(function (responses) {
                                $scope.tags_counter = responses.data[""]['tags'];
                                $scope.trigger_counter = responses.data[""]['trigger'];
                                $scope.variable_counter = responses.data[""]['variable'];


                            })
                        })

                    })
                })
        }

Explain what i do in the code:
1) http.get(/api/containers) gives me some data in JSON-format
2) angular.forEach iterates trough the keys
3) angular.forEach iterates trough the value (key are dynamic thats why there are 2 angular.forEach.
4) http.get(/api/tags) i send some data in parameter and get some result data

5) Here is the difficult part, i want to use ng-repeat on $scope.GTMcontainersAccount but cannot merge $scope.GTMcontainersAccount with $scope.tags_counter, $scope.trigger_counter and $scope.variable_counter

My data in $scope.GTMcontainersAccount:

{
    "Account2": [{
        "accountId": "1746756959",
        "containerId": "7454209",
    }, {
        "accountId": "1746756959",
        "containerId": "7519183",
    }],
    "Account 1": [{
        "accountId": "1766143525",
        "containerId": "7483653",
    }]
}

My data in $scope.tags_counter: (ive deleted alot because its very long and whats important here is the LAST key:value)

{
    "0": {
        "accountId": "****",
        "containerId": "*****",
        "tag": [{
            "accountId": "*****",
            "containerId": "********",
            "name": "Test Tag"
        }, {
            "accountId": "***",
            "containerId": "***",
            "name": "Classic Google Analytics"
        }, {
            "accountId": "***",
            "containerId": "***",
            "name": "contentEngagement"
        }],
        "trigger": [{
            "accountId": "***",
            "containerId": "***",
            "name": "Trigger 1"
        }, {
            "accountId": "***",
            "containerId": "***",
            "name": "Trigger 2"
        }, {
            "accountId": "***",
            "containerId": "***",
            "name": "Trigger 3"
        }],
        "variable": [{
            "accountId": "***",
            "containerId": "***",
            "name": "Google Analytics Settings"
        }, {
            "name": "Protocol"
        }, {
            "accountId": "*******",
            "containerId": "****",
            "name": "Lookup Table"
        }],
        "builtInVariable": [{
            "accountId": "*******",
            "containerId": "******",
            "name": "Page URL",
            "path": null,
            "type": "pageUrl",
            "workspaceId": null
        }, {
            "accountId": "**",
            "containerId": "**",
            "name": "Page Hostname",
            "path": null,
            "type": "pageHostname",
            "workspaceId": null
        }, {
            "accountId": "***",
            "containerId": "***",
            "name": "Page Path",
            "path": null,
            "type": "pagePath",
            "workspaceId": null
        }, {
            "accountId": "***",
            "containerId": "***",
            "name": "Referrer",
            "path": null,
            "type": "referrer",
            "workspaceId": null
        }, {
            "accountId": "***",
            "containerId": "****",
            "name": "Event",
            "path": null,
            "type": "event",
            "workspaceId": null
        }]
    },
    "": {                 <----- THIS is what i want to merge
        "tags": 3,
        "trigger": 3,
        "variable": 3
    }
}

So after the merge i want $scope.GTMcontainersAccount to look like this: Final:

{
    "Account2": [{
        "accountId": "1746756959",
        "containerId": "7454209",
    }, {
        "accountId": "1746756959",
        "containerId": "7519183",
    }],
    "Account 1": [{
        "accountId": "1766143525",
        "containerId": "7483653",
    }],
    "Counter" : {
        "tags": 3,
        "trigger": 3,
        "variable": 3
}

UPDATED:

Canet Robern · Accepted Answer · 2017-12-05 00:27:27Z

I've brought a fiddle for you.

It seems like a little messy but this works well.

I hope this is helpful for you. :)

Merge Object

$scope.GTMcontainersAccount['Counter'] = Object.values($scope.tags_counter)[(Object.keys($scope.tags_counter).length-1)];

Adding some explanations,

(Object.keys($scope.tags_counter).length-1)

Above is for getting last index of an object.

Object.keys($scope.tags_counter) returns all keys of $scope.tags_counter.

And Object.values($scope.tags_counter)[ index ] returns all values of $scope.tags_counter,

so when you know the index of value that you want, it's easy to get value of any object.

UPDATE

I'm confused because of your picture.

Why all lines have the same 'Counter' object.

It's doubtful whether you are putting the same object from '$scope.tags_counter' into different objects or not.

If the key what you want to get is always empty string like "",

then you can use $scope.tags_counter[""];.

Check this other fiddle please.

Or could you make fiddle which has your entire objects?

.

UPDATE2

Following more certain of your purpose, I've made this fiddle again.

Please check this fiddle,

and if this is not right for your intent too, then please share me another information.

I've updated my answer. Please see this and give me another feedback.
Uve misunderstood. The "Counter" should be inside each block of example "account2" or "Account1". this is just appending it to the last.
@Asim What you want is put same 'Counter' object into 'account1' and 'account2'?

Collectives™ on Stack Overflow

Merge Object AngularJS from two http request

1 Answer 1

5 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Related