What is the best way to display JSON data with Angular and Spring MVC?

Question

What is the best way to display JSON data with Angular and Spring MVC?

After receiving valid JSON Data through @RestController, I am wondering if my method of displaying it on an angular jsp is correct.

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>

javascript json angularjs spring-mvc

Answer 1

Answer №1

If you want to solve this issue, consider using the following:

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>

Consider trying something like:

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

You can simplify it first and then add status, headers, and config once it's functioning. For handling multiple states, check out ng-repeat or refer to a helpful post here.

When retrieving Json data, I typically use:

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;
    })
  }
}]);

I hope this information proves helpful.

Answer 2

If you want to solve this issue, consider using the following:

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>

Consider trying something like:

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

You can simplify it first and then add status, headers, and config once it's functioning. For handling multiple states, check out ng-repeat or refer to a helpful post here.

When retrieving Json data, I typically use:

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;
    })
  }
}]);

I hope this information proves helpful.

Answer 3

Answer №2

Initially, your controller is not registered with the module. (I'm not sure if you just copied and pasted the code or if you wrote it in a condensed format for Stack Overflow).

Furthermore, I noticed in the controller that you have declared $scope.state:

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

However, in the view, you are using {{states}} (in plural form):

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

This doesn't seem to be correct, does it?

Additional Information:
The message "The resource identified...." suggests a possible absence of Spring ContentNegotiationViewResolver or a missing @ResonpseBody annotation, along with potentially missing libraries (which I don't see in your case).

Please refer to these links:
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 aspects need to be taken into consideration (including adding JAR files, configuring annotations OR ContentNegotiationViewResolver).

Lastly, while the accept header may not be crucial, it's recommended to ensure that both accepts and content types are set correctly so that browsers can recognize themselves as accepting the json data.

Answer 4

Initially, your controller is not registered with the module. (I'm not sure if you just copied and pasted the code or if you wrote it in a condensed format for Stack Overflow).

Furthermore, I noticed in the controller that you have declared $scope.state:

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

However, in the view, you are using {{states}} (in plural form):

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

This doesn't seem to be correct, does it?

Additional Information:
The message "The resource identified...." suggests a possible absence of Spring ContentNegotiationViewResolver or a missing @ResonpseBody annotation, along with potentially missing libraries (which I don't see in your case).

Please refer to these links:
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 aspects need to be taken into consideration (including adding JAR files, configuring annotations OR ContentNegotiationViewResolver).

Lastly, while the accept header may not be crucial, it's recommended to ensure that both accepts and content types are set correctly so that browsers can recognize themselves as accepting the json data.

What is the best way to display JSON data with Angular and Spring MVC?

Answer №1

Answer №2

Similar questions

Rendering templates using AngularJS within a Play Framework 2 project

Issue concerning the encoding when using json_decode

cssclassName={ validatorState === RIGHT ? 'valid' : 'invalid' }

Mastering the ng-submit directive for AngularJS

Unusual occurrences of Vuex mutations within an Electron application utilizing electron-vue framework

Ways to run a function with a delay

Is it necessary to compile the React JavaScript project before uploading it to npm?

Issue with footer not dynamically adjusting its height when scrolling to the bottom

Retrieve an HTML document from a specified URL using JavaScript AJAX methods

The JSON response from the test website contains additional characters that are causing issues with the json_decode function

Having difficulty sending string values with Axios and FormData in Vue.js

Tips for dynamically changing the class of a form field in jQuery when it is empty

markers not included in the map

Utilizing jQuery or JavaScript to convert a PHP return value into an array for use in JavaScript

Use the map function to find the highest number within each array

Encountered an error while trying to initiate MongoDB using dpd-d

What is the best way to achieve consistent alignment in Javascript?

using async.waterfall with async.apply

Exploring Next.js with getServerSideProps

Maintain the state of the previous page in Vue to ensure continuity