Develop Reference

How to sent JavaScript Objects from the Client-Side and how to receive and parse them in Spring Boot Back-end?

I have came and left this problem numerous times while trying to make my web apps and have gotten fed up with no results, to the point that I have to ask here, so please excuse me if I come off as venting... I am quite aggravated.
I am trying to send data in the form of key-value pairs from my client(vanilla js) to my back end(spring boot java). I have tried numerous ways of doing it but can't seem to find the correct way/combination to achieve what I want done. My current non-working code is as follows.
Client-Side JS
var object = {
'id' : 1,
'username' : 'jumpthruhoops',
'password' : 'melodysteez'
};
Axios
.post('http://localhost:8080/gameSchedule', JSON.stringify(object))
.then((response) => {
console.log(response.data);
});
Back-End Spring Boot/Java
#CrossOrigin
#RequestMapping(value = "/gameSchedule", headers = "Accept=application/json", consumes = MediaType.APPLICATION_FORM_URLENCODED_VALUE)
public String getSchedule(#RequestBody String user) {
System.out.println(user);
return "test";
}
The following code is what I currently have that has given me any type of results close to what I'm looking for. It gives me the following printed line...
%7B%22id%22%3A1%2C%22username%22%3A%22tdellard1%22%2C%22password%22%3A%22sisters3%22%7D=
...which I believe is a hex code for the string object I passed into the parameter. I'm not sure if this is from Spring Boot, or if this is what JSON.stringify does. Since the User Object is a test object and actual object that I plan on passing in, is way more complex, I don't want to figure out how to decode the hex code, unless I can't get anything else going and I completely have to.
Because it is more complicated, I don't want to use a lot of #RequestParams("name") String VaribleName like 40 times in the parameter of the method. This was also the only other way to get results but passing those variables into a url is maddening.
Some other things I have tried are #ModelAttribute and (#RequestBody User user), both return errors, one that seems to be reoccurring is
018-10-30 23:38:29.346 WARN 12688 --- [io-8080-exec-10] .w.s.m.s.DefaultHandlerExceptionResolver : Resolved [org.springframework.web.HttpMediaTypeNotSupportedException: Content type 'application/x-www-form-urlencoded;charset=UTF-8' not supported]
So what I am pretty much asking is for guidance on what is the best way to send my data from Axios(form.serialize, JSON.stringify, JavaScript Object, etc.) and what corresponding method I need to use to obtain that data on my Spring Boot Back-End and make it manipulative so I can turn it into a POJO.

