0

I did an autocomplete request with jquery and ajax, i requested the object, they appear into the preview tab in "network" but i got stucked at writing them into the html...

 $(document).ready(function() {
        $("#autocomplete").autocomplete({
            source: function(request, response) {
                $.ajax({
                    method: "GET",
                    dataType: "jsonp",
                    url: "https://www.blalba/?term=" + request.term,
                    success: function(data) {


                        var transformed = $.map(data.Search, function(el) {
                            return {
                                label: el.airport,
                                id: el.city
                            };
                        });
                        response(transformed);
                    },
                    error: function() {
                        response([]);
                    }
                });
            }

        });
    }); <

objects for every request appear like this

[{"airport":"Toate aeroporturile","city":"Roma","country_code":"IT","country":"Italia","airport_code":"ROM","city_code":"ROM","sort":27428841,"c2":0,"hidden_code":true},{"airport":"Ciampino","city":"Roma","country_code":"IT","country":"Italia","airport_code":"CIA","city_code":"ROM","sort":25428841,"c2":1,"sub":true},{"airport":"Fiumicino","city":"Roma","country_code":"IT","country":"Italia","airport_code":"FCO","city_code":"ROM","sort":25428841,"c2":2,"sub":true},{"airport":"","city":"Roma","country_code":"AU","country":"Australia","airport_code":"RMA","city_code":"RMA","c2":0,"sort":36969,"hidden_code":true}]

Any help would be very much appreciated !!
Allcro
  • 33
  • 1
  • 5
  • You can parse the JSON using JSON.parse() and then iterate over it using ForEach loop. You can take reference from here https://stackoverflow.com/questions/5289078/parse-json-from-jquery-ajax-success-data – Prabhjot Singh Kainth Dec 09 '19 at 12:37

1 Answers1

0

Not sure what is the problem according to your question, I assume that you want to know how to add the results to a results element.

This is an example of how I would make the results show up:

HTML

<div id="results">
    <ul></ul>
</div>

jQuery (in the success section of the AJAX request)

$.each(transformed, function(i, value){
    $('#results ul').append('<li>' + value.label + ', ' + value.id + '</li>');
});

Just remember to clean the <ul> contents when you done with the autocomplete process by using $('#results ul').empty().

Alon Pini
  • 581
  • 1
  • 3
  • 19
  • You mean like this? – Allcro Dec 09 '19 at 13:16
  • $(document).ready(function() { $("#autocomplete").autocomplete({ source: function(request, response) { $.ajax({ method: "GET", dataType: "jsonp", url: "https://www.blalba/?term=" + request.term, success: function(data) { $.each(transformed, function(i, value){ $('#results ul').append('
  • ' + value.label + ', ' + value.id + '
    • '); }); }, }); } }); }); – Allcro Dec 09 '19 at 13:18
  • Place is instead of `response(transformed);` in the code you specified. The example I gave you relies on the `$.map` function you used in your code, therefore the code I provided should appear after the `$.map` function. – Alon Pini Dec 09 '19 at 13:21