CODEWITHSUNDEEP
javascriptangularjs
Sivasakthi Jayaraman
Sivasakthi Jayaraman

Reputation: 4724

How to handle Async http call in AngularJS

I am new to Angularjs. I am creating some employee app which basically fetch the data from http call(json) and display it using angularjs. The problem is before getting the response from http call my view got executed, so nothing displayed in my output page. I know there should be some logic to handle the async call but i am not aware of that, so could someone please help me?

Home.html

<html ng-app="employeeApp">
<head>
<link rel="stylesheet"
    href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<meta charset="utf-8">
<title>Employee Example</title>
<script
    src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.min.js"></script>
<script>
    var employeeApp = angular.module('employeeApp', []);
    employeeApp.controller('EmployeeCtrl', ['$http','$scope',
            function(http, scope) {
                http.get('http://localhost:9999/employee/7').success(
                        function(data) {
                            scope.employees = data;
                        });
            } ]);
</script>
</head>
<body ng-controller="EmployeeCtrl">
    <table class="table table-striped">
        <tr>
            <th>ID</th>
            <th>NAME</th>
            <th>AGE</th>
            <th>LOCATION</th>
        </tr>
        <tr ng-repeat="employee in employees">
            <td>{{employee.id}}</td>
            <td>{{employee.name}}</td>
            <td>{{employee.age}}</td>
            <td>{{employee.location}}</td>
        </tr>
    </table>
    <hr>
    <hr>
</body>
</html>

Actual output:

enter image description here

My Expected output: enter image description here

Note:
If i load from json file or run from web browser i got the expected output but its not working in Angular script. 

http://localhost:9999/employee/7
{"id":7,"age":65,"name":"test","location":"singapore"}

Upvotes: 0

Views: 152

Answers (3)

Hieu TB
Hieu TB

Reputation: 162

You can use Chrome Developer Tool (press F12 on Chrome) to debug the script. Watch "Network" tab for response data from server.

One other way I usually use to check bug like this is to print directly the varaiable to the template like this:

<body ng-controller="EmployeeCtrl">
{{employees}}
</body>

Sometime this helps me find out what happned to my data. Just remember to clear that after you solve the problem :)

Upvotes: 1

pcnate
pcnate

Reputation: 1774

You are expecting ng-repeat to get a "list" of objects. What you are getting instead is a single object which ng-repeat is likely iterating though. Each property however does not have the expected properties of id, name etc.

What you should be returning instead in your ajax response should more like this:

[
  {"id":7,"age":65,"name":"test","location":"singapore"},
  {"id":7,"age":65,"name":"test","location":"singapore"},
  {"id":7,"age":65,"name":"test","location":"singapore"},
  {"id":7,"age":65,"name":"test","location":"singapore"}
]

Or, for a single item it would be:

[
  {"id":7,"age":65,"name":"test","location":"singapore"}
]

Upvotes: 3

kodebot
kodebot

Reputation: 1778

You don't see any data because 'employees' is not array (i.e. your endpoint returns just one object).

Either return array of object(s) from your endpoint or if you always get only one object then remove ng-repeat and replace 'employee' with 'employees' in your binding.

Note: When you use object in ng-repeat then it will iterate properties in the object.

Upvotes: 4

Related Questions