Vfrdtyky

I was looking at the jQuery.ajax() method to store a piece of JSON data in var d. I noticed in the console that after the initial button click, the var is stored but it will not display until the 2nd click. Can someone elaborate on this and propose a solution?

    var d;

    $(document).ready(function () {

        $('#Weather').click(function () {

            var requestData = $('#City').val() + ',' + $('#Country').val();

            var unit = 'imperial';

            var key = '..........................';

            $.ajax({

                url: 'http://api.openweathermap.org/data/2.5/weather',

                method: 'get',

                data: { q: requestData, units: unit, APPID: key },

                dataType: 'json',

                success: function (data) {

                    d = data.main.temp;

                }

            });

            if (d >= 40) {

                document.getElementById("Text").value = "Value = " + d + " °";

            }

            else if (d < 40) {

                document.getElementById("Text1").value = "Value = " + d + " °";

            }

        });

    });



    <table>

    <tr>

        <td>Enter City</td>

        <td><input type="text" id="City" /></td>

    </tr>

    <tr>

        <td>Enter Country</td>

        <td><input type="text" id="Country" /></td>

    </tr>

</table>

<button id="Weather" >Get d</button>

<input type="text" id="Text" value="T °" />

<input type="text" id="Text1" value="T °" />

This is the JSON

    "main": {

    "temp": 37.38,

    "pressure": 1030,

    "humidity": 36,

    "temp_min": 35.06,

    "temp_max": 39.2

},

Thanks.

With if/else outside the AJAX call, it gets executed immediately after sending the call i.e. d is undefined then and both conditions fails.

Hence, move if/else inside success callback as the value of d has been updated by then.

$('#Weather').click(function () {

            var requestData = $('#City').val() + ',' + $('#Country').val();

            var unit = 'imperial';

            var key = '..........................';

            $.ajax({

                url: 'http://api.openweathermap.org/data/2.5/weather',

                method: 'get',

                data: { q: requestData, units: unit, APPID: key },

                dataType: 'json',

                success: function (data) {

                    d = data.main.temp;

                    if (d >= 40) {

                        document.getElementById("Text").value = "Value = " + d + " °";

                     }

                     else if (d < 40) {

                        document.getElementById("Text1").value = "Value = " + d + " °";

                     }

                }

            });



        });