Pass Map from servlet to Angularjs - java

In servlet I got something like:
Map<String, String> myFruits = giveMeSomeFruits();
request.serAttribute("myFruits", myFruits);
And in .js I got:
<label ng-repeat='(key, value) in myFruits'>
<input type='checkbox' value='{{value}}' ng-click='eat(value)'/> {{key}}
</lable>
Now I need to pass the map myFruits from servlet to angularJs, is there any clean way to do that?

This might work.
1.Yes have an ajax call to the servlet from angular.
2.Convert the map
to Json in Java using JSONObject and send the response from
servlet as JSON.
return new JSONObject(myFruits);
$.ajax(
url : url, // Controller URL
success: function(resultJSON){
//Assign resultJSON to myFruits variable
$scope.myFruits = resultJSON;
}});

In your controller, define a function called getMap maybe. Make a call to the servlet using your url for the same, using Method 'GET'.
$scope.getMap = function () {
$http({method: 'GET', url: 'your url'}).
success(function (data, status, headers, config) {
console.log(data);
$scope.myFruits = {data: data};
}).
error(function (data, status, headers, config) {
console.log("error");
});
};
Now you have to override the doGet() function in your servlet, which retrieves this map for you through a query to your database.
Convert the map to Json using
response = gsonHelper.toJson(yourMap);
Send this json as response back to your controller and assign it to a variable defined in scope, say fruits.
Now you can use fruits in your markup to iterate through the map.

Related

Spring REST API, Pass a primitive type to the controller

#CrossOrigin(origins = "http://localhost:3000")
#GetMapping("")
public ResponseEntity<List<ToDoItemViewModel>> loadCategoriesByName(#RequestParam(required = false) String name)
{
List<ToDoItemViewModel> allItemsByCategoryName = toDoItemService.getAllItemsByCategoryName(name);
return new ResponseEntity<>(allItemsByCategoryName, HttpStatus.OK);
}
How can i pass just a primitive type to the controller, here is how my $.ajax looks like
$.ajax({
method: 'GET',
url: "http://localhost:8080/todItems",
contentType: 'application/json',
crossDomain: true,
data: 'Work',
success: (resp) => {
console.log(resp)
},
error: (resp) => {
console.log(resp);
}
})
Now when i debug it, it indeed sends the request to this controller, but the String name is always null for some reason, can you just show me what i have to adjust in my ajax request, it's probably something in the data field.
You are using GET Request with request params(#RequestParam annotation).
#RequestParam means that param in request pass across url, like this;
http://localhost:8080/todItems?name=Work
So, you just need to move data to url params.
If you prefer send data across request body, please do not use GET method, use POST instead. Many web servers are not supporting request body in GET Requests

Can I get a POJO in an Ajax Request to a Spring Controller?

I have a simple JSP file with some radios, one text input and one button.
In the button onClick I am doing an Ajax request to a Spring controller as you can see bellow:
function callFiltrarViaAJAX() {
var filtro = $("#filtro").val();
var optFiltro = $('input[name=optFiltro]:checked').val();
$.ajax({
type : "GET",
url : "filtrar",
//dataType : "json",
data : {
filtro : filtro,
optFiltro : optFiltro
},
success: function(data) {
console.log("SUCCESS: ", data);
},
error: function(e) {
console.log("ERROR: ", e);
},
done: function(e) {
console.log("DONE");
}
});
}
In the Spring controller I am receiving this request with success with the following code:
#Controller
public class FiltroController {
#RequestMapping(value = "/filtrar", method = RequestMethod.GET)
public #ResponseBody String filtrarVacina(FiltroTO filtro, HttpServletResponse response, ModelAndView model) {
VacinaTO v = new VacinaTO();
v.setId(new Long(10));
v.setLote("Lote 1");
v.setNome("BCG");
model.addObject("vacina", v);
response.setStatus(200);
return "TEST OK";
}
}
As you can see in the code above, I'm adding a POJO object in the ModelAndView that I'am trying to use in the JSP to show the return of the Ajax request in a table.
My Ajax request returns with success too but the problem is that even returning with success I can't use the POJO object, when I try to access the object by expression language I got nothing.
I've been searching about this situation and I found a lot of contents but none of the solutions that I've found works for me, but I found an interesting answer:
JSP inside ListItems onclick
So, is it means that I can't get a new parameter in the same JSP file with a Ajax request ? If yes, would be a JSON file the better way to get the return from the Spring controller ?
You can't access the model because you're returning an arbitrary string from controller instead of the view in which you want to access model.
If you're trying to access vacine from some.jsp, then you should return some from the controller method.
Of course, what I said is valid if you have proper ViewResolver configuration.

Spring MVC #ModelAttribute Not Binding Form

I am trying to POST to a Spring MVC controller method via ajax. Using Chrome's developer tools, I can tell that the values from the form are being sent, but in the method, the form values are null.
Here is the jquery call:
var form = $('#renegotiationForm').serialize();
$.ajax({
method:'POST',
url:'/renegotiate/wizard/startRenegotiation',
data:{'renegotiationForm': form},
success: function(data) { this.transitionTo(data); }
});
Here is the Spring MVC method (meant to return only a single string):
#RequestMapping(value="wizard/startRenegotiation", method = RequestMethod.POST)
public #ResponseBody String processStart(#ModelAttribute("renegotiationForm") RenegotiationForm form, BindingResult bindingResult) {
log.debug("Entered showStart(), method=POST");
RenegotiationType type = RenegotiationType.valueOf(form.getRenoType().trim().toUpperCase());
RenegotiationActivity activity = RenegotiationActivity.valueOf(form.getRenoActivity().trim().toUpperCase());
String result = "";
if (type == RenegotiationType.TYPE1 && activity == RenegotiationActivity.ACTIVITY1) {
result = "deleteType1";
}
return result;
}
The values are bound using the Spring Form taglib, and I have confirmed that the path attributes of the form tags match the fields of the RenegotiationForm.
I think it's because you are trying to send an "string" from ajax and you want to get and Object (RenegotiationForm), try to change it to String and Format in Server-side. I recommend you to add the type you are sending from client-side, too.
#RequestMapping(value = "wizard/startRenegotiation", method = RequestMethod.POST, produces="application/json")
Found the answer. Further on in my code, I had a function like this:
var ajaxcall = function() { $.ajax({
// ajax settings
});
}
Unfortunately, setting it up this way doesn't make it work as a jquery deferred, and specifically I couldn't use the .then() function to process of ajax requests.
Thanks for the help.

