Get User Details using $http

Rumman Ansari   Software Engineer   2024-07-28 05:17:56   243  Share
Subject Syllabus DetailsSubject Details
☰ TContent
☰Fullscreen
  • 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 
<span class="pln">
</span><span class="kwd">var</span><span class="pln"> app </span><span class="pun">=</span><span class="pln"> angular</span><span class="pun">.</span><span class="kwd">module</span><span class="pun">(</span><span class="str">'myApp'</span><span class="pun">,</span><span class="pln"> </span><span class="pun">[]);</span><span class="pln">
app</span><span class="pun">.</span><span class="pln">controller</span><span class="pun">(</span><span class="str">'myCtrl'</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> </span><span class="pun">(</span><span class="pln">$scope</span><span class="pun">,</span><span class="pln"> $http</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="com">//Define scope variable users here</span><span class="pln">
    </span><span class="com">//Use http service that consumes https://jsonplaceholder.typicode.com/users</span><span class="pln">
    

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

</span><span class="tag">&lt;/div&gt;</span><span class="pln">

</span><span class="tag">&lt;/body&gt;</span><span class="pln">
</span><span class="tag">&lt;/html&gt;</span><span class="pln">
</span>

Solution

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

</span>

No Questions Data Available.
No Program Data.

Stay Ahead of the Curve! Check out these trending topics and sharpen your skills.