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

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>

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

how to change JSON data format in angular JS?

javascript

jquery

json

bootstrapping

angularjs