GoMagikarp GoMagikarp - 1 year ago 38
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) {
.text('Temperature: ' + JSON.stringify(json['current_observation']['temp_f']) + ' F');
.text('Location: '+ JSON.stringify(json['current_observation']['display_location']['full']));
.text('Weather: ' + JSON.stringify(json['current_observation']['weather']));

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.


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 Source

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.