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

Posted 2023-02-24

【中文标题】如何在角度 ui-grid 中显示从 json 到 ui-grid 的数据

【英文标题】：how to show data from json to ui-grid in angular ui-grid

【发布时间】：2016-02-01 10:11:00

【问题描述】：

我从 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

我只想显示“字段”中的属性

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]

【参考方案1】：

您收到的错误表明您没有为 UI Grid 定义列定义，或者可能没有正确定义它们。只需将嵌套的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>

【讨论】：

现在我收到错误：colDef.name 或 colDef.field 属性是必需的

@focode - 你以前也这样做过 - “colDef.name 或 colDef.field 属性是必需的” - 如果你显示你的代码会容易得多，也许你的标记有问题。您是否从 plnkr 复制了该方案？它应该可以立即使用，例如 $http。

我无法在这里复制过去，这里是它的 github 链接...控制器名称是 ajax：github.com/focode/buddy2/blob/master/src/static/buddy/js/…

@focode - 谢谢你。它也适用于$http，减少了你正在做的事情的代码 -> plnkr.co/edit/ITKTq1WYRgOCbD7W0Ms7?p=preview 但看到答案的更新，在你的 github 上找不到特定的 html 文件，但有些东西告诉我你忘记定位正确的控制器。

我可以通过更改这一行来在网格中查看我的数据：$scope.guestdata = JSON.parse(response);没有你的帮助大卫是不可能的

【参考方案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 之后放置并放在控制器功能的开始处。

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

$scope.gridOptions.data = response.data