简体   繁体   中英

Putting array from another array into ng-grid

I have JSON data that is stored within an array (the Info column) and I need to insert it into ng-grid. So appName, appID, and appStatus should all be columns in the final ng-grid. How do I create the fields for those?

JSON:

[  
   {  
      "id":75,
      "firstName":"Charlie",
      "lastName":"Latter",
      "Info":[  
         {  
            "appName":"Yale",
            "appID":21,
            "appStatus":"applied"
         },
         {  
            "appName":"NYU",
            "appID":52,
            "appStatus":"applied"
         }
      ]
   },
   {  
      "id":78,
      "firstName":"Casey",
      "lastName":"Jones",
      "Info":[  
         {  
            "appName":"Harvard",
            "appID":63,
            "appStatus":"applied"
         },
         {  
            "appName":"Princeton",
            "appID":32,
            "appStatus":"applied"
         }
      ]
   }
]

Script:

$scope.viewCollegeApps = {
    data: 'collegeApps',
    columnDefs: [
        {field: 'id', displayName: 'ID'},
        {field: 'firstName', displayName: 'firstName'},
        {field: 'lastName', displayName: 'lastName'},
    //Fields for Info arrays//
    ],
};

The Info array will need to appear as it's own column in the ng-grid, unless you re-map your data beforehand.

Maybe cellTemplates would help you to format the information in a suitable manner, eg:

$scope.viewCollegeApps = {
    data: 'collegeApps',
    columnDefs: [
        {field: 'id', displayName: 'ID'},
        {field: 'firstName', displayName: 'firstName'},
        {field: 'lastName', displayName: 'lastName'},
        //Define the info column - the whole info array will appear in the Info column
        {field: 'Info', displayName: 'Info', cellTemplate: '<div ng-repeat="info in row.entity[col.field]">{{info.appName}}, {{info.appID}}</div>' }
    ],
};

Or you could do a custom rowTemplate for the entire row, that might be more suitable.

https://github.com/angular-ui/ui-grid/wiki/Templating

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM