Enes Yurtlu Enes Yurtlu - 3 months ago 13
AngularJS Question

Parsing Json using angular. gets blank screen

I'm trying to parse an json. I am using this code to parse an array:



{"records":[{"id":"1","first_name":"John","last_name":"Doe"},{"id":"2","first_name":"Jane","last_name":"Doe"},{"id":"3","first_name":"John","last_name":"Cena"},{"id":"4","first_name":"Dwayne","last_name":"Johnson"}]}

<!DOCTYPE html>
<html>
<script src="angular.js"></script>

<body>

<div ng-app="myApp" ng-controller="customersCtrl">

<ul>
<li ng-repeat="myData in myData">
{{ myData.first_name + ', ' + myData.last_name }}
</li>
</ul>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("http://eyurtlu.com/jsonmake/js/posts.json").then(function(response) {
$scope.myData = response.data.records;
});
});
</script>

</body>

</html>





but it isn't work for me. How can I make this? I am just trying to get data from MySQL db to json to angular. I added my json file to post.
I am converting MySQL to json using this php script: http://eyurtlu.com/jsonmake/bilgi.php

Win Win
Answer

You have typo inside ng-repeat.

<li ng-repeat="myData in myData">
                  ^        ^

Fix

<ul>
   <li ng-repeat="item in myData">
      {{item.first_name}}, {{item.last_name}}
   </li>
</ul>

Demo at Plunker

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
    <script>document.write('<base href="' + document.location + '" />');</script>
    <script src="https://code.angularjs.org/1.5.7/angular.js"></script>
    <script src="https://code.angularjs.org/1.5.7/angular-route.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
      <div ng-controller="customersCtrl">
        <ul>
          <li ng-repeat="item in myData">
            {{item.first_name}}, {{item.last_name}}
          </li>
        </ul>
      </div>
  </body>
<script>

(function () {

    var app = angular.module('myApp', []);
    app.controller('customersCtrl', function($scope, $http) {
      
        $http.get("http://eyurtlu.com/jsonmake/js/posts.json").then(function(response) {
          $scope.myData = response.data.records;
        });
    });
      
})();
  
  </script>
  
</html>