如何在复杂的 json 上运行 ng-repeat 或 forEach 的角度答案

【问题标题】：how to run ng-repeat or forEach of angular on complex json如何在复杂的 json 上运行 ng-repeat 或 forEach 的角度
【发布时间】：2016-01-15 10:12:41
【问题描述】：

我有一种情况，我正在获取复杂 JSON 数据（嵌套类型）的列表。我是 AngularJS 的新手，没有获得运行 ng-repeat 或 forEach 的解决方案。

我返回的数据如下所示。

[{
  "studPersonalDetails": {
    "id": 0,
    "name": "Digvijay",
    "middleName": "",
    "lastName": "Singh",
    "fatherName": "abac",
    "motherName": "abc",
    "dob": "5/7/1990 12:00:00 AM"
  },
  "clients": {
    "clientID": 1,
    "clientName": null,
    "clientDescriptions": null
  },
  "studentAddress": {
    "address1": "12",
    "address2": "12",
    "city": "21",
    "state": "212",
    "pin": 2
  },
  "courseDetails": {
    "courseID": 12,
    "courseName": "12",
    "courseDetail": null
  },
  "studentContacts": {
    "email": "12",
    "alternatePhone": "12",
    "phone": "qw"
  }
}, {
  "studPersonalDetails": {
    "id": 0,
    "name": "Anil",
    "middleName": "kumar",
    "lastName": "Sharma",
    "fatherName": "bac",
    "motherName": "bac",
    "dob": "2/11/1989 12:00:00 AM"
  },
  "clients": {
    "clientID": 1,
    "clientName": null,
    "clientDescriptions": null
  },
  "studentAddress": {
    "address1": "21",
    "address2": "21",
    "city": "5456",
    "state": "8",
    "pin": 7
  },
  "courseDetails": {
    "courseID": 58,
    "courseName": "58",
    "courseDetail": null
  },
  "studentContacts": {
    "email": "12",
    "alternatePhone": "12",
    "phone": "abc"
  }
}]

这是 API 返回的响应。任何帮助将不胜感激！谢谢！

【问题讨论】：

你想展示什么？
您的 json JSON.parse'd 是否已分配给变量？
我必须运行 ng-repeat 才能在 html 中呈现数据。谢谢
请分享预期的输出。使用 ng-repeat 有不同的方式来使用这个嵌套的 json。
感谢@Rajesh,@jenjis。感谢您的快速响应和支持

标签： javascript jquery angularjs json angularjs-ng-repeat

【解决方案1】：

你可以试试这样的：

JSFiddle.

<div ng-repeat="currentRow in data">
  <span>{{currentRow.studPersonalDetails.name}}</span>
  <span>{{currentRow.studPersonalDetails.lastName}}</span>
</div>

【讨论】：

【解决方案2】：

$scope.arr = [{
  "studPersonalDetails": {
    "id": 0,
    "name": "Digvijay",
    "middleName": "",
    "lastName": "Singh",
    "fatherName": "Shyam Bahadur Singh",
    "motherName": "ramawati Devi",
    "dob": "5/7/1990 12:00:00 AM"
  },
  "clients": {
    "clientID": 1,
    "clientName": null,
    "clientDescriptions": null
  },
  "studentAddress": {
    "address1": "12",
    "address2": "12",
    "city": "21",
    "state": "212",
    "pin": 2
  },
  "courseDetails": {
    "courseID": 12,
    "courseName": "12",
    "courseDetail": null
  },
  "studentContacts": {
    "email": "12",
    "alternatePhone": "12",
    "phone": "qw"
  }
}, {
  "studPersonalDetails": {
    "id": 0,
    "name": "Anil",
    "middleName": "kumar",
    "lastName": "Sharma",
    "fatherName": "bac",
    "motherName": "bac",
    "dob": "2/11/1989 12:00:00 AM"
  },
  "clients": {
    "clientID": 1,
    "clientName": null,
    "clientDescriptions": null
  },
  "studentAddress": {
    "address1": "21",
    "address2": "21",
    "city": "5456",
    "state": "8",
    "pin": 7
  },
  "courseDetails": {
    "courseID": 58,
    "courseName": "58",
    "courseDetail": null
  },
  "studentContacts": {
    "email": "12",
    "alternatePhone": "12",
    "phone": "abc"
  }
}]

使用angular.forEach 你可以这样做。

angular.forEach($scope.arr,function(value,key){

  console.log(value.studPersonalDetails.lastName); 

})

使用ng-repeat，你可以这样做。

<tr ng-repeat="oneArr in arr">
       <td> {{oneArr.studPersonalDetails.name}}</td>
 </tr>

这里是plunker

【讨论】：

【解决方案3】：

您可以看到一个带有角度的 ngRepeat 示例，其中包含您的数据 here

首先，使用您的数据创建一个控制器：

var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
    $scope.datalist = [  
    {  
    "studPersonalDetails":{  
        "id":0,
        "name":"Digvijay",
        "middleName":"",
        "lastName":"Singh",
        "fatherName":"Shyam Bahadur Singh",
        "motherName":"ramawati Devi",
        "dob":"5/7/1990 12:00:00 AM"
    },
    "clients":{  
        "clientID":1,
        "clientName":null,
        "clientDescriptions":null
    },
    "studentAddress":{  
        "address1":"12",
        "address2":"12",
        "city":"21",
        "state":"212",
        "pin":2
    },
    "courseDetails":{  
        "courseID":12,
        "courseName":"12",
        "courseDetail":null
    },
    "studentContacts":{  
        "email":"12",
        "alternatePhone":"12",
        "phone":"qw"
    }
    },
    {  
    "studPersonalDetails":{  
        "id":0,
        "name":"Anil",
        "middleName":"kumar",
        "lastName":"Sharma",
        "fatherName":"bac",
        "motherName":"bac",
        "dob":"2/11/1989 12:00:00 AM"
    },
    "clients":{  
        "clientID":1,
        "clientName":null,
        "clientDescriptions":null
    },
    "studentAddress":{  
        "address1":"21",
        "address2":"21",
        "city":"5456",
        "state":"8",
        "pin":7
    },
    "courseDetails":{  
        "courseID":58,
        "courseName":"58",
        "courseDetail":null
    },
    "studentContacts":{  
        "email":"12",
        "alternatePhone":"12",
        "phone":"abc"
    }
    }
];
}

然后将此控制器附加到您的视图并使用 ngRepeat 从 dataList 数组中提取每个顶级对象（在迭代期间，当前对象具有别名 data）

在重复语句中，您可以使用点符号显示访问 data 对象的请求值：

<div ng-controller="MyCtrl">
  <div class="row" ng-repeat="data in datalist">
    <p><span>Name</span> {{ data.studPersonalDetails.name }}</p>
    <p><span>CourseID</span> {{ data.courseDetails.courseID }}</p>
  </div>
</div>

【讨论】：