在AngularJs使用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; 
} 
} 

的REST调用在下面的格式返回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; 
}); 

欲myItemLists作为含有对象具有两个属性的列表：

1）列表名：这将是所返回的映射的键。

2）字段列表：这将是返回对象的列表。

谢谢！

Answer 1

试试这个。使用角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

可以存储在单独的变量数据见下文，

$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用于迭代数据见下面的链接以供参考。

Nested ng-repeat

using ng-repeat inside another ng-repeat

Answer 3

虽然HJZ答案是好的，如果你想要的是通过在控制器的JSON数据迭代，但是如果你只是想在一个视图来显示数据，你可以使用ng-repeat直接在您的JSON对象，像这样的：

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

这大致变成下面的HTML （一些值都被忽略了更好的可读性）：

<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

您可以首先拼合嵌套对象和然后迭代它，或者你可以使用嵌套NG-重复如下图所示：

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>