Just remove JSON.stringify(object) and put object.
Axios
.post('http://localhost:8080/gameSchedule', object)
.then((response) => {
console.log(response.data);
});
You can see an example on POST request here axios documentation
On Spring boot you have to create an entity like this:
#Entity
public class UserAccount implements Serializable {
#Id
private Long id;
#Column(unique = true, nullable = false)
#Size(max = 255)
private String userName;
#Column(nullable = false)
#NotNull
private String password;
public Long getId() {
return id;
}
public void setId(Long id) {
this.id = id;
}
public String getUserName() {
return userName;
}
public void setUserName(String userName) {
this.userName = userName;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
}
and change your code for here
#CrossOrigin
#RequestMapping(value = "/gameSchedule", headers = "Accept=application/json", consumes = MediaType.APPLICATION_FORM_URLENCODED_VALUE)
public UserAccount getSchedule(#RequestBody UserAccount user) {
System.out.println(user.getUserName());
return user;
}

If you are sending an object you have to use object when receiving at back-end side and make sure that name of the field in request object and the field name of the class at back-end side must be same,
so it should be like this:
I am just making some changing in your code to access field:
var data = {
'id' : 1,
'username' : 'jumpthruhoops',
'password' : 'melodysteez'
};
// name of variable(data variable) doesn't matter but inside everything consider as a body
axios.post('http://localhost:8080/gameSchedule', JSON.stringify(object), {
headers: {
'Content-Type': 'application/json',
}
}
);
back-end side retrieve fields
//create one Student class to map fields with body
#CrossOrigin
#RequestMapping(value = "/gameSchedule", headers = "Accept=application/json", consumes = MediaType.APPLICATION_FORM_URLENCODED_VALUE)
public String getSchedule(#RequestBody Student student) {
System.out.println(student.id);
System.out.println(student.username);
System.out.println(student.password);
return "test"
}

Return JavaScript object literal, not JSON string, from ASP.NET MVC endpoint

For various reasons, I have switched from ASP.NET MVC's built in JSON serializer (the one that returns a System.Web.Mvc.JsonResult object (see edit below)) to Newtonsoft. I didn't realize until after I began testing that the former returns a JavaScript object literal, while Newtonsoft returns a JSON formatted string.
I like not having to parse JSON strings on the client side — having it already as an object literal is very convenient — but I want to stick with Newtonsoft for other technical reasons.
For example, instead of seeing this result on my client...
"{"Errors":["Please enter a valid email address."],"HasErrors":true}"
...I'd like to see this result:
{"Errors":["Please enter a valid email address."],"HasErrors":true} // no quotes
Is there a way to make Newtonsoft return JS object literals instead of strings?
EDIT
The way my question was framed wasn't the best. There's nothing wrong with the JsonResult type. In fact, the solution still uses it. The only problem was the default Controller.Json methods, which can be overridden to use Newtonsoft (Json.NET) instead of the built-in serializer.

Just write a custom JsonResult that uses Newtonsoft serializer:
Something along the lines:
public abstract class BaseController : Controller
{
protected override JsonResult Json(object data, string contentType, System.Text.Encoding contentEncoding)
{
return new JsonNetResult
{
ContentType = contentType,
ContentEncoding = contentEncoding,
Data = data
};
}
protected override JsonResult Json(object data, string contentType, System.Text.Encoding contentEncoding, JsonRequestBehavior behavior)
{
return new JsonNetResult
{
ContentType = contentType,
ContentEncoding = contentEncoding,
Data = data,
JsonRequestBehavior = behavior
};
}
}
JsonNetResult.cs:
using System;
using System.Web;
using System.Web.Mvc;
using Newtonsoft.Json;
public class JsonNetResult : JsonResult
{
public JsonSerializerSettings SerializerSettings { get; set; }
public Formatting Formatting { get; set; }
public JsonNetResult()
{
Formatting = Formatting.None;
SerializerSettings = new JsonSerializerSettings();
JsonRequestBehavior = JsonRequestBehavior.DenyGet;
}
public override void ExecuteResult(ControllerContext context)
{
if (context == null)
throw new ArgumentNullException("context");
if (JsonRequestBehavior == JsonRequestBehavior.DenyGet
&& String.Equals(context.HttpContext.Request.HttpMethod, "GET", StringComparison.OrdinalIgnoreCase))
{
throw new InvalidOperationException("This request has been blocked because sensitive information could be disclosed to third party web sites when this is used in a GET request. To allow GET requests, set JsonRequestBehavior to AllowGet.");
}
HttpResponseBase response = context.HttpContext.Response;
response.ContentType = !string.IsNullOrEmpty(ContentType)
? ContentType
: "application/json";
if (ContentEncoding != null)
response.ContentEncoding = ContentEncoding;
if (Data != null)
{
var writer = new JsonTextWriter(response.Output) { Formatting = Formatting };
var serializer = JsonSerializer.Create(SerializerSettings);
serializer.Serialize(writer, Data);
writer.Flush();
}
}
}
Credit: https://gist.github.com/jpoehls/1424538

Answer is here: How to force ASP.NET Web API to always return JSON?
Excerpt:
Clear all formatters and add Json formatter back.
GlobalConfiguration.Configuration.Formatters.Clear();
GlobalConfiguration.Configuration.Formatters.Add(new JsonMediaTypeFormatter());
EDIT
I added it to Global.asax inside Application_Start().

How can I map this WCF functionality to my REST web api?

Greetings I have a WCF service, and basically what the API users do to create a book is following:
var Book = new DtoBook()
{
OpenInModal = false,
CallToActionUrl = "url"
Status = NotificationStatus.Unseen,
TimeStamp = DateTime.Now,
Type = NotificationType.Type,
Message = "test,
};
BookManager.Instance.Add(Book);
I have users to basically do the same thing but instead on the client-side.
I have created a POST method already that looks like this:
public HttpResponseMessage Add(List<DtoBook> Books)
{
if (!ModelState.IsValid)
{
return Request.CreateResponse(HttpStatusCode.BadRequest);
}
BookManager.Instance.Add(Books);
var response = Request.CreateResponse(HttpStatusCode.Created, Books);
return response;
}
So when I enter the url I get following in my console:
{"Message":"The request is invalid.","MessageDetail":"The parameters dictionary contains a null entry for parameter 'id' of non-nullable type 'System.Int32' for method 'System.String Get(Int32)' in 'test.Controllers.NotificationsController'. An optional parameter must be a reference type, a nullable type, or be declared as an optional parameter."}
My question is what do I need to do so the user can type the properties of the dToBook class and then the POST happens and the book gets added. I guess right now it just tries to add it without any properties.
Any kind of help is appreciated

Try to specify the method is post, for sample:
[HttpPost]
public HttpResponseMessage Add([FromBody]List<DtoBook> Books)
{
// code
}

SpringMVC ErrorHandling with JavaScript UI

I have a SpringMVC 3.2 service with a HTML/endoUI UI that I am unable to return messages to. It would seem that the RequestAttributes that I populate are not visible to the Javascript. All the examples I have seen for SpringMVC error handling use either html or jsp redirects.
Here is a sample:
#Controller
#RequestMapping( "/officeSignUp" )
public class OfficeSignUpController
..
#RequestMapping( value = "/stepOne", method = RequestMethod.POST )
#ResponseBody
public String officeCreationStepOne( #Valid #ModelAttribute( "officeSetup" ) OfficeSetup officeSetup,
BindingResult result, Model model, RedirectAttributes attributes ) {
String results;
results = newOfficeValidator.validateStepOne( officeSetup, result );
NewCustomerSignup newCustSignup = newOfficeValidator.validateNewOwner( officeSetup );
model.addAttribute( newCustomerSignupRepository.save( newCustSignup ) );
return results;
}
My validator is:
#Component
public class NewOfficeValidator {
public String validateStepOne( OfficeSetup officeSetup, BindingResult result ) {
List<String> errors = new ArrayList<String>();
if (result.hasErrors()) {
for (ObjectError error : result.getAllErrors()) {
errors.add( error.getDefaultMessage() );
}
errors.add( "redirect: " + VIEW_STEP_ONE );
// RuntimeException with a list of strings in it
throw new OfficeSetupException( errors, "Validation in StepOne" );
}
return VIEW_STEP_TWO;
}
And in my BaseController I catch the exception, retrieve the error messages and use them:
#ExceptionHandler
#ResponseStatus( HttpStatus.BAD_REQUEST )
#ResponseBody
public ErrorMessage handleOfficeSetupException( OfficeSetupException ex ) {
List<String> errors = ex.getErrors();
StringBuilder sb = new StringBuilder();
for (String error : errors) {
sb.append( error );
}
// this is just a bean with a list of Strings
return new ErrorMessage( errors );
}
When an exception is thrown, instead of a json or string response, I get a tomcat html message which contains:
<h1>HTTP Status 400 - Received OfficeSetupException </h1><HR size="1" noshade="noshade"><p><b>type</b> Status report</p><p><b>message</b> <u>Received OfficeSetupException </u></p><p><b>description</b> <u>The request sent by the client was syntactically incorrect (Received OfficeSetupException ).</u></p><HR size="1" noshade="noshade"><h3>Apache Tomcat/7.0.27</h3></body></html>
and then in the javascript :
if(stepString == "Step 2"){ click on step 2
if(viewModelStepOne.validateStepOne(s) == true){ client side validation
viewModelStepOne.saveStepOne(s);if above validation passes, send request to server,
if(serverValidationFailed){if server returns error, do not move to step 2
s.preventDefault();
}else{ move to step
this.disable(this.tabGroup.children("li").eq(2),true);
this.enable(this.tabGroup.children("li").eq(3),true);
}
}else{ s.preventDefault();
}
}
So ultimately my question is this: what is the best way to return validation or other error messages from spring mvc to a javascript front end? I am trying to use JSON for my responses, so I would expect the ErrorMessage to be returned as such.

In my projects I do as you described - throw an exception and catch it with the #ExceptionHandler. But you don't need to return just a string message. Create your own exception class that can take Map or List of errors as arguments (or whatever else you want to use as an errors model). When an error happens populate your custom execption (let's call it RequestException) with the errors and then throw it. Errors will be stored in your exeception instance. In #ExceptionHandler for your RequestException fetch the errors from the exception object and return then to frontend in a way convenient to you.

I think I solved it by adding the "#JsonAutoDetect" to my Exception. I am using Java Config so the following appears to handle the HTTP response code and return a JSON response.
#JsonAutoDetect( fieldVisibility = Visibility.DEFAULT, getterVisibility = Visibility.DEFAULT, isGetterVisibility = Visibility.DEFAULT )
public class OfficeSetupException extends RuntimeException {
private List<String> errors;
private static final long serialVersionUID = -1L;
public OfficeSetupException( List<String> errors, String message ) {
super( message );
this.errors = errors;
}
public List<String> getErrors() {
return errors;
}
}

How can i convert JSON to Java object

Hi I am having a JSON of following format
{
"elements":[
list1,
list2,
list3
]
}
where list1,list2,list3 are all javascript arrays.
Now I am able to pass this to my controller(am using spring mvc) from a javascript file. Now I want to use the data in the JSON that am sending. I want to map this to a model class and return it another jsp page.
I didn't create a model yet. how can i pull this off?
Please help. Thanks in advance.

use GSON to convert your JSON into java
YourModelClass obj= gson.fromJson(json, YourModelClass .class);

Using Gson, you first need to create a class structure representing your JSON data, so you can create a class like this:
public class Response {
private List<List<YourObject>> elements;
//getter and setter
}
Note that I use class YourObject since you don't specify what type your arrays contain... If the arrays contain just strings for example, replace YourObject by String. If the arrays contain a different object you have to create a class representing the data in your JSON, such as:
public class YourObject {
private String attribute1;
private int attribute2;
private boolean attribute3;
//getters and setters
}
Then, in order to actually parse your JSON response, you just have to do:
Gson gson = new Gson();
Response response = gson.fromJson(yourJsonString, Response.class);
And your JSON data will be used to fill your class structure, so you can access the fields, for example:
String attribute1 = response.getElements().get(i).get(i).getAttribute1();

Hi I used the following code and its working great.
Gson gson = new Gson();
JsonParser jsonParser = new JsonParser();
JsonArray jsonArray = jsonParser.parse(this.plan).getAsJsonArray();
ArrayList<PlanJson> planJsonList = new ArrayList<PlanJson>();
for(JsonElement jsonElement:jsonArray)
{
System.out.println(jsonElement);
PlanJson planJson = gson.fromJson(jsonElement, PlanJson.class);
planJsonList.add(planJson);
}
I found it to be the most easiest to work out for my json structure.

You can use the jackson library. see: http://jackson.codehaus.org/
Here is an example from: http://www.mkyong.com/java/how-to-convert-java-object-to-from-json-jackson/
package com.mkyong.core;
import java.io.File;
import java.io.IOException;
import org.codehaus.jackson.JsonGenerationException;
import org.codehaus.jackson.map.JsonMappingException;
import org.codehaus.jackson.map.ObjectMapper;
public class JacksonExample {
public static void main(String[] args) {
ObjectMapper mapper = new ObjectMapper();
try {
// read from file, convert it to user class
User user = mapper.readValue(new File("c:\\user.json"), User.class);
// display to console
System.out.println(user);
} catch (JsonGenerationException e) {
e.printStackTrace();
} catch (JsonMappingException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
}
}