获取JSON数据到angularJS模块[重复]

Question

This question already has an answer here:

• Angular get JSON data with ajax 1 answer

I am trying to bind json data to angular module. Following is my code.

<script>
  var app = angular.module('myApp',[]);
  app.controller('myCtrl',function($scope,$http){
    $http.get("list.php").then(function(response) {
        $scope.myData = response.data.records; 
    });
  });
</script> 

    <div class="col-md-12"><!--col 1-->
       <ul>
        <li ng-repeat="z in myData">
          {{ z.Type }}
        </li>
      </ul>

And my list.php file,

<?php    
include_once("mysql_db/db.php");
$sql = "SELECT * FROM taxitype";
$data = retrieve($sql); // This execute mysqli functions and return an array
echo json_encode($data);  
?>

But it is now displaying list in HTML file. What can be the reason? Is their any special way to create json objects for angularJS?

</div>

Answer 1

you should write response.data instead of response.data.records. as your JSON is an array not object.

See $http service response object properties.

Here is your updated code.

<script>
  var app = angular.module('myApp',[]);
  app.controller('myCtrl',function($scope,$http){
    $http.get("list.php").then(function(response) {
        $scope.myData = response.data; 
    });
  });
</script> 

    <div class="col-md-12"><!--col 1-->
       <ul>
        <li ng-repeat="z in myData">
          {{ z.Type }}
        </li>
      </ul>