Table of Contents

    Get User Details using $http

    Rumman Ansari July 28, 2024 488 views
    • 1. Get User Details using $http
    • Write an AngularJS program to read JSON data from: https://jsonplaceholder.typicode.com/users
    • Define the empty scope variable users, and assign the response JSON to the scope variable users. Display the user ID and email of all users in a table format.

    Sample Code

    index.js 
    
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope, $http) {
    //Define scope variable users here
    //Use http service that consumes https://jsonplaceholder.typicode.com/users
    

});
    index.html 
    
  <!-- Hmtl -->
<html>
<head>
<script src="lib/angularjs/angular.min.js"></script>
<script src="lib/angularjs/angular-mocks.js"></script>
<script src="index.js" type="text/javascript"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
 <table border="1">
            <thead>
                <tr>
                    <th>
                        User Name
                    </th>
                    <th>
                        Email ID
                    </th>
                </tr>
            </thead>
            <tr ng-repeat="user in users">
                <td>
                    {{user.name}}
                </td>
                <td>
                    {{user.email}}
                </td>
            </tr>
        </table>
<ul>

</div>

</body>
</html>

    Solution

    index.js 
    
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
    $scope.users = [];
    $http.get("https://jsonplaceholder.typicode.com/users")
    .then(function(response) {
        $scope.users = response.data;
    });
});