ddd
ddd

Reputation: 5029

AngularJS: http request does not return anything

I wanted to build a simple page for query with an input box and a button. Here is my html:

<html ng-app="cgApp" >
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
    <script src="../js/controller.js"></script>
    <script src="../js/service.js"></script>

  </head>
  <body>
    <div ng-controller="CgseqCtrl">
        <input ng-model="analysisid"><button ng-click="searchById()">Search</button>
        <table>
            <tr>
                <td>{{seq.analysisId}}</td>
                <td>{{seq.center}}</td>
                <td>{{seq.diseaseAbbr}}</td>
                <td>{{seq.filepath}}</td>
                <td>{{seq.library}}</td>
            </tr>
        </table>

    </div>

  </body>
</html>

Function to handle ng-click event searchById() is implemented in my controller.js

var app = angular.module('cgApp', [])

app.controller('CgseqCtrl', ['$scope', 'Cgseq', function($scope, Cgseq){
    $scope.searchById = function() {
        Cgseq.getSeqById($scope.analysisid)
        .then(function(response){
            $scope.seq = response;
        }, function errorCallBack(response) {
            console.log(response.$statusText);
        });
    }
}]);

Cgseq is name of my factory in service.js.

app.factory("Cgseq", function ($http) {
    // return $resource('http://localhost:8080/cgweb/api/seqs/fdebfd6e-d046-4192-8b97-ac9f65dc2009');
    var service = {};
    service.getSeqById = function(analysisid) {
        return $http.get('http://localhost:8080/cgweb/api/seqs/' + analysisid);
    }
    return service;
});

When I load basic.html, type in the string for query and click the button, nothing happens in the page. I tried to debug step by step, it turns out it never got into .then or function errorCallBack. Nothing from logs of node.js server or tomcat server looks suspicious. What did I do wrong?

EDIT #1:

Based on the network status, it looks like connection to server is good (200). network tab

Upvotes: 0

Views: 305

Answers (1)

war1oc
war1oc

Reputation: 2755

Cgseq.getSeqById($scope.analysisid)
        .then(function(response){
            $scope.seq = response.data; // You have to use response.data
        }, function errorCallBack(response) {
            console.log(response.$statusText);
        });

Reference: https://docs.angularjs.org/api/ng/service/$http

If you do a console.log(response) in the then callback you can see the structure of the response object.

Upvotes: 1

Related Questions