CODEWITHSUNDEEP
javascriptjavajqueryspring-mvcjquery-ui
Bruno 82
Bruno 82

Reputation: 519

Convert a Java List<String> into a Javascript array

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?

Upvotes: 2

Views: 3673

Answers (3)

Ori Marko
Ori Marko

Reputation: 58772

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

Upvotes: 1

Ivan Lynch
Ivan Lynch

Reputation: 562

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,

Upvotes: 0

baao
baao

Reputation: 73241

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.

Upvotes: 2

Related Questions