CODEWITHSUNDEEP
javascripthtmljsonangularjs
krammer
krammer

Reputation: 2668

Unable to parse JSON with AngularJS

I have just started with AngularJS and tried a very basic example. The webpage contains a button, on click of which I request a json from the server. But whenever, I click the button, the code executes the portion in the error function.

HTML file

<!DOCTYPE html>
<head>
    <title> step 4</title>
</head>

<body ng-app="step4App">
    <div ng-controller="FriendsCtrl">

        <button ng-click="loadFriends()">Load Friends</button>
    </div>

    <script src="angular.min.js"></script>
    <script src="xml2json.js"></script>
    <script src = "step4.js"></script>
</body>
</html>

JS

var app = angular.module("step4App",[]);

app.controller("FriendsCtrl", function($scope,$http) {
    $scope.loadFriends = function(){



        $http({method:'GET',url:'http://localhost:8080/test.jsp', params:{name:"abc",no:"LBF1151638"}}).success(function(data) {
            $scope.friends = data;
            document.write('<p>two</p>');
            document.write(data);
        }).error(function() {

            alert("error");
            });
            }

});

The jsp page as of now is returning this json response.

{"response":{"numFound":0,"start":0,"docs":[]}}

But I am not able to understand, why it always executes the error function.

I checked in the browser Console that a request is being made and a 47byte response is received (equal to the no of characters in the JSON). But it doesn't print the JSON.

Upvotes: 0

Views: 1075

Answers (1)

Christophe L
Christophe L

Reputation: 14045

There could be something wrong happening on the server. Try opening the page with FireFox + Firebug and inspect the server response to make sure it's what you expect (check the status code and the Content-Type response header).

You can also run from a command line do a curl -v http://localhost:8080/test.jsp.

BTW Angular passes you extra parameters in the callbacks. Try alert-ing them too see what they are. From http://docs.angularjs.org/api/ng/service/$http:

$http({method: 'GET', url: '/someUrl'}).
success(function(data, status, headers, config) {
  // this callback will be called asynchronously
  // when the response is available
}).
error(function(data, status, headers, config) {
  // called asynchronously if an error occurs
  // or server returns response with an error status.
});

Upvotes: 1

Related Questions