Json fetch returning elements in random order

user_13478452 0
Viewed 622

I am having trouble with a fetch request, the thing is that for some reason it's returning the elements in random order. The function is the following:

function create_post_div(element, isLogged, currentUser, isProfile) {
      console.log(element.id);
    
      fetch(`likes/${element.id}`)
        .then((response) => response.json())
        .then((like_element) => {
          console.log(like_element.user_liked, element.id);
      });
 }

For simplicity's sake I didn't put the whole function but the error can be detected with the console log. The first console log should return the element.id which are integers and the second the like_element.user_liked which is a boolean and the same element.id.

The create_post_div function has to run for each of the elements received from another function (let's say a list [1, 2, 3]). When I run the function the first console.log returns the numbers in the correct order, but the console.log inside the fetch return them randomly. Other thing that I noted is that instead of the console be something like:

1
true, 1
2
false, 2
3
true, 3

It logs like this:

1
2
3
false, 2
true, 3
true, 1

It will first log all of the id's and after log the likes with the ids. Again, the id's in the first log always in order and the second log always unordered.

fetch json javascript
3 Answers

When you use fetch you create a Promise, an operation that will take an undefined amount of time to complete. And Javascript doesn't wait for the promise to be completed, it keeps running doing all the other stuff that you have coded.

Once the fetch operation is completed the code that you put inside the .then is executed, that is why it's called asynchronous code, because it's exectuted after an undefined amount of time.

Rather than fighting this and trying to force the code to run syncronously with async / await like suggested I would reccomend rewiring your brain to understand and embrace this pattern. Unless it's absolutely necessary by design but it should be a very rare situation.

user_39567970

You're just dealing with the beautiful of asynchronous operations.

See the last example on the TutorialsPoint NodeJS Course. This code:

const fs = require("fs");

fs.readFile("input.txt",
    (err, data) => err ? console.log(err.stack) : console.log(data.toString())
);
console.log("Program Ended");

outputs:

Program Ended
Some text.

In your case, you:

  1. Call create_post_div
    1. Logs the id
    2. Starts fetching
  2. Call create_post_div again
    1. Logs the id again
    2. Starts fetching again
  3. Call create_post_div again
    1. Logs the id again
    2. Starts fetching again

Then, for each fetched data (which is a random operation, as you can see...), logs it as the data is received. But, if there's no data received, your code doesn't log it. It just does so as when there is data. When you call fetch().then, the then method comes from a Promise. And JavaScript Promises promises to return / do something in the future, but not right now.

If you want more explanation, I will leave you with a link to a similar question in the comments.

user_116228350

The fetch is asynchronous so console.log in the callback .then() could be in any order as you observed.

Most of the time this is fine. It should be another part of your code should be changed to adopt this async pattern.

However, if you want to force it running in a synchronous order, you can run it with a reduce.

Here is an example

const elements = [1, 2, 3];

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

// this prints 3,2,1
await Promise.all(
    elements.map(async (i) => {
      await sleep(10 - i);
      console.log(i);
    })
);

// and this prints 1,2,3
await elements.reduce(async (prev, i) => {
    await prev;
    await sleep(10 - i);
    console.log(i);
}, undefined);
user_5530730
Related