Using a Map as the RequestBody for a Spring AJAX request (using ExtJS)

I am trying to make an AJAX call from ExtJS to a Spring 3.1.3 backend, using PUT and with a Map as a request parameter. I can successfully make a similar call using a List param and passing a JavaScript array of strings, but cannot get a Map to work using a JavaScript object.
In other words, this works:
#RequestMapping(value="stringTest", method=RequestMethod.PUT)
public #ResponseBody String stringTest(#RequestBody List<String> list) {
//do stuff
return "OK";
}
Ext.Ajax.request({
url: "stringTest",
method: 'PUT',
jsonData: ['one','two'],
success: function() { console.log('ok'); },
failure: function(){ console.log('fail'); }
});
However, this does not work:
#RequestMapping(value="mapTest", method=RequestMethod.PUT)
public #ResponseBody String mapTest(#RequestBody Map<String,String> map) {
//do stuff
return "OK";
}
Ext.Ajax.request({
url: "mapTest",
method: 'PUT',
jsonData: {one: 'one', two: 'two'},
success: function() { console.log('ok'); },
failure: function(){ console.log('fail'); }
});
The request itself does not fail (no 400 error), but the map itself is empty when the mapTest method is instantiated.
One curious point I have discovered is that I am able to make this work using both jsonData and params (but not one or the other) as part of the Ext.Ajax.request, like this:
var data = {one: 'one', two: 'two'};
Ext.Ajax.request({
url: "mapTest",
method: 'PUT',
jsonData: data,
params: data,
success: function() { console.log('ok'); },
failure: function(){ console.log('fail'); }
});
However, I can't use this approach because I cannot have the extra parameters passed as part of the URL string, which is what this ends up doing.
So, the question is, how can I use a Map as my request param, using just jsonData for the request body?

