如何在angular ui网格中显示json到ui网格的数据

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

本文关键字：ui 网格 json 数据 显示 angular      更新时间：2023-09-26

我从django得到这个json，我想在angular ui网格中显示它，但我得到了错误：

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

我只想显示来自"字段"的属性

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}]

收到的错误表明您没有为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>

以防万一David的回答对你没有帮助：

尝试删除

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

从CCD_ 5之后放置，并将其置于控制器功能的启动中。

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

$scope.gridOptions.data = response.data
相关文章：