What is the reason for JavaScript to return an empty array?

Question

What is the reason for JavaScript to return an empty array?

How can I handle asynchronous operations in JavaScript to prevent my callback from returning an empty array? Here's the code snippet:

function getPicturesArray(nbr, callback){
    var avatarArr = [];
    for(var i = 0; i < nbr; ++i){
        request("https://randomuser.me/api/", {json: true}, (err, response, body) => {
            avatarArr.push(body.results[0].picture.large);
        });
    }
    callback(avatarArr);
}

getPicturesArray(12, (e) => {
    console.log(e);
});

console.log('here');

The output is: [] here

javascript arrays ajax request

Answer 1

Answer №1

For the sake of demonstration, I am simulating calls with a public service to highlight the asynchronous nature of HTTP requests.

Even though your for loop is complete when you invoke callback(avatarArr);, the requests (12 in this example) sent out are still pending, resulting in an empty avatarArr.

Note the presence of async before function getPicturesArray and await before fetch

The await keyword instructs the program to wait for the completion of the fetch call

It's imperative that you familiarize yourself with async/await.

async function getPicturesArray(nbr,callback){
    var avatarArr = [];
    console.log('loading...');
    for(var i =0; i<nbr ; ++i){
      const response = await fetch(`https://jsonplaceholder.typicode.com/todos/${i+1}`);
      const json = await response.json();
      avatarArr.push(json.title);  
    }
    console.log('done loading...');
    callback(avatarArr);
}

getPicturesArray(12, (e)=>{
    console.log(e);
});

console.log('see how this is executed before done loading...');

Answer 2

For the sake of demonstration, I am simulating calls with a public service to highlight the asynchronous nature of HTTP requests.

Even though your for loop is complete when you invoke callback(avatarArr);, the requests (12 in this example) sent out are still pending, resulting in an empty avatarArr.

Note the presence of async before function getPicturesArray and await before fetch

The await keyword instructs the program to wait for the completion of the fetch call

It's imperative that you familiarize yourself with async/await.

async function getPicturesArray(nbr,callback){
    var avatarArr = [];
    console.log('loading...');
    for(var i =0; i<nbr ; ++i){
      const response = await fetch(`https://jsonplaceholder.typicode.com/todos/${i+1}`);
      const json = await response.json();
      avatarArr.push(json.title);  
    }
    console.log('done loading...');
    callback(avatarArr);
}

getPicturesArray(12, (e)=>{
    console.log(e);
});

console.log('see how this is executed before done loading...');

Answer 3

Answer №2

Implement Promises or async/await instead of using callbacks.

  getUserPic = async () => {
    const url = 'https://randomuser.me/api/'
    const response = await fetch(url)
    const users = await response.json()

    return users.results[0].picture.large
  }
  ;(async () => {
    const userAvatars = []
    for (let i = 0; i < 12; i++) {
      userAvatars.push(await getUserPic())
    }
    console.log(userAvatars)
  })()

Consider using Set instead of Array to avoid duplicate items in the collection.

  getUserPic = async () => {
    const url = 'https://randomuser.me/api/'
    const response = await fetch(url)
    const users = await response.json()

    return users.results[0].picture.large
  }

  getMultipleUserPics = async limit => {
    const userAvatars = new Set()
    while (userAvatars.size != limit) {
      userAvatars.add(await getUserPic())
    }

    return userAvatars
  }

  ;(async () => {
    const userPics = await getMultipleUserPics(5)
    console.log(userPics)
  })()

Answer 4

Implement Promises or async/await instead of using callbacks.

  getUserPic = async () => {
    const url = 'https://randomuser.me/api/'
    const response = await fetch(url)
    const users = await response.json()

    return users.results[0].picture.large
  }
  ;(async () => {
    const userAvatars = []
    for (let i = 0; i < 12; i++) {
      userAvatars.push(await getUserPic())
    }
    console.log(userAvatars)
  })()

Consider using Set instead of Array to avoid duplicate items in the collection.

  getUserPic = async () => {
    const url = 'https://randomuser.me/api/'
    const response = await fetch(url)
    const users = await response.json()

    return users.results[0].picture.large
  }

  getMultipleUserPics = async limit => {
    const userAvatars = new Set()
    while (userAvatars.size != limit) {
      userAvatars.add(await getUserPic())
    }

    return userAvatars
  }

  ;(async () => {
    const userPics = await getMultipleUserPics(5)
    console.log(userPics)
  })()

What is the reason for JavaScript to return an empty array?

Answer №1

Answer №2

Similar questions

Can you explain the purpose of $winstonLoggerConfig<T>() and $winstonLogger<T>() in winston v3?

"Encountered an error while trying to access properties that

Is there a way to transfer JSON data from a JSP page to a Spring REST controller efficiently?

Converting an Array with Key-Value pairs to a JSON object using JavaScript

How does NodeJs handle ongoing tasks and processes seamlessly?

Leveraging the Spread Operator in Redux mapDispatchToProps with SweetAlert2

Having Trouble with My Array Key Value Multiplication Script

Acquiring profile information in intricate scenarios using passport-facebook with node.js

What could be causing the code to malfunction and prevent window.ethereum from working properly?

Issues with jQuery show and hide functionality are not performing as expected

Each keystroke is saved individually in an array, thanks to React, instead of storing the entire text

Utilizing a Jackson-inspired library for handling JSON property names containing dots in Javascript

Retrieve the property of an object from within an array

"Create a smooth transition effect in CSS by fading out one div and fading in

What is C++'s perspective on understanding Arrays as pointers?

Managing API responses and notifications within a Redux store: tips and best practices

The JSON page does not display the image

Understanding the implementation of public and private methods in mixins in Vue2

Can a single controller function in ASP.NET MVC4 be used to send back two arrays to the view?

Populating PHP array using a "for" loop