angularjs with Java backend

Question

I am trying to get data from server (servlet) in json format and add into table. The data successfully get from server side and when I use console.log(data), it prints data but it doesn't add it in table.

module.js:

var module = angular.module('myApp', []);

module.service('ContactService', function($http) {

    var contacts = [{ }];
    this.getContacts = function($http) {
        var response = $http.get("/PersonalDetail/AngularServlet");
        response.success(function(data, status, header, config) {
            contacts=data;
            console.log("contacts: " + contacts);
            return contacts;
        });
        response.error(function(data, status, header, config) {
            return null
        });
        return contacts;
    }

    this.list = function($http) {
        return  this.getContacts($http);
    }
});

controller.js

module.controller("ContactController", function($scope,$http,ContactService) {
    $scope.contacts=ContactService.list($http);
}

index.html

<html data-ng-app="myApp">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!--<title>JSP Page</title>-->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js" type="text/javascript"></script>
    <script src="js/module/module.js"  type="text/javascript" ></script>
    <script src="js/controller/controller.js" type="text/javascript" ></script>
</head>
<body>
    <div data-ng-controller="ContactController">           
        <table class="table table-striped table-bordered" bgcolor="orange" border="1">
            <thead>
                <tr>
                    <th>Name   </th>
                    <th>Email  </th>
                    <th>Phone  </th>
                    <th>Action </th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="contact in contacts">
                    <td>{{ contact.name}}</td>
                    <td>{{ contact.email}}</td>
                    <td>{{ contact.phone}}</td>                       
                </tr>
            </tbody>
        </table>
    </div>
</body>

dfsq · Accepted Answer · 2014-08-05 05:05:41Z

2

Here is a proper way to deal with promises in Angular. In controller:

module.controller("ContactController", function($scope, $http, ContactService) {
    ContactService.list().then(function(data) {
        $scope.contacts = data;
    });
}

And then modified service:

module.service('ContactService', function ($http) {

    this.getContacts = function () {
        return $http.get("/PersonalDetail/AngularServlet").then(function (data, status, header, config) {
            return contacts;
        }, function (data, status, header, config) {
            return null;
        });
    }

    this.list = function () {
        return this.getContacts();
    }
});

Then the most important thing is that you should return promise object from list method (and getContacts).

answered Aug 5, 2014 at 5:05

dfsq

193k26 gold badges244 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Vivek Tailang · Accepted Answer · 2014-08-05 06:25:51Z

0

According to me in existing code just change the var contacts = [{ }]; to var contacts = [];

or remove the

var contacts = [{ }];

secondly in success of $http.get set the contacts like:

 response.success(function(data, status, header, config) {
            $scope.contacts=data;
            // console.log("contacts: " + contacts);
            // return contacts;
        });

Above solution by "dfsq" is also good and very structured for the execution.

answered Aug 5, 2014 at 6:25

Vivek Tailang

1

Comments

Amir · Accepted Answer · 2014-11-24 12:25:57Z

You could try following method. This is clean and manageable way to do it. You need to have AngularJS factory that works as service, which will delegate to controller class, where your contacts are going to be pushed to own array scope. Then you can simply loop that in front-end and you get your contact. So here's the code:

Service

var module = angular.module('myApp', []);
module.factory('ContactService', ['$http', function($http) {
    return {
      //You can add as many REST calls inside this return as you want
        getContacts: function(){
          return $http.get("/PersonalDetail/AngularServlet").success(function(data){
            return data;
          })
        }
    };
});

Controller

var module = angular.module('myApp', []);

module.controller('ContactController', ['$http', '$scope', 'ContactService', function($http, $scope, ContactService){
  $scope.contacts = [];

    ContactService.getContacts().success(function(data){
      //Depending on data structure in your REST call you might need first to loop the data
      $scope.contacts.push(data);
    })
}]);

index.html

<div data-ng-controller="ContactController">           
    <table class="table table-striped table-bordered" bgcolor="orange" border="1">
        <thead>
            <tr>
                <th>Name   </th>
                <th>Email  </th>
                <th>Phone  </th>
                <th>Action </th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="contact in contacts">
                <td>{{ contact.name}}</td>
                <td>{{ contact.email}}</td>
                <td>{{ contact.phone}}</td>                       
            </tr>
        </tbody>
    </table>
</div>

Hope this help :)

Collectives™ on Stack Overflow

angularjs with Java backend

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related