Question

我的Spring Rest Controller Endpoint如下：

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

我想将myItemLists作为包含具有两个属性的对象的List：

1）Listname：这将是返回的地图的关键。

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

谢谢！

Answer 1

试试这样。使用角度forEach循环

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>

<div ng-app="app" ng-controller="aCtrl">

</div>

＆＃13;

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数据，但如果你只是想在视图中显示数据，你可以直接在你的json对象上使用ng-repeat这样：

<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-repeat，如下所示：

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>

在AngularJs中使用JSON对象

4 个答案: