.each loop only returning last result

Question

My .each of alphabet is only returning the last result on "s" in:

$('#keywordTable tr:last').after('<tr><td>' + s + '</td><td>' + val[0] + '</td><td>0</td><td>0</td><td>0</td></tr>');

relevant javascript code:

var suggestCallBack; // global var for autocomplete jsonp
  var keywordCount = 0;
  var alphabet = "abcdefghijklmnopqrstuvwxyz0123456789".split("");
  $('body').on("click", '#submit', function() {
      $('#keywords').html('');
      var search_input = $("#keyword").val();
      var language = $("#edit-domain").val();
      callAPI(search_input, language);
      _.each(alphabet, function(letter) {
          callAPI(search_input + ' ' + letter);
          callAPI(letter + ' ' + search_input);
      });
      return false;
  });
function callAPI(s, language){

      $.getJSON("http://suggestqueries.google.com/complete/search?callback=?", {
        "hl": language, // Language
        //"ds":"yt", // Restrict lookup to youtube
        "jsonp": "suggestCallBack", // jsonp callback function name
        "q": s, // query term
        "client": "youtube" // force youtube style response, i.e. jsonp
    });
    suggestCallBack = function(data) {
        var suggestions = [];
        var languageText = $("#edit-domain option:selected").text();
        $('#keywordTable').show();
        $.each(data[1], function(key, val) {
            suggestions.push({
                "value": val[0],
            });
            $('#keywordTable tr:last').after('<tr><td>' + s + '</td><td>' + val[0] + '</td><td>0</td><td>0</td><td>0</td></tr>');
            $('#keywordCount').text(++keywordCount);
            $('#keywordtext').text(s);
            $('#languageholder').text(languageText);
        });
    }

    }

Here is a live preview: http://keyworda.com

The problem: (circled in red): https://i.stack.imgur.com/UxPlg.png

I believe your problem is in the callback function, not the _each itself, I think its working fine. Try using closure, look here: http://stackoverflow.com/questions/13077828/for-loop-in-javascript-outputs-value-only-from-last-iteration — Ziv Weissman, Jan 30 '16 at 14:25

score 0 · Accepted Answer · edited May 23 '17 at 12:15

You are running into a problem with multiple simultaneous JSONP requests. Each of your callback function names must be different, or else they are overwriting each other and you'll only see the last request's result. You can read more about that here or here.

To fix your $.getJSON call you should remove the jsonp: 'suggestCallback' bit and give the callback function as the second parameter instead. The callback name is automatically filled by jQuery, because you put callback=? in the URL.

$.getJSON("http://suggestqueries.google.com/complete/search?callback=?", {
    "hl": language, // Language
    "q": s, // query term
    "client": "youtube" // force youtube style response, i.e. jsonp
}, function(data){
    var suggestions = [];
    var languageText = $("#edit-domain option:selected").text();
    $('#keywordTable').show();
    $.each(data[1], function(key, val) {
        suggestions.push({
            "value": val[0],
        });
        $('#keywordTable tr:last').after('<tr><td>' + s + '</td><td>' + val[0] + '</td><td>0</td><td>0</td><td>0</td></tr>');
    });
});

Here's some working code: http://plnkr.co/edit/O2JKhhOziRczIMkctQc7?p=preview

.each loop only returning last result

1 Answers1