How to use array string in jQuery ajax call?

Question

By using jQuery, I am trying to save my string array in backend and following is my approach.

1.Using jQuery ajax sending array.

var tagTexts = $(ul li.select2-selection__choice")
                   .toArray()
                   .map(function(i){
                       return i.innerText;
                   });
tagTexts = tagTexts.join(',');
$.ajax({
    type: 'POST' ,
    url: '/tag/tagList',
    dataType: 'json',
    data: {
        tagTexts: tagTexts
    },
    error: function(err) {
       console.log(err);
    },
    success: function(response) {
        //Process Response
    }

});

2.In backend it is retrieved as follows:

@ResponseBody
@RequestMapping(value = "/tag/tagList", method = RequestMethod.POST)
public String saveTagList(HttpServletRequest request,
                                  @RequestParam(value = "tagTexts", required = false)List<String>tagTexts) {

     System.out.println(tagTexts);
     String response = tagService.saveTags(tagTexts);
     return response;
}

a) Using array join method

Following is the string array captured:

["Drone", "Richard Feynman, PHD", "Yatch"]

After using array join method this gets changed as follows:

Drone,Richard Feynman, PHD,Yatch

In java execution (backend) this gets displayed as follows:

[Drone, Richard Feynman, PHD, Yatch]

b) Using JSON.stringify method

After using JSON.stringify method, the captured array gets displayed as follows:

["Drone", "Richard feynman, PHD", "Yatch"]

This looks fine at js level but this entire line is considered as a string and it is displayed at the backend as follows:

[["Drone", "Richard feynman, PHD", "Yatch"]].

I am expecting my code to work as follows:

Comma character in raw data element captured should not split.
The entire array should not appear as a string in the backend.

Is there any better way to achieve this??

score 1 · Accepted Answer · answered May 12 '19 at 20:45

You can create a custom request object like this:

public class TagListRequest {
    private List<String> tagTexts;
    // getter and setter
}

You now can use this with @RequestBody in your request mapping:

@ResponseBody
@RequestMapping(value = "/tag/tagList", method = RequestMethod.POST)
public String saveTagList(@RequestBody TagListRequest request) {
    System.out.println(request.getTagTexts());
    String response = tagService.saveTags(request.getTagTexts());
    return response;
}

Spring internally maps the JSON body of your request to the TagListRequest object using Jackson.

With this solution you do not need to parse the data manually using a separator.

score 0 · Answer 2 · answered May 12 '19 at 19:06

Your javascript with JSON.stringify is correct solution. You just need to parse the JSON in java backend. For example,

import org.json.simple.JSONObject;
JSONParser parser = new JSONParser();
JSONObject json = (JSONObject) parser.parse(tagTexts);

See How to convert jsonString to JSONObject in Java for alternative ways how to parse JSON in java.

How to use array string in jQuery ajax call?

2 Answers2