无法从 json 格式访问 html 中的数据答案

【问题标题】：Not able to access data in html from json format无法从 json 格式访问 html 中的数据
【发布时间】：2016-05-30 06:26:34
【问题描述】：

我需要访问 html 文件中的 api 数据，它在我的控制器中以 json 格式存在... 我正在尝试两种方式，但现在可以访问了

$scope.examFilterData_College = data[0].colleges;
$scope.examFilterData_Course = data.courses;



 {
 "status": "sucsuss",
 "data": [{
         "colleges": [{
             "Name": "Amity Institute of Horticulture Studies and Research, Noida",
             "mySql_college_id": "143"
         }, {
             "Name": "Amity Institute of Nuclear Science & Technology, Noida",
             "mySql_college_id": "156"
         }, {
             "Name": "Amity School of Engineering and Technology, Noida",
             "mySql_college_id": "73"
         }]
     }, {
         "courses": [{
             "Name": "B Tech Civil Engineering",
             "Level": "Bachelors"
         }, {
             "Name": "B Tech Automobile Engineering",
             "Level": "Bachelors"
         }, {
             "Name": "B Tech Electronics & Communication Engineering",
             "Level": "Bachelors"
         }, {
             "Name": "B Tech Electrical & Electronic Engineering",
             "Level": "Bachelors"
         }, {
             "Name": "B Tech Computer Science & Engineering",
             "Level": "Bachelors"
         }, {
             "Name": "B Tech Electronics & Instrumentation Engineering",
             "Level": "Bachelors"
         }, {
             "Name": "B Tech Horticulture",
             "Level": "Bachelors"
         }, {
             "Name": "B Tech Information Technology",
             "Level": "Bachelors"
         }, {
             "Name": "B Tech Mechanical Engineering",
             "Level": "Bachelors"
         }, {
             "Name": "B Tech Nuclear Science Engineering",
             "Level": "Bachelors"
         }]
     },
     []
 ]
 }

使用在线json编辑器以正确的格式查看。

【问题讨论】：

我想访问课程和学院的名称
那么你想从中得到什么？课程或学院或两者兼而有之？
课程和学院在同一对象或不同对象中，

标签： javascript jquery angularjs json

【解决方案1】：

给你..我有两个不同的数组，并以列表的形式将它们放在视图中。看看吧。

 <html>
        <head>
            <script src="bower_components/angular/angular.js"></script>
            <script>
            angular.module('myApp',[])
            .controller('myCtrl',function($scope){
                var json = {"status": "sucsuss",
                "data": [{
                   "colleges": [{
                       "Name": "Amity Institute of Horticulture Studies and Research, Noida",
                       "mySql_college_id": "143"
                   }, {
                       "Name": "Amity Institute of Nuclear Science & Technology, Noida",
                       "mySql_college_id": "156"
                   }, {
                       "Name": "Amity School of Engineering and Technology, Noida",
                       "mySql_college_id": "73"
                   }]
               }, {
                   "courses": [{
                       "Name": "B Tech Civil Engineering",
                       "Level": "Bachelors"
                   }, {
                       "Name": "B Tech Automobile Engineering",
                       "Level": "Bachelors"
                   }, {
                       "Name": "B Tech Electronics & Communication Engineering",
                       "Level": "Bachelors"
                   }, {
                       "Name": "B Tech Electrical & Electronic Engineering",
                       "Level": "Bachelors"
                   }, {
                       "Name": "B Tech Computer Science & Engineering",
                       "Level": "Bachelors"
                   }, {
                       "Name": "B Tech Electronics & Instrumentation Engineering",
                       "Level": "Bachelors"
                   }, {
                       "Name": "B Tech Horticulture",
                       "Level": "Bachelors"
                   }, {
                       "Name": "B Tech Information Technology",
                       "Level": "Bachelors"
                   }, {
                       "Name": "B Tech Mechanical Engineering",
                       "Level": "Bachelors"
                   }, {
                       "Name": "B Tech Nuclear Science Engineering",
                       "Level": "Bachelors"
                   }]
               },
          ]};



          console.log(json);
          $scope.colleges = json.data[0].colleges;
          $scope.courses = json.data[1].courses;



            });
            </script>
        </head>
        <body ng-app="myApp" ng-controller="myCtrl">
            <ul>Colleges
                <li ng-repeat="x in colleges">{{x.Name}}-------{{x.mySql_college_id}}</li>
            </ul>
            <ul>Courses
                <li ng-repeat="x in courses">{{x.Name}}-------{{x.Level}}</li>
            </ul>
        <body>
    </html>

【讨论】：

【解决方案2】：

给你

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  var json = {

    "status": "sucsuss",
    "data": [{
        "colleges": [{
          "Name": "Amity Institute of Horticulture Studies and Research, Noida",
          "mySql_college_id": "143"
        }, {
          "Name": "Amity Institute of Nuclear Science & Technology, Noida",
          "mySql_college_id": "156"
        }, {
          "Name": "Amity School of Engineering and Technology, Noida",
          "mySql_college_id": "73"
        }]
      }, {
        "courses": [{
          "Name": "B Tech Civil Engineering",
          "Level": "Bachelors"
        }, {
          "Name": "B Tech Electronics & Instrumentation Engineering",
          "Level": "Bachelors"
        }, {
          "Name": "B Tech Nuclear Science Engineering",
          "Level": "Bachelors"
        }]
      }

    ]
  };
  $scope.ocw = json;
});

/* Put your css in here */

.odd {
  background-color: #D3D3D3;
}

.even {
  background-color: #FFFFF0;
}

<!doctype html>
<html ng-app="plunker" >
<head>
  <meta charset="utf-8">
  <title>AngularJS Plunker</title>
  <script>document.write('<base href="' + document.location + '" />');</script>
  <link rel="stylesheet" href="style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js">   </script>
  <script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">

 <table class="table table-bordered" >
<tr ng-class-odd="'odd'" ng-class-even="'even'" ng-repeat= "college in ocw.data[0].colleges">
    <td>{{ college.Name }}</td>
</tr>
<tr ng-class-odd="'odd'" ng-class-even="'even'" ng-repeat="course in ocw.data[1].courses">
    <td>{{ course.Name}}</td>
    <td>{{ course.Level}}</td>
</tr>
</table>
</body>
</html>

【讨论】：