J'essaie d'obtenir json à partir d'une source multiple et je veux l'afficher dans la grille d'interface utilisateur angulaire unique. dans tous ces sources, le premier champ est commun.Combinaison de plusieurs json et affichage dans la grille d'interface utilisateur angulaire
Format des données:
Source: 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"}
];
Source: 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"}
];
Je veux qu'il soit affiché dans ceindre comme ce
Source:
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;
}]);
code: voir le attaced Plunkr http://plnkr.co/edit/ZUyJQInnygirvfohIhQo