Get User Details using $http

Rumman Ansari   Software Engineer   2024-07-06 02:03:50   147 Share
Subject Syllabus DetailsSubject Details
☰ Table of Contents

Table of Content:

  • 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;
    });
});