Print json users id in html by using angular

Question

I want to print just the id of users JSON file {{item.id}} but it doesn't work, i can not understand where is the problem. i think the problem is in $http.get(urls).then() but but i don't know how can i fixed this.

IF I write like this {{item}} it will work.

var app = angular.module("myApp", []);

app.controller("controller", function($scope, $http) {



  var url = "https://jsonplaceholder.typicode.com/users";

  $http.get(urls).then(function(response) {
    $scope.users = response;
  });

});

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

<head>

  <meta charset="utf-8">
  <title>AngularJa | app</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
  <script type="text/javascript" src="javascript/main.js"></script>

</head>

<body ng-controller="controller">

  <table class="table table-striped">
    <tr ng-repeat="item in users">
      <td>{{item.id}}</td>
    </tr>
  </table>



</body>

</html>

score 1 · Answer 1 · answered Dec 02 '17 at 22:19

Change urls to url and the data is a property of the response object and is named data

var app = angular.module("myApp", []);

app.controller("controller", function($scope, $http) {

  var url = "https://jsonplaceholder.typicode.com/users";

  $http.get(url).then(function(response) {
           //^^ remove "s"
    $scope.users = response.data;
                        // ^^ add data property
  });

});

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

<head>

  <meta charset="utf-8">
  <title>AngularJa | app</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
  <script type="text/javascript" src="javascript/main.js"></script>

</head>

<body ng-controller="controller">

  <table class="table table-striped">
    <tr ng-repeat="item in users">
      <td>{{item.id}} - {{item.name}}</td>
    </tr>
  </table>


</body>

</html>

thank you so much ,, if we use just response it must be work but why it doesn't work. — superHero, Dec 02 '17 at 22:25
Because the `response` object has multiple properties as outlined in the `$http` docs. One of those properties is the data returned from server — charlietfl, Dec 02 '17 at 22:32

Maher · Answer 2 · 2018-05-06T05:25:09.247

0

In old version of angularjs we could use 'success/error' on 'http' but in new version of it 'success/error' removed and 'then' replace instead.

When we use 'success' we can get 'data' directly from the http but on 'then/catch' data is a param of response.

For more information you can read this article why success removed from angularjs

edited May 06 '18 at 05:25

answered May 06 '18 at 05:19

Maher

2,517
1
19
32

Print json users id in html by using angular

2 Answers2