srv srv - 6 months ago 17
Javascript Question

Not able to access data in html from json format

I need to access the api data in html file, which is there in json format in my controller...
I'm trying in both ways but now accessible

$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"
}]
},
[]
]
}


use json editor online to view in proper format.

Answer

Here you go.. I got two different arrays and got them on the view in form of List. Have a look.

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