how to change JSON data format in angular JS?

Question

I am new to Angular JS.

My JSON data is:

{
"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"
   }
}

And I want to change it to:

{
"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,
        }]
   }
}

Why I am doing this:

I have a Bootstrap collapse list as

DOORS
WINDOWS

which i am getting using ng-repeat, adding a filter 'unique' on CheckListCategoryId

But the problem is with my current JSON, only single CheckListItem is getting posted but in many cases there are two. like in WINDOWS.

How to change the JSON data??

One more thing. Is my current way correct or there is any other alternative??

Answer 1

You could use groupBy from angular-filter to group your data. Then you can filter your data by category like this ctrl.checkList | groupBy: 'CheckListCategory'ctrl.checkList | groupBy: 'CheckListCategory' .

Please have a look at the demo below or in this fiddle .

I've used a bootstrap accordion to display the data but collapse should also work. I'm not sure how it should look like with the collapse that's why I used an accordion.

 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>