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

Question

I am getting this json from django and I want to show this in angular ui-grid but I am getting 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 "fields"

the json is:

[{"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}]

davidkonrad · Accepted Answer · 2015-11-01 17:09:41Z

1

The error you receive indicates that you not have defined column definitions for the UI Grid, or perhaps not have defined them properly. Simply refer to the nested fields attributes as 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

Remember to target the right controller. You have both IndexCtrl and ajax :

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

edited Nov 1, 2015 at 17:09

answered Nov 1, 2015 at 14:14

davidkonrad

85.7k17 gold badges211 silver badges273 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

focode Over a year ago

now I am getting error : colDef.name or colDef.field property is required

davidkonrad Over a year ago

@focode - you did that before too - "colDef.name or colDef.field property is required" - it would be a lot easier if you showed your code, perhaps you have a problem with the markup. Did you copy the scheme from the plnkr? It should work right away, like with a $http.

focode Over a year ago

I was not able to copy past it here , here is the github link for it ...controller name is ajax: github.com/focode/buddy2/blob/master/src/static/buddy/js/…

davidkonrad Over a year ago

@focode - thank you for that. It works with $http too, reduced code of what you are doing -> plnkr.co/edit/ITKTq1WYRgOCbD7W0Ms7?p=preview but see update to the answer, could not find the specific HTML file on your github, but something tells me you have forgot to target the right controller.

focode Over a year ago

I was able to se my data in grid just by changing this line : $scope.guestdata = JSON.parse(response); It would have not been possible with out your help david

|

Saurabh Bayani · Accepted Answer · 2016-07-15 12:43:04Z

1

Just in case David's answer didn't helped for you:

Try Removing

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

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

from after JSON received place and put it in starting of controller function.

I mean intialize it at very beginning and then just update data when you receive JSON response

$scope.gridOptions.data = response.data

answered Jul 15, 2016 at 12:43

Saurabh Bayani

3,6002 gold badges27 silver badges44 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

8 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related