Consuming JSON Object in AngularJs

Question

My Spring Rest Controller Endpoint is as below:

@CrossOrigin
@RequestMapping(value = "/getEverything", method=RequestMethod.GET)
public @ResponseBody MyItems getEverything(){
    return myService.getEverything();
}

Below is MyItems class:

public class MyItems {

private Map<String, ArrayList<MyItem>> everything;

public Map<String, ArrayList<MyItem>> getEverything() {
    return everything;
}

public void setEverything(Map<String, ArrayList<MyItem>> everything) {
    this.everything = everything;
}   
}

The rest call returns Json in below format:

{
"myItems": {
"Office": [
  {
    "field1": "Read a book",
    "field2": "xyz",
    "field3": true,
    "field4": 1489795200000
  },
  {
    "field1": "Write a program",
    "field2": "abc",
    "field3": false,
    "field4": 1489881600000
  }
],
"Home": [
  {
    "field1": "Watch a movie",
    "field2": "pqr",
    "field3": true,
    "field4": 1489797800000
  }
]
}
}

Here Office, Home are keys in the returned map.

How do I iterate or consume this JSon in AngularJS?

How do I get the key values ?

 $http.get(REST_SERVICE_URI + 'toDo/getAllItems').then(function(response){
     // what will go here ?
     $scope.myItemLists = response.data;
 });

I want myItemLists as a List containing objects with two properties:

1) Listname: This will be the key of the map returned.

2) List of Fields: This will be the list of object returned.

Thanks!

How do you want to use this JSON? Perhaps showing it in HTML? Use `ng-repeat` directive for it. — 31piy, Mar 18 '17 at 09:11
@31piy: Hi.. how? when I use ng-repeat to print key and value, I get key as "myItems" and value as rest whole Json. Which is not what I want. I want keys as Office, Home, etc. and Value as the lists against Office, Home. — user7726818, Mar 18 '17 at 09:17

score 0 · Answer 1 · answered Mar 18 '17 at 09:24

Try like this. use angular forEach loop

var app = angular.module('app', []);
app.controller('aCtrl', function($scope) {
  $scope.myItems ={
"myItems": {
"Office": [
  {
    "field1": "Read a book",
    "field2": "xyz",
    "field3": true,
    "field4": 1489795200000
  },
  {
    "field1": "Write a program",
    "field2": "abc",
    "field3": false,
    "field4": 1489881600000
  }
],
"Home": [
  {
    "field1": "Watch a movie",
    "field2": "pqr",
    "field3": true,
    "field4": 1489797800000
  }
]
}
}

var keys = [];
var objectValues = [];
 angular.forEach($scope.myItems.myItems,function(value,key){
    keys.push(key);
    objectValues.push(value);
 })
 
     console.log(keys);
    console.log(objectValues);
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>

<div ng-app="app" ng-controller="aCtrl">

</div>

score 0 · Answer 2 · edited May 23 '17 at 12:00

you can store data in separate variable see below,

$http.get(REST_SERVICE_URI + 'toDo/getAllItems').then(function(response){
     // what will go here ?
     $scope.myItemLists = response.data;
     $scope.itemListOfficeData = response.data.myItems.Office;
     $scope.itemListHomeData = response.data.myItems.Home;
 });

Or you can use nested data-ng-repeat for iterate data see below link for reference.

Nested ng-repeat

using ng-repeat inside another ng-repeat

score 0 · Answer 3 · answered Mar 18 '17 at 09:52

While HJz answer is fine if what you want is to iterate through your json data in the controller, but if you simply want to present the data in a view, you can use ng-repeat directly on your json object like this:

<ul>
    <li ng-repeat="(key, value) in myItems">{{key}}: {{value | json}}</li>
<ul>

which roughly turns into the following html (some values have been ignored for better readability):

<ul>
    <li>Office: [{"field1": "Read a book"}, {"field1": "Read a book"}]</li>
    <li>Home: [{"field1": "Watch a movie"}]</li>
<ul>

You can nest this ng-repeat directives, to further iterate through the values in your json data.

Alternatively, if all you need is an array of keys or an array of values, then JavaScript got functions you can use to extract those:

var keys = Object.keys(myItems); 
// -> ['Office', 'Home']

var values = Object.values(myItems); 
// -> [[{"field1": "Read a book"}, {"field1": "Write a program"}], [{"field1": "Watch a movie"}]]

score 0 · Answer 4 · answered Mar 18 '17 at 09:57

You can flatten the nested object first and then iterate over it or you can use nested ng-repeat as shown below:

var app = angular.module('app', []);
app.controller('aCtrl', function($scope) {
  var items = {
    "myItems": {
      "Office": [{
          "field1": "Read a book",
          "field2": "xyz",
          "field3": true,
          "field4": 1489795200000
        },
        {
          "field1": "Write a program",
          "field2": "abc",
          "field3": false,
          "field4": 1489881600000
        }
      ],
      "Home": [{
        "field1": "Watch a movie",
        "field2": "pqr",
        "field3": true,
        "field4": 1489797800000
      }]
    }
  }
  $scope.myItems = items.myItems;
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>

<div ng-app="app" ng-controller="aCtrl">
  <ul>
    <li ng-repeat="(item, fields) in myItems">
      {{item}}
      <ul>
        <li ng-repeat="field in fields">
          {{field}}
          <ul>
            <li ng-repeat="(name, value) in field">
              {{name}}:{{value}}
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

Consuming JSON Object in AngularJs

4 Answers4