Geek Answers Handbook

Java support angularjs

I am trying to get data from a server (servlet) in json format and add to the table. The data is successfully received from the server side, and when I use console.log (data), it prints the data, but does not add it to the 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>

+4
source share
3 answers

Here is the right way to deal with promises in Angular. In the controller:

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

And then the 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 must return the promise object from the method list(s getContacts).

+2
source

In my opinion, in existing code, just change var contacts = [{}]; before var contacts = [];

var contacts = [{ }];

-, $http.get :

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

"dfsq" .

0

You can try the following method. This is a clean and manageable way to do this. You should have an AngularJS factory, which works as a service, which will delegate the controller class, where your contacts will be redirected to your own area of ​​the array. Then you can just loop it in the interface and you will get your contact. So here is 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 :)

0
source

More articles:


All Articles