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??

If you are going to work with angular you need to learn how to manipulate arrays using javascript. Also a good chance that if you control the source data you should be mapping it better there — charlietfl
– charlietfl, Commented Oct 9, 2015 at 15:14
I don't understand if you have this json as a response to a request on the server or something else? if you get it as a response from a server then change the server method, or iterate over deserialize the structure and change it as you will, if this is not the problem, then be more specific please. — Daniele Sassoli
– Daniele Sassoli, Commented Oct 9, 2015 at 15:15
actually that REST API is not in my hand and this is how I will get the data. Thats the problem. — Karthik Nagaraj
– Karthik Nagaraj, Commented Oct 9, 2015 at 15:32

AWolf · Accepted Answer · 2015-10-09 22:00:00Z

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'.

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>

Collectives™ on Stack Overflow

how to change JSON data format in angular JS?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related