如何在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}]

- focode

Answer 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>

- davidkonrad

---

现在我遇到了错误：colDef.name或colDef.field属性是必需的。 - focode

@focode - 你之前也做过这个 - "colDef.name或colDef.field属性是必需的" - 如果你展示一下你的代码，可能会更容易解决问题，也许你在标记上有问题。你是从plnkr复制方案的吗？它应该能够立即工作，就像使用$http一样。 - davidkonrad

我无法在此处复制粘贴，这是它的 GitHub 链接...控制器名称为 ajax: https://github.com/focode/buddy2/blob/master/src/static/buddy/js/main.js - focode

@focode，这是因为我只是复制粘贴了你的代码，当你使用aString+someJSONobject时会发生这种情况，你应该使用console.log("guestdata::", $scope.guestdata);或者 console.dir($scope.guestdata)。但这并不重要，再次强调：将MainCtrl1更改为ajax，你的UI Grid定义就在那里！！！ - davidkonrad

我只需更改这一行代码：$scope.guestdata = JSON.parse(response); 就能在网格中看到我的数据。如果没有你的帮助，这是不可能的，David。 - focode

Answer 2

如果David的回答对你没有帮助：

尝试移除

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

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

从收到JSON后，将其放在控制器函数的开头位置。我的意思是在最开始初始化它，然后只需在收到JSON响应时更新数据。

$scope.gridOptions.data = response.data

- Saurabh Bayani