【问题标题】:Merge Object AngularJS from two http request从两个 http 请求合并对象 AngularJS
【发布时间】:2018-05-14 03:23:05
【问题描述】:

我正在尝试将两个 HTTP.get 请求合并为一个 $scope,因为我想在同一个 ng-repeat 表中显示数据。我在我的 AngularJS 应用程序中使用这样的链式承诺:

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'];


                            })
                        })

                    })
                })
        }

解释我在代码中做了什么:
1) http.get(/api/containers) 给了我一些 JSON 格式的数据
2) angular.forEach 遍历键
3) angular.forEach 遍历值(键是动态的,这就是为什么有 2 个 angular.forEach。
4)http.get(/api/tags)我在参数中发送一些数据并得到一些结果数据

5) 这是困难的部分,我想在 $scope.GTMcontainersAccount 上使用 ng-repeat,但不能将 $scope.GTMcontainersAccount$scope.tags_counter$scope.trigger_counter$scope.variable_counter 合并

我在$scope.GTMcontainersAccount中的数据:

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

我在$scope.tags_counter: 中的数据(我删除了很多,因为它很长,这里最重要的是最后一个键:值)

{
    "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
    }
}

所以在合并后我希望$scope.GTMcontainersAccount 看起来像这样: 决赛:

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

更新:

【问题讨论】:

    标签: javascript arrays angularjs merge


    【解决方案1】:

    我给你带来了一把小提琴。

    看起来有点乱,但效果很好。

    我希望这对你有帮助。 :)

    Merge Object

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

    添加一些解释,

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

    上面是获取对象的最后一个索引。

    Object.keys($scope.tags_counter) 返回$scope.tags_counter 中的所有keys

    Object.values($scope.tags_counter)[ index ] 返回$scope.tags_counter 中的所有values

    所以当你知道你想要的值的索引时,很容易得到任何对象的值。

    更新

    我被你的照片弄糊涂了。

    为什么所有行都有相同的“计数器”对象。

    您是否将 '$scope.tags_counter' 中的同一个对象放入不同的对象中是值得怀疑的。

    如果你想要得到的key总是空字符串,比如""

    那么你可以使用$scope.tags_counter[""];

    请检查this other fiddle

    或者你可以制作包含你所有对象的小提琴吗?

    .

    .

    更新2

    随着你的目的更加确定,我再次制作了这个小提琴。

    Please check this fiddle,

    如果这也不符合您的意图,请与我分享其他信息。

    【讨论】:

    • console.log($scope.GTMcontainersAccount);说未定义
    • @Asim 在我的小提琴中??我又检查了一遍,效果很好!
    • 我已经更新了我的答案。请查看此内容并给我另一个反馈。
    • 我们误会了。 “计数器”应位于示例“account2”或“Account1”的每个块内。这只是将它附加到最后一个。
    • @Asim 你想要的是把相同的'Counter'对象放入'account1'和'account2'?
    猜你喜欢
    • 2018-03-30
    • 2022-01-25
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-07-09
    • 1970-01-01
    相关资源
    最近更新 更多