Probleme mit jQuery .on ('klicken') API-Aufruf

Question

Ich habe an einem einfachen Wetter-App-Projekt gearbeitet. Der Benutzer gibt eine Postleitzahl in ein Eingabeelement ein, das (nach dem Anklicken eines Schaltflächenelements) einen API-Aufruf an wunderground.com ausführt. Ein paar Datenstücke werden dann aus dem JSON-Objekt abgerufen, mit einem String versehen und in das DOM eingefügt.

(function() { 
     var wundergroundAPI = "https://api.wunderground.com/api/3b411ca908826af8/conditions/q/"; 
     var input = $('input'); 

     $('#submit').on('click', function() { 
      var inputValue = input.val(); 
      var weatherByZip = wundergroundAPI += inputValue += '.json'; 
      $.getJSON(weatherByZip, function(json) { 
       $('#temp-f') 
       .text('Temperature: ' + JSON.stringify(json['current_observation']['temp_f']) + ' F'); 
       $('#location') 
       .text('Location: '+ JSON.stringify(json['current_observation']['display_location']['full'])); 
       $('#weather') 
       .text('Weather: ' + JSON.stringify(json['current_observation']['weather'])); 
       input.val(""); 
      }) 
     }); 
    })(); 

Die jQuery funktioniert gut auf den ersten API-Aufruf.

GET https://api.wunderground.com/api/3b411ca908826af8/conditions/q/70118.json 

Der zweite API-Aufruf jedoch nicht.

GET https://api.wunderground.com/api/3b411ca908826af8/conditions/q/70118.json06840.json 

Das Problem scheint in der Art, wie ich die weatherByZip Variable deklarieren zu sein:

var weatherByZip = wundergroundAPI += inputValue += '.json'; 

Was ich bestimmt wurde, dass der weatherByZip Variable aktualisiert werden würde (mit einem neuen Inputvalue plus .json Erweiterung) jedes Mal, wenn die Funktion aufgerufen wird. Stattdessen werden die Werte inputValue und .json an das Ende der zuvor erstellten Variablen angehängt.

70118.json06840.json 
70118.json06840.json90210.json 

Wie würde ich meine jQuery-Funktion beheben, um dieses Problem zu beheben. Das heißt, jedes Mal, wenn die Funktion aufgerufen wird (ein Schaltflächenelement wird angeklickt), tritt ein neuer/aktualisierter API-Aufruf auf?

Answer 1

ändern + = bis +

var weatherByZip = wundergroundAPI + inputValue + '.json'; 

wundergroundAPI + = Inputvalue bedeutet: Nehmen Sie den vorhandenen Wert von wundergroundAPI und den Wert der Inputvalue dahinter verketten. Das ist der Grund, warum Ihre WundergroundAPI länger wird.

Answer 2

var inputValue = input.val(); 
var weatherByZip = wundergroundAPI + inputValue + '.json'; 

Noch sicherer wäre inputValue zu trimmen, Leerzeichen zu entfernen, wenn der Benutzer sie hinzufügt.

var inputValue = input.val().trim(); 

Wissen, dass es jedoch in IE8 nicht unterstützt wird. Sie brauchen dafür ein Polyfill.

bearbeitet: Wie @ Kevin B erwähnt, jQuery bietet eine Trimm-Methode, die auf allen Plattformen funktioniert. Wenn Sie IE8 unterstützen oder ein Polyfill nicht kopieren/einfügen möchten, verwenden Sie es wie folgt:

var inputValue = $.trim(input.val());