如何在 angular ui-grid 中显示从 json 到 ui-grid 的数据

Question

我从 django 得到这个 json 我想在 angular ui-grid 中显示这个但是我收到错误：

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

我只想显示来自 "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

您收到的错误表明您没有为 UI 网格定义列定义，或者可能没有正确定义它们。只需将嵌套的 fields 属性称为 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' } 
];

演示 -> 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之后的地方放在controller函数的starting里面

我的意思是在一开始就初始化它，然后在收到 JSON response

时更新 data

$scope.gridOptions.data = response.data

如何在 angular ui-grid 中显示从 json 到 ui-grid 的数据

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

javascript

django

json

angularjs

angular-ui-grid