如何更改Angular JS中的JSON数据格式？

debugcn 发表于 Dev

卡尔提克·纳加拉杰（Karthik Nagaraj）

我是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折叠列表，

DOORS
WINDOWS

我正在使用ng-repeat，在上添加过滤器“唯一” CheckListCategoryId

但是问题出在我当前的JSON上，只CheckListItem发布了一个，但在许多情况下有两个。就像在WINDOWS中一样。

如何更改JSON数据？

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

一只狼

你可以使用groupBy从角过滤器，以将数据分组。然后，您可以像这样按类别过滤数据ctrl.checkList | groupBy: 'CheckListCategory'。

请看下面或这个小提琴中的演示。

我使用了引导式手风琴来显示数据，但折叠也应该起作用。我不确定折叠会是什么样子，这就是我使用手风琴的原因。

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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。