如何在复杂的 JSON 上运行 ng-repeat 或 forAngular 的每个

how to run ng-repeat or forEach of angular on complex json

本文关键字：ng-repeat forAngular 运行 复杂 JSON      更新时间：2023-09-26

我遇到一种情况，即我正在获取复杂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 返回的响应。任何帮助将不胜感激！谢谢！！

你可以尝试这样的事情：

JSFiddle.

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

$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>

这是褶皱机

您可以在此处查看包含数据的角度ngRepeat示例

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

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 数组中提取每个顶级对象（在迭代期间，当前对象具有别名数据）

在重复语句中，您可以使用点表示法显示访问数据对象的请求值：

<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>
相关文章：