GoMagikarp GoMagikarp - 4 months ago 10
JSON Question

Issues with jQuery .on( 'click' ) API call

I have been working on a simple weather app project. The user enters a zip code into an input element which (upon clicking a button element) makes an API call to wunderground.com. A few pieces of data are then grabbed from the JSON object, stringified and inserted into the DOM.

(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("");
})
});
})();


The jQuery works fine on the first API call.

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


However, the second API call does not.

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


The issue seems to be in the way I declare the weatherByZip variable:

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


What I intended was that the weatherByZip variable would be updated (with a new inputValue plus the .json extension) each time the function is called. What happens instead is that the inputValue and .json are appended to the end of the previously created variable.

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


How would I fix my jQuery function so as to rectify this problem. That is, each time the function is called (a button element is clicked) a new/updated API call occurs?

Answer

Change += to +

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

wundergroundAPI += inputValue means: take the existing value of wundergroundAPI and concatenate the value of inputValue behind that. That's the reason your wundergroundAPI keeps getting longer.