在AngularJS中使用underscore.js合并两个数组

时间:2017-10-25 12:35:25

标签: javascript angularjs json underscore.js array-merge

我有两个api请求,两者都获得了JSON的结果。第一个请求是“帐户”请求,第二个请求是“容器”请求。现在:

  • 申请所有帐户(accountid:1,name:account1,blabla)
  • 申请所有容器(accountid:1,名称:Container1,blabla)

这是帐户JSON的结果:

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

这是容器的JSON结果:

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

正如你所看到的那样,容器结果包含了accountid所以我试图合并这两个结果,所以它变成了这个组合(容器):

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

请记住,有许多容器和帐户不仅仅是一个块。

我尝试使用下划线:

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

这是我的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);
                })
        })
}

使用此下划线给出了与我请求完全相同的JSON结果(无合并)。

希望有人有这方面的经验。

由于

更新 enter image description here

2 个答案:

答案 0 :(得分:1)

使用简单的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);

答案 1 :(得分:1)

我遇到过这个问题,我知道我有回复,但数据没有合并。所以我使用了回调。

responsive: [
  {
    breakpoint: 480,
    settings: {
      slidesToShow: 1,
      slidesToScroll: 1
    }
  }
]

在功能调用时 -

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


                    })
            })
    }