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

【问题标题】：how to change JSON data format in angular JS?如何更改 Angular JS 中的 JSON 数据格式？
【发布时间】：2015-10-09 15:08:56
【问题描述】：

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

门
窗口

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

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

如何更改 JSON 数据？？

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

【问题讨论】：

如果您要使用 Angular，您需要学习如何使用 javascript 操作数组。还有一个很好的机会是，如果您控制源数据，您应该在那里更好地映射它
我不明白你是否有这个 json 作为对服务器上请求的响应或其他什么？如果您将其作为来自服务器的响应，则更改服务器方法，或迭代反序列化结构并随意更改它，如果这不是问题，请更具体。
实际上 REST API 不在我手中，这就是我获取数据的方式。这就是问题所在。

标签： javascript jquery json angularjs bootstrapping

【解决方案1】：

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

请看下面的演示或fiddle。

我使用了一个引导手风琴来显示数据，但折叠也应该可以工作。我不确定折叠后它应该是什么样子，这就是我使用手风琴的原因。

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>

【讨论】：

谢谢！！这对我很有帮助。