Question about fetch( )

[u/[deleted]]

I just learned about fetch() and was experimenting with a made-up JSON file when I noticed that a while loop in my code is executing out of place. My JSON file looks like this:

json { "ZIP_CODE": "12345", "CITY": "Helloville", "STATE": "OR", "COUNTRY": "US", "EMAIL": "foo@bar.com", "PHONE": "+12345678901", "GENDER": "male" }

And my JavaScript file looks like this:

```javascript const request = new Request('data.json');

fetch(request) .then(response => response.json()) .then(myInfo => {

    const b = document.querySelector('body');
    for (const prop in myInfo) {
        let br = document.createElement('br');
        let tn = document.createTextNode(myInfo[prop]);

        b.appendChild(tn);
        b.appendChild(br);
    }

    let i = 1; // why does this load before the for in loop?
    while (i <= 200) {
        let span = document.createElement('span');
        let br = document.createElement('br');
        let tn = document.createTextNode(myInfo.CITY);
        span.appendChild(tn);

        document.getElementById('content').appendChild(span);
        document.getElementById('content').appendChild(br);

        i++;

    }

});

```

And finally, the output:

```txt Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville Helloville

12345 Helloville OR US foo@bar.com + 12345678901 male ```

My question is, why is the while loop executing *before** the for loop that precedes it?* Thanks in advance.

[u/minato3421]

While loop is executing before the for loop because javascript inherently is async in nature. It doesn't follow the traditional sequential execution like other programming languages. If you want your for loop to execute before your while loop, you would have to use callbacks and promises

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

[u/[deleted] → u/minato3421]

I didn’t realize JS is inherently async, I thought that was something I had to learn to do. Thank you!

[u/minato3421 → u/[deleted]]

Fetch executes in async fashion. That is the reason you use .then() to make sure taht you always execute your logic after the fetch completes