How to show data from json to ui-grid in angular ui-grid

Question

I get this json from django and I want to show this in angular ui-grid, but I get an error:

Error: colDef.name or colDef.field property is required
preprocessColDef@http://127.0.0.1:8000/static/buddy/js/ui-grid.js:3771:1
buildColumns/<@http://127.0.0.1:8000/static/buddy/js/ui-grid.js:3630:7
buildColumns@http://127.0.0.1:8000/static/buddy/js/ui-grid.js:3629:5
dataWatchFunction@http://127.0.0.1:8000/static/buddy/js/ui-grid.js:2749:27
$watchCollectionAction@http://127.0.0.1:8000/static/buddy/js/angular.js:15693:13
$RootScopeProvider/this.$get</Scope.prototype.$digest@http://127.0.0.1:8000/static/buddy/js/angular.js:15826:23
$RootScopeProvider/this.$get</Scope.prototype.$apply@http://127.0.0.1:8000/static/buddy/js/angular.js:16097:13
done@http://127.0.0.1:8000/static/buddy/js/angular.js:10546:36
completeRequest@http://127.0.0.1:8000/static/buddy/js/angular.js:10744:7
requestLoaded@http://127.0.0.1:8000/static/buddy/js/angular.js:10685:1

I want to show only attributes from the "fields"

json:

[{"fields": {"joiningtime": null, "boozprofileId": 1, "userId": 1, "likeStatus": true}, "model": "buddy.guestentry", "pk": 1}, {"fields": {"joiningtime": null, "boozprofileId": 1, "userId": 1, "likeStatus": true}, "model": "buddy.guestentry", "pk": 2}, {"fields": {"joiningtime": "2015-10-18T15:53:58.243Z", "boozprofileId": 12, "userId": 3, "likeStatus": true}, "model": "buddy.guestentry", "pk": 3}, {"fields": {"joiningtime": "2015-10-18T15:54:24.055Z", "boozprofileId": 8, "userId": 3, "likeStatus": true}, "model": "buddy.guestentry", "pk": 4}, {"fields": {"joiningtime": null, "boozprofileId": 3, "userId": 1, "likeStatus": true}, "model": "buddy.guestentry", "pk": 5}, {"fields": {"joiningtime": null, "boozprofileId": 3, "userId": 1, "likeStatus": true}, "model": "buddy.guestentry", "pk": 6}, {"fields": {"joiningtime": null, "boozprofileId": 3, "userId": 1, "likeStatus": true}, "model": "buddy.guestentry", "pk": 7}, {"fields": {"joiningtime": null, "boozprofileId": 3, "userId": 1, "likeStatus": true}, "model": "buddy.guestentry", "pk": 8}]

Answer 1

The error you received indicates that you did not define the column definitions for the user interface grid, or you might not have defined them properly. Just specify the nested attributes fieldsas fields.<attributeName>:

//the JSON from above 
$scope.gridOptions.data = [{"fields": {"joiningtime": null, "boozprofileId": ....}];

$scope.gridOptions.columnDefs = [
   {name: 'fields.joiningtime' }, 
   {name: 'fields.boozprofileId' }, 
   {name: 'fields.userId' },
   {name: 'fields.likeStatus' } 
];

demo → http://plnkr.co/edit/KXvES4G64RVwneFbZzV2?p=preview

---

. IndexCtrl, ajax:

<div ng-controller="ajax">
   <div ui-grid="gridOptions" ui-grid-cellNav class="grid"></div>
</div>

Answer 2

:

$scope.gridOptions.data = [{"fields": {"joiningtime": null, "boozprofileId": ....}];

$scope.gridOptions.columnDefs = [
   {name: 'fields.joiningtime' }, 
   {name: 'fields.boozprofileId' }, 
   {name: 'fields.userId' },
   {name: 'fields.likeStatus' } 
];

JSON received .

, data, JSON response

$scope.gridOptions.data = response.data