0

My Spring-boot POST endpoint returns data that does not work with the type ahead plugin I am using. It works when I use GET.

This GET endpoint works fine:

@RequestMapping(value = "/station", method = RequestMethod.GET)
public @ResponseBody List<Station> getstation() {
    List<Station> listStation = stationService.findAll();
    return listStation;
}

with this javascript:

    $.get("/station", function(data) {
    console.log(data);
    $("[name='query']").typeahead({
        source: data,
        minLength: 3
    });
}, 'json');

The data returned looks like [{id:123,name:"ABC"}].

If I try using POST endpoint:

@RequestMapping(value = "/findstation", method = RequestMethod.POST)
public @ResponseBody List<Station> findstation(@RequestBody Station jsonSearchString) {
    List<Station> listStation = stationService.stationContaining(jsonSearchString.getName());
    return listStation;
}

with javascript:

    $('#queryStation').keyup(function() {
    console.log("in change function statoion oc");
    var stationName = $(this).val();
    if(stationName.length==3){
        console.log("the length statement is true");
        ajax_search(stationName);
    }
});

function ajax_search(stationName){
    console.log("search function value " +stationName);
    var stationJson = '{ "name":"' +stationName+ '"}'
    $.ajax ({
        url: "/findstation",
        type: "POST",
        data: stationJson,
        dataType: "json",
        contentType: "application/json;",
        success: function(data){
        console.log("inside success handler");
            stationTypeahead(data);
        }
    });
}

function stationTypeahead(data){
    console.log(data);
    $('#queryStation').typeahead({
        source: data
    });
}

Returns JSON like [{id:123, name:"LAX"}] - which does not seem to work with the plugin. typeof data; returns object.

If I hard code, for example data = [{"id":123,"name":"ABC"}] this works with the plugin.

I am pretty sure the HTML is fine as it works with GET.

What am I missing?

UPDATE

Typeof is object for both POST and GET.

Al Grant
  • 2,102
  • 1
  • 26
  • 49
  • What is your post response content type?. And if you think that it's expecting a string why not just do JSON.stringify on the response and then pass to typeahead. And also what is "typeof data;" for the GET call – karthick May 07 '19 at 22:33
  • @karthick you mean post response content type set on POST controller? I posted controller. – Al Grant May 07 '19 at 22:52
  • Question is more like what is the content-type you see in the response header? Sometimes there are chances that the call may be expecting a json and you might be setting the content type as text. – karthick May 07 '19 at 23:01
  • The data comes back fine. It's in some format. Just not working with plugin. – Al Grant May 07 '19 at 23:10
  • Can't see anywhere where you're making a POST request to `/findstation` – Phil May 07 '19 at 23:11
  • Good spotting. Edited. Not the issue however. – Al Grant May 07 '19 at 23:13
  • You're still using `GET`. You would need to use `url: '/findstation', method: 'POST'`. It's also a bad idea to try and create your own JSON string. Use `stationJson = JSON.stringify({ name: stationName })` – Phil May 07 '19 at 23:14
  • Sorry. I pasted the wrong code initially. – Al Grant May 07 '19 at 23:16
  • Use your browser's _Network_ console to debug the problem on the client-side. – Phil May 07 '19 at 23:25
  • @phil why did you mark as duplicate? The other answer deals with data being sent to the server? This is different as it deals with data back from the server. – Al Grant May 08 '19 at 01:35
  • @Phil please re-open so I can post answer which is different to other question and will help others. – Al Grant May 08 '19 at 02:03
  • I've re-opened it but you should show that you're actually POST-ing the correct data to your backend. When I closed this, you were still using a GET request to the wrong URL. Please show some screenshots from your browser's _Network_ console showing the POST request, the request body and the response – Phil May 08 '19 at 02:04

1 Answers1

0

Modified the code to:

function stationTypeahead(data){
    $("[name='query']").typeahead({
        source: data,
        minLength: 2
    });
}

HTML

<div class="col-md-5">
   <label class="control-label control-label-left">Station</label>
   <input type="text" class="form-control typeahead" name="query" id="queryStation" placeholder="Type Station" data-provide="typeahead" autcomplete="off">
</div>

I don't know why, but when I targeted the typeahead plugin using a jquery name attribute for the selector it worked. There was nothing wrong with the object returned from the server.

Al Grant
  • 2,102
  • 1
  • 26
  • 49