Search code examples
angularjsjspxmlhttprequestangularjs-http

AngularJS - Table not getting populated from xmlhttprequest

Hello Everyone i am new to angular js and i have written the following page which suppose to display a table of employee details which is coming from " http://localhost:8080/SpringRestHibernateWebTest/employee/listEmployee " as a json object.

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 

"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>SPRING REST HIBERNATE WEB TEST</title>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.js"></script>


<script type="text/javascript">

var app = angular
.module("myModule",[])
.controller("myController", function($scope){

    var EmployeeJSON = null;


    var xhttp = new XMLHttpRequest();
    xhttp.open("GET", "http://localhost:8080/SpringRestHibernateWebTest/employee/listEmployee", true);
    xhttp.setRequestHeader("Content-Type", "application/json");
    xhttp.send();

    xhttp.onreadystatechange = function() {
    if(xhttp.readyState == 4 && xhttp.status == 200) {
        var response = JSON.stringify(xhttp.responseText);
        //alert(JSON.parse(response));
        EmployeeJSON = JSON.parse(response);

        var employees = EmployeeJSON;

        $scope.employees = employees;
        $scope.IsVisible = true;

        alert('employees '+employees);
        alert('$scope.employees '+$scope.employees);
        alert('EmployeeJSON '+EmployeeJSON);

    }
}



});

<body ng-app="myModule">
<h1>SPRING REST HIBERNATE WEB TEST</h1>

<a href="/SpringRestHibernateWebTest/employee/listEmployee">CLICK FOR EMPLOYEE LIST</a>

<form>

<table>
<tr> <td>EMPLOYEE ID</td> <td><input type="text" id="emp_id"></td> </tr>
<tr> <td>EMPLOYEE NAME</td> <td><input type="text" id="emp_name"></td> </tr>
<tr> <td>EMPLOYEE SALARY</td> <td><input type="text" id="emp_salary"></td> </tr>
<tr> <td>EMPLOYEE ADDRESS</td> <td><input type="text" id="emp_address"></td> </tr>
</table>

</form>


<div ng-controller="myController">






<table>

<thead>

<tr> <td>EMPLOYEE ID</td> <td>EMPLOYEE NAME</td> <td>EMPLOYEE SALARY</td><td>EMPLOYEE ADDRESS</td></tr>

</thead>

<tbody>

<tr ng-repeat="employee in employees">

 <td>{{employee.employeeId}}</td>
 <td>{{employee.employeeName}}</td>
 <td>{{employee.employeeSalary}}</td>
 <td>{{employee.employeeAddress}}</td>

</tr>

</tbody>


</table>


</div>

</body>
</html>

As per coding while the page is loading alert from the angular controller is getting populated and displaying json object but table is not getting populated.

Any suggestion would be appreciated !!

Solution

  • You use XMLHttpRequest which lives outside Angular.

    So you have to manually trigger Angular's digest cycle using $scope.$apply();.

    // ...
$scope.employees = employees;
$scope.IsVisible = true;
$scope.$apply();
// ...

    However a better way to execute http requests to an API is using $http service.

    First of all, you have to inject $http service in Controller definition:

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

    And then, you can have something like:

    var endpoint = "http://localhost:8080/SpringRestHibernateWebTest/employee/listEmployee";

return $http.get(endpoint)
    .then(function(response) {
        // Use data as per your needs
        // response.data
    })
    .catch(function(response) {
        // Error occured
    })
    .finally(function() {
        // Always do something
    });

    This way, you don't have to call manually $scope.$apply();.

    More information in $http service you can find in w3schools, or in Angular documentation or in many places all over the web.