Convert a Java List<String> into a Javascript array

Question

I'm using the jQuery UI autocomplete to show suggestions for a text input field. The suggestions are stored in a Javascript array called suggestions.

I'm trying to fetch the string values for the suggestions array from a database, but I can't convert the List object to a Javascript array.

The Javascript:

var suggestions = [];
$.get('/mywebapp/autocompleteplayer.html', function(data){
    parsed = JSON.parse(data);
    suggestions = parsed.split(",");
}, "json");

$('#autocompleted').autocomplete({
    data: suggestions,
    minLength: 3
});

The Spring MVC controller:

@Controller
public class AutocompletePlayerController {

    @RequestMapping(value = "/autocompleteplayer")
    public List<String> getPlayerSuggestions(){

        List<String> myList;
        //code that fills myList with all of the players' full names from the database, omitted for brevity
        return myList;
    }
}

I know I'm not parsing the AJAX response properly, since I've checked from the browser console that the suggestions array has 0 elements. Can anyone help me? What am I doing wrong here?

Have you tried outputting the value of data in the browser console? If you give us the value of that, it will make it easier for us to help. — kcdragon
– kcdragon, Commented Jul 19, 2017 at 17:08
Maybe you should return a Response instead and write the entity in it. Or try @ResponseBody before your return type. — Apokai
– Apokai, Commented Jul 19, 2017 at 17:08

baao · Accepted Answer · 2017-07-19 17:15:22Z

2

You need to use it like this in your js (data is the response entity, not the data - it's in data.data) :

$.get('/mywebapp/autocompleteplayer', function(data){
    suggestions = data.data; 
    $('#autocompleted').autocomplete({ // not sure how to use your plugin
        data: suggestions,
        minLength: 3
    });
}, "json");

And in your spring controller, add the @ResponseBody Annotation

@RequestMapping(value = "/autocompleteplayer")
@ResponseBody
public List<String> getPlayerSuggestions(){

    List<String> myList;
    //code that fills myList with all of the players' full names from the database, omitted for brevity
    return myList;
}

There's no need to JSON.parse anything, jquery already did this.

/mywebapp/autocompleteplayer.html also sounds wrong. The route is autocompleteplayer without .html.

Other than that, suggestions is created async. So your data in autocomplete will always be empty. I didn't use that plugin myself so there might be an update function for the data, otherwise try to put it in the $.get() functions callback.

edited Jul 19, 2017 at 17:15

answered Jul 19, 2017 at 17:10

baao

73.5k18 gold badges152 silver badges208 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Bruno 82 Over a year ago

I followed your suggestions. Besides, I've modified the js like this: $('#autocompleted').autocomplete({ data: $.get('/Fantacalc/autocompleteplayer.html', function(data){ var suggestions = []; suggestions = data.data; }, "json"), minLength: 3 }); but I got a 406 error

Ori Marko · Accepted Answer · 2017-07-20 06:14:40Z

1

You can return json array as String in java

@Produces("application/json")
public String getPlayerSuggestions(){
....
 Gson gson = new GsonBuilder().excludeFieldsWithoutExposeAnnotation().create();
 String jsonString = gson.toJson(myList);
 return jsonString;
}

edited Jul 20, 2017 at 6:14

answered Jul 19, 2017 at 17:22

Ori Marko

59.3k26 gold badges157 silver badges259 bronze badges

2 Comments

Bruno 82 Over a year ago

Thanks. The JSON object is created as expected. Now I just need to find a way to bind it to the autocomplete widget.

Ori Marko Over a year ago

add @Produces("application/json") to method. updated

Ivan Lynch · Accepted Answer · 2017-07-19 18:44:33Z

0

You need to modify your controller like this:

@RequestMapping(value = "/autocompleteplayer", method=RequestMethod.GET)
@ResponseBody
public String getPlayerSuggestions(){

    List<String> myList;
    JSONArray jsonArray = new JSONArray();


    for(String item: myList){

        JSONObject jsonObj = new JSONObject();
        jsonObj.put("Item", item);
        jsonArray.put(jsonObj);

    }

    return jsonArray.toString();
}

then you can handle your values easy with JSON. Regards,

answered Jul 19, 2017 at 18:44

Ivan Lynch

5627 silver badges24 bronze badges

Collectives™ on Stack Overflow

Convert a Java List<String> into a Javascript array

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related