複数のjsonを組み合わせてAngular UIグリッドに表示する

Question

複数のソースからjsonを取得しようとしていて、これを単一のAngular UIグリッドに表示したいとします。これらすべてのソースの最初のフィールドは共通です。

データ形式：

出典：1

var one=[ 
     { col1: "Heading 1", col2: "First 12", col3: "First 13"}, 
     { col1: "Heading 2", col2: "First 22", col3: "First 23"}, 
     { col1: "Heading 3", col2: "First 32", col3: "First 33"}, 
     { col1: "Heading 4", col2: "First 42", col3: "First 43"}, 
     { col1: "Heading 5", col2: "First 52", col3: "First 53"} 
    ]; 

出典：2

var two=[ 
     { col1: "Heading 1", col2: "Second 12", col3: "Second 13"}, 
     { col1: "Heading 2", col2: "Second 22", col3: "Second 23"}, 
     { col1: "Heading 3", col2: "Second 32", col3: "Second 33"}, 
     { col1: "Heading 4", col2: "Second 42", col3: "Second 43"}, 
     { col1: "Heading 5", col2: "Second 52", col3: "Second 53"} 
    ]; 

私はそれがこの

0123のようなgirdに表示します

出典：

var app = angular.module('plunker', ['ui.grid', 'ui.grid.selection']); 

app.controller('MainCtrl', ['$scope', 'uiGridConstants', function($scope, uiGridConstants) { 

var one=[ 
     { col1: "Heading 1", col2: "First 12", col3: "First 13"}, 
     { col1: "Heading 2", col2: "First 22", col3: "First 23"}, 
     { col1: "Heading 3", col2: "First 32", col3: "First 33"}, 
     { col1: "Heading 4", col2: "First 42", col3: "First 43"}, 
     { col1: "Heading 5", col2: "First 52", col3: "First 53"} 
    ]; 1 
    1 
var two=[ 
     { col1: "Heading 1", col2: "Second 12", col3: "Second 13"}, 
     { col1: "Heading 2", col2: "Second 22", col3: "Second 23"}, 
     { col1: "Heading 3", col2: "Second 32", col3: "Second 33"}, 
     { col1: "Heading 4", col2: "Second 42", col3: "Second 43"}, 
     { col1: "Heading 5", col2: "Second 52", col3: "Second 53"} 
    ]; 

    var finalObj = { 

    "firstData":one, 
    "secondData":two 
    } 


    console.log("finalObj"+JSON.stringify(finalObj)); 


    $scope.gridOptions = { 
    columnDefs: [ 
     {field: 'firstData.col1', displayName: 'Column 1', width: 175}, 
     {field: 'firstData.col2', displayName: 'Column 2', width: '*'}, 
     {field: 'firstData.col3', displayName: 'Column 3', width: 120}, 
     {field: 'secondData.col2', displayName: 'Column 4', width: '*'}, 
     {field: 'secondData.col3', displayName: 'Column 5', width: 120} 
    ], 
    enableRowSelection: true, 
    onRegisterApi: function(gridApi) { 
     $scope.gridApi = gridApi; 
    } 
    }; 
    $scope.gridOptions=finalObj; 

}]); 

コード：attaced Plunkr http://plnkr.co/edit/ZUyJQInnygirvfohIhQo

Answer 1

1を参照）arrayを必要と$scope.gridOptions.data）$scope.gridOptions.data=finalObj;

2に変更する必要があり$scope.gridOptions=finalObj;。

これを試してみてください：

function merge(obj1, obj2){ 
    return obj1.map(function(o1){ 
     return Object.assign({}, o1, { 
     col4: obj2.find(function(o2){ return o1.col1 == o2.col1 }).col2, 
     col5: obj2.find(function(o2){ return o1.col1 == o2.col1 }).col3 
     }) 
    }) 
} 

var finalObj = merge(one, two); 

$scope.gridOptions.data=finalObj; 

Plunker