JSON Request Weather App - JS Conventions

1

Hi everyone,
I am working on the weather app. I found this example in StackOverFlow:

    ```$(document).ready(function(){
    $.getJSON("http://api.openweathermap.org/data/2.5/forecast/daily?q=Montpellier&mode=json&units=metric&cnt=10",function(result){
        alert("City: "+result.city.name);
        alert("Weather: "+ result.list[0].weather[0].description);
        });
    });```

(see image and StackOverFlow URL)
My question: Why is the document.ready event necessary? Anyway the script element is in the end of the body element. Is it because the JSON request can take time to receive back, and we don’t want to delay the rest of the script from running?

Thanks in advance,
Ben

Pasted image856×611 47.8 KB

2

A page can’t be manipulated safely until the document is “ready.” jQuery detects this state of readiness for you. Code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute. Code included inside $( window ).on( “load”, function() { … }) will run once the entire page (images or iframes), not just the DOM, is ready.

source: https://learn.jquery.com/using-jquery-core/document-ready/

Personally I would always put it because when using jQuery I want to make sure the DOM is fully ready before I start manipulating it.

Hope it answered your question.

3

According to this: https://api.jquery.com/ready/
$(document).ready(handler) is depreciated as of jQuery 3.0, so they may be using an older version of jQuery. The docs say to use $(handler) instead now.

The linked doc also explains that .ready functions were handy because they would wait until the DOM was loaded, and if the DOM was already ready before .ready() was called by the code, it would still run.

The original poster probably thought it was necessary because $.getJSON() fires off an HTTP GET request and has to wait for a response from the server. According to the jQuery docs, $getJSON() accepts the URL, data, and then code to execute upon a successful response to the request as arguments.

While I am more familiar with Angular promises than jQuery, the success argument is a callback function, meaning it won’t fire until after a response is received anyway. In JavaScript, callbacks don’t stall the rest of the program and other code can execute until the promise is resolved. I verified this here: https://learn.jquery.com/about-jquery/how-jquery-works/#callbacks-and-functions

I hope this helps. Happy coding,
Vy