消費JSONオブジェクトは

Question

マイ春休憩コントローラーエンドポイントは以下の通りである：以下

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

ですMyItemsクラス：

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; 
} 
} 

残りの呼び出しは形式以下でJSONを返す：

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

ここでOffice、Homeは返されたマップのキーです。

AngularJSでこのJSonを反復または消費するにはどうすればよいですか？

キー値を取得するにはどうすればよいですか？

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

私は2つのプロパティを持つオブジェクトを含むリストとしてmyItemListsたい：

1）リスト名を：これは、返されたマップのキーとなります。

2）フィールドリスト：これは返されるオブジェクトのリストです。

ありがとうございます！

Answer 1

このようにしてください。あなたは

$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; 
}); 

または参照するためのリンクの下に表示さあなたが反復データのためのネストされたdata-ng-repeatを使用することができ、以下を参照してください別の変数にデータを保存することができ、角度forEachループ

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>

Answer 2

を使用しています。

Nested ng-repeat

using ng-repeat inside another ng-repeat

Answer 3

何がしたいことは、コントローラであなたのJSONデータを反復処理する場合HJzの答えは罰金ですが、あなたは、単にビューのデータを提示したい場合は、使用することができますがおおよそ次のHTML に変身

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

（一部の値が読みやすくするために無視されています）：このようなあなたのJSONオブジェクトに直接ng-repeat：

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

あなたが巣このng-repeatディレクティブは、さらにあなたのJSONデータの値を反復処理することができます。あなたが必要とするすべてのキーの配列または値の配列である場合

---

あるいは、その後、JavaScriptは、あなたがそれらを抽出するために使用できる関数だ：

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

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

Answer 4

を最初にネストされたオブジェクトをフラット化することができますし、

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>

：以下のようにそれを反復またはネストされたNG-の繰り返しを使用することができます