Loop thru JSON response and return to Jquery

Question

I'm almost there and on my first jquery autocomplete script... I just need some help to figure out how to return the founded elements has link so that we can click on them.

Here a part of my js code:

$(document).ready(function() {
    var attr = $('#leseulsteve_lieuxbundle_lieutype_nom').attr('data-url');
    var searchRequest = null;

$("#leseulsteve_lieuxbundle_lieutype_nom").autocomplete({
    minLength: 3,
    source: function(request, response) {
        if (searchRequest !== null) {
            searchRequest.abort();
        }
        searchRequest = $.ajax({
            url: attr,
            method: 'get',
            dataType: "json",
            data: {nom: request.term},
            success: function(data) {
                searchRequest = null;
                console.log(data);

  $.each(data, function (i, v) {
  --- SOME VARIABLE I GUESS TO STORE THE RESULT ---
  });

  return THE 'SOME VARIABLE;

  }
}).fail(function() {
                searchRequest = null;
            });
    }
 });
});

In the console I got this from the console.log(data) line:

Object {École secondaire De Rochebelle: "/GestigrisC/app_dev.php/lieux/voir/2", École secondaire la Camaradière: "/GestigrisC/app_dev.php/lieux/voir/3"}

I have control over how the JSON feed is built, so no worries there if it's helps to build that super mysterious for me now variable to return.

Thanks a lot for the help!

You cannot [`return` from the ajax callback](http://stackoverflow.com/q/14220321/1048572) — Bergi, May 12 '14 at 21:09
What do you mean by "*the founded elements has link so that we can click on them*"? Please elaborate. What do you want to do with the `data`? — Bergi, May 12 '14 at 21:10
Thanks for you response, I'll try to be a bit clearer, english is not my mother tongue :) I got that data when I type 'Éco' and I can't figure out how to send the result back to the search field has a choice list like it supposed to be in an autocomplete field. The thing with the link, is just that I want to be able to redirect the user to that link when he click a specific choice in the list. — leseulsteve, May 12 '14 at 22:18
Which of the many autocomplete plugins are you using? You'd transform the data into the format that is expected (check their API docs), and call the `response` callback with that. — Bergi, May 12 '14 at 22:40
I just got it to work properly, I guess I just needed a little break :) Thanks for the help Bergi — leseulsteve, May 12 '14 at 22:45
You should [make an answer](http://stackoverflow.com/help/self-answer) from that. — Bergi, May 12 '14 at 22:47

score 0 · Answer 1 · answered May 12 '14 at 21:16

If you just want to build links and put them into your HTML then I think you're looking for something like this:

success: function(data) {
  var html = '';
  $.each(data, function (i, v) {
    html += '<a href="'+v+'">'+i+'</a>';
  });
  $('#container_id').html(html);
}

score 0 · Answer 2 · answered May 13 '14 at 16:42

Got it right, thanks for your help :)

$(document).ready(function() {
var attr = $('#leseulsteve_lieuxbundle_lieutype_nom').attr('data-url');
var searchRequest = null;

$("#leseulsteve_lieuxbundle_lieutype_nom").autocomplete({
    minLength: 3,
    source: function(requete, reponse) {
        if (searchRequest !== null) {
            searchRequest.abort();
        }
        searchRequest = $.ajax({
            url: attr,
            method: 'get',
            dataType: "json",
            data: {nom: requete.term},
            success : function(donnee){
            reponse($.map(donnee, function(objet){
            return {label: objet.type +  ' | ' + objet.label, type: objet.type, id: objet.id};
            }));
        }
        }).fail(function() {
            searchRequest = null;
        });
},
select: function (event, ui) {
    $('#leseulsteve_lieuxbundle_lieutype_nom').val(ui.item.label);
    $('#leseulsteve_lieuxbundle_lieutype_type').val(ui.item.type);
    $('#leseulsteve_lieuxbundle_lieutype_id').val(ui.item.id);
    $('#formulaire').submit();
}
});
});

Loop thru JSON response and return to Jquery

2 Answers2