Question

我是Angular JS的新手。

我的JSON数据是：

{
"CheckList": [
   {
    "UnitClass": "Budget Space",
    "CheckListCategoryId": 1,
    "CheckListCategory": "DOORS",
    "CheckListItemId": 2,
    "CheckListItem": "Deadbolt, Locksets, and keys all functioning"
   }, 
   {
    "UnitClass": "Budget Space",
    "CheckListCategoryId": 2,
    "CheckListCategory": "WINDOWS",
    "CheckListItemId": 46,
    "CheckListItem": "Windows are operable"
   }, 
   {
    "UnitClass": "Budget Space",
    "CheckListCategoryId": 2,
    "CheckListCategory": "WINDOWS",
    "CheckListItemId": 13,
    "CheckListItem": "Window pane is not broken or cracked"
   }
}

我想将其更改为：

{
"CheckList": [
   {
    "UnitClass": "Budget Space",
    "CheckListCategoryId": 1,
    "CheckListCategory": "DOORS",
    "CheckListItemId": 2,
    "CheckListItem": "Deadbolt, Locksets, and keys all functioning"
   }, 
   {
    "UnitClass": "Budget Space",
    "CheckListCategoryId": 2,
    "CheckListCategory": "WINDOWS",
    "CheckListItems": [
        {
            "CheckListItem": "Windows are operable",
            "CheckListItemId": 46,
        },
        {
            "CheckListItem": "Window pane is not broken or cracked",
            "CheckListItemId": 13,
        }]
   }
}

为什么我这样做：

我有一个Bootstrap崩溃列表

门
WINDOWS

我正在使用ng-repeat，在CheckListCategoryId

上添加过滤器“unique”

但问题在于我目前的JSON，只发布了单CheckListItem，但在很多情况下有两个。就像在WINDOWS中一样。

如何更改JSON数据？

还有一件事。我当前的方式是正确的还是有其他选择？

Answer 1

您可以使用angular-filter中的groupBy对数据进行分组。然后，您可以按类别ctrl.checkList | groupBy: 'CheckListCategory'过滤数据。

请查看下面的演示或此fiddle。

我使用了一个bootstrap手风琴来显示数据，但崩溃也应该有效。我不确定崩溃是什么样子，这就是我使用手风琴的原因。

angular.module('demoApp', ['ui.bootstrap', 'angular.filter'])
	.controller('MainController', MainController);
function MainController($http, $scope) {
    var vm = this;
    
	$http.jsonp('http://www.mocky.io/v2/56183175100000e5387222f9?callback=JSON_CALLBACK').then(function(response) {
        console.log(response);
    	vm.checkList = response.data[0].CheckList;
     });
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.0/ui-bootstrap-tpls.js"></script>
<script src="https://cdn.rawgit.com/a8m/angular-filter/master/dist/angular-filter.js"></script>

<div ng-app="demoApp" ng-controller="MainController as ctrl">
    <uib-accordion>
        <uib-accordion-group heading="{{cat[0].CheckListCategory}}" ng-repeat="cat in ctrl.checkList | groupBy: 'CheckListCategory'">
            <ul>
                <li ng-repeat="item in cat">
                    {{item.CheckListItem}}
                </li>
            </ul>
        </uib-accordion-group>
    </uib-accordion>
</div>

如何在角度JS中更改JSON数据格式？

1 个答案: