How to show JSON Data using Angular, Spring MVC?

Question

I have valid JSON Data coming in through @RestController. Assuming my configuration is correct, am I going about showing it on angular jsp the right way?

Spring Controller

@RequestMapping(value="/states",
                        method=RequestMethod.GET,produces= {"application/xml", "application/json"})
                @ResponseStatus(HttpStatus.OK)
                public Object getStates() throws Exception{

                JSONObject obj = new JSONObject();
                String result= dataManager.getStates();
                obj.put("states", result);
                return obj;
  }

index.jsp

var app = angular.module('myApp', []);
function MyController($scope, $http){

    $scope.getStateDataFromServer = function() {            
        $http({method: 'GET', url: 'http://localhost:8080/states'}).
        success(function(data, status, headers, config) {
            $scope.state = data;
        }).
        error(function(data, status, headers, config) 
        });
    };
   };
</script>
</head>
<body>
<div data-ng-app="myApp">
    <div data-ng-controller="MyController">
        <button data-ng-click="getStateDataFromServer()">Get State data from server</button>
        <p>States : {{states}}</p>

score 1 · Answer 1 · edited May 23 '17 at 11:44

First, your controller isn't registered to the module. (Not sure if you copy pasted the actual code or wrote it in a condensed way for SO).

That aside, I see in the controller, you have $scope.state:

success(function(data, status, headers, config) {
    $scope.state = data; //<- here
})

And in the view, you have {{states}} (plural):

<p>States : {{states}}</p>

Surely this isn't correct?

Additions:
The message "The resource identified...." indicates either a missing Spring ContentNegotiationViewResolver or the lack of a @ResonpseBody annotation, or even missing libraries (in your case, I don't see any).

See here:
Spring MVC error: The resource identified by this request is only capable of generating responses
and here:
406 Spring MVC Json, not acceptable according to the request "accept" headers

All parts are addressed (JARS to be added, the annotations OR ContentNegotiationViewResolver to be configured).

Lastly, although the accept header isn't terribly important, you might want to consider setting both accepts and content types correctly so that your browsers identify themselves as accepting the json data.

Thank you. Modified that portion. Now I get..The resource identified by this request is only capable of generating responses with characteristics not acceptable according to the request "accept" headers. — Angular_Newbie, May 27 '15 at 13:35
@Angular_Newbie If you mean that that's the string *"The resource...."* which is being appended to the dom by Angular, then that's a server-side issue, likely to do with Spring MVC configuration. See my updated answer for some pointers. — BluePill, May 27 '15 at 13:42

score 1 · Answer 2 · edited May 23 '17 at 12:31

You should solve with:

App.js:

var app = angular.module('myApp', []);
//Controller
app.controller("MyController", ["$scope", "$http",function($scope, $http){

 $scope.getStateDataFromServer = function() {
   $http({method: 'GET', url: 'http://localhost:8080/states'}).
    success(function(data, status, headers, config) {
        $scope.data = state;
    }).
    error(function(data, status, headers, config) 
    });
 }
}]);

Html:

<div data-ng-app="myApp">
    <div data-ng-controller="MyController">
        <button data-ng-click="getStateDataFromServer()">Get State data from    
                                                         server</button>

           <p>States : {{state}}</p> //Because $scope.data=state;
           //If you have data associated should do: {{state.myFirstData}}
    </div>
</div>

Maybe you should try with something like:

$http({method: 'GET', url: 'http://localhost:8080/states'}).
    success(function(data){ . . .

to make it easier, and then putting status, headers and config too when it works. If you want to handle multiple states look up for ng-repeat, I link a post that can help you.

To get some Json, I usually do something like:

Example.js:

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

  $scope.initGetRequest = function(){
    $http.get('http://localhost/myJSON.json').success(function(data){

      $scope.data=data;
    })
  }
}]);

Hope I've been helpfull.

(The resource identified by this request is only capable of generating responses with characteristics not acceptable according to the request "accept" headers). I have added jacksonMessageConverter bean along with jackson-mapper-asl, jackson-core, and jackson-databind. Any suggestions? — Angular_Newbie, May 27 '15 at 13:37

How to show JSON Data using Angular, Spring MVC?

2 Answers2