Get JSON data to angularJS module [duplicate]

Question

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?

[{"Code":"1","Type":"Luxuary","MinFee":"2000.00","DayRate":"50.00"},{"Code":"2","Type":"sample","MinFee":"300.00","DayRate":"200.00"},{"Code":"3","Type":"Economy","MinFee":"2000.00","DayRate":"45.00"},{"Code":"4","Type":"sdf","MinFee":"456.00","DayRate":"454.00"},{"Code":"5","Type":"sfdsdfsdf","MinFee":"2323.00","DayRate":"2323.00"}] — Viraj
– Viraj, Commented Oct 13, 2017 at 4:04

Amit Kumar · Accepted Answer · 2017-10-13 04:12:20Z

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>

edited Oct 13, 2017 at 4:12

answered Oct 13, 2017 at 4:07

Amit Kumar

5,96212 gold badges49 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Get JSON data to angularJS module [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related