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

Question

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?

Alain Stoffels · Accepted Answer · 2016-08-01 19:19:33Z

3

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.

answered Aug 1, 2016 at 19:19

Alain Stoffels

814 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

GoMagikarp Over a year ago

Thank you Alain Stoffels! It worked perfectly. Sometimes I get so wrapped up in a problem that I can overlook simple solutions. I kept thinking of what jQuery method to use rather than changing my operators.

jonathanGB · Accepted Answer · 2016-08-01 19:34:35Z

2

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

Even more safe would be to trim inputValue, to remove blank spaces if the user adds them.

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

Know that, however, it isn't supported in IE8. You need a polyfill for that.

Edit: As @Kevin B mentioned, jQuery offers a trim method that works on all platforms. If you need to support IE8- or don't want to copy/paste a polyfill, use it, like this:

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

edited Aug 1, 2016 at 19:34

answered Aug 1, 2016 at 19:19

jonathanGB

1,5402 gold badges16 silver badges29 bronze badges

6 Comments

user400654 Over a year ago

Know that, however, it isn't supported in IE8. fortunately jquery has a method for that too.

jonathanGB Over a year ago

Didn't know that, thanks. Do you know if the method works on IE 8- ?

user400654 Over a year ago

Yes, since that's why they added it. api.jquery.com/jQuery.trim

jonathanGB Over a year ago

great, makes sense. On my part, I'd still not use it because I don't support IE8-. But still wanted to make sure the OP knew it

GoMagikarp Over a year ago

I appreciate the insight jonathanGB. I did set the maxlength attribute on my input element to 5. Would that make blank spaces a non-issue since the input is for US zip codes?

|

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related