Springs MVC JSON Response and convert it to JS Object

I am having a question that how can I send JSON Object from Springs MVC so that I can convert it into a JavaScript Object on my HTML Page.
In a traditional way I do it: Below is a snippet from Java Servlet which sets a request attribute and forward it to the JSP Page.
JSONObject jsonObj = new JSONObject();
jsonObj.put("name","test");
jsonObj.put("age",24);
request.setAttribute("jsonObj",jsonObj);
request.getRequestDispatcher("test.jsp").forward(request,response);
In JSP I retrieve as :
<script type="text/javascript">
var jsonObj =<%=request.getAttribute("jsonObj"); %>;
alert("name = "+jsonObj.name+" ; age = "+jsonObj.age); // This will output name and age from the JSON Object
</script>
So what I need to ask how can I do the same in Springs MVC. How can I send the JSONObject from Dispatcher Servlet, and convert it to JS object in my JSP page ?
An easy way to do this using the ObjectMapper. It will create an JSON String from your Object. And that you can send to your view/jsp.
I put an small example of a controller I do this (just snipped).
#Controller
public class UsersSettingsController {
#Autowired
UserSettingsDefaultService userSettingsService;
#RequestMapping(value="/userSettings/dynamic/userSettings", method=RequestMethod.GET)
public ModelAndView get() throws Exception {
ModelAndView mav = new ModelAndView();
ObjectMapper mapper = new ObjectMapper();
User user = (User)SecurityContextHolder.getContext().getAuthentication().getPrincipal();
UserSettings userSet = userSettingsService.getUserSettingsByUser(user);
mav.addObject("userSettingsJSON", mapper.writeValueAsString(userSet));
mav.setViewName("userSettings/dynamic/filter");
return mav;
}
}
Or course can you create your JSON Object in your Contoller step by step like you did in your example. Then you don't need the Mapper, just sending the String to your View.
In the JSP you load the json String like this into a JS var:
var jsonString = '${userSettingsJSON}';
To get elements from JSON String or parse, see: http://www.json.org/js.html.
I'm an KnockOut Framework Fan would do it with it.
I think you should use ajax(for example jquery),the following is spring mvc
#RequestMapping(value = "/admin/new/list", method = RequestMethod.GET)
#ResponseBody
public List<News> list()
{
return newsDao.findAll();
}
and in the jsp page,you may use ajax util (for example jquery)
$.ajax({
type: "GET",
url: '<c:url value="/admin/new/list"/>',
cache:false,
dataType :'json',
success: function(data){
alert(data);
}
});
the data is json object
I don't know whether the above is what you need
A much easier way to do this is to include the Jackson dependencies in maven and use #ResponseBody to return a JSON representation of the object, without having to manually write the manipulation.
Have a look at the example below, you shouldn't have to write any tranlation to JSON code.
http://www.mkyong.com/spring-mvc/spring-3-mvc-and-json-example/
As per your requirement, I suggest you to use AJAX call with JSON as data type.
For example :
$.ajax({
url: "getFormatIdDescMap?compId="+compId,
global: false,
type: "POST",
dataType:"json",
contanttype:'text/json',
async:false,
error:function(){
alert("Error during retrieving the foramt ID List");
},
success: function(data){
//REMOVE ALL THE OLD VALUES OF FORMAT DROP DOWN
removeDropDownVals('formatList');
var optn;
for(var index=0;index<data.formatKeys.length;index++){
optn = document.createElement("option");
document.getElementById("formatList").options.add(optn);
optn.text =data.formatDescs[index];
optn.value=data.formatKeys[index];
}
}
});
});
In the code above, I am preparing a new list of Formats based on company ID. You can iterate over the response.
It will give response text as per your requirements. But here note that .. if you are getting json Array in the response, it will contain that data in square bracket like..[1,2,3] and If you are getting response in JSON Object then it will be displayed in curly braces like {"data",[1,2,3]}.

Categories

Resources