How to await values being added to array?

Question

I have a project where I am parsing a fast-food menu using Request-Promise and Cheerio, then returning an "order" based on what a user asks for. However, I am having some trouble outputting the "order" which I am storing as an array.

var rp = require('request-promise');
var cheerio = require('cheerio');
var tempMenu = [];
var order = [];

function getItem(item) {

    var itemUrl = baseURL + '/' + item

    var itemMenu = {
        uri: itemUrl,
        transform: function (body) {
            return cheerio.load(body);
        }
    };

    rp(itemMenu)
        .then(function ($) {          
            //.class #id tag
            $(".product-card .product-name a").each(function () {
                tempMenu.push($(this).text());
                order.push(tempMenu[Math.floor(Math.random() * tempMenu.length)]);
                
            });
            console.log(order)
        })

        .catch(function (err) {
        }); 
}

getItem('drinks')
console.log(order)

Currently, the output is:

[]
[
 'drink1',
 'drink2',
 'drink3'
]

If I change the code to the following:

  rp(itemMenu)
        .then(function ($) {          
            //.class #id tag
            $(".product-card .product-name a").each(function () {
                tempMenu.push($(this).text());
                order.push(tempMenu[Math.floor(Math.random() * tempMenu.length)]);
                
            });
            console.log(1)
        })

        .catch(function (err) {
        }); 
}

getItem('drinks')
console.log(2)

The log is

2
1

So I know my problem is the the "order" array isn't filled when I try and output it because it is being logged first, my question is how can I await the array being filled, then output it?

You almost answer your own question at *how can I await the array being filled*; using [`async / await`](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Async_await). — Emiel Zuurbier, Dec 09 '20 at 19:01
@EmielZuurbier You are right - I guess I just needed to type it out. Changing my function to an async function, and adding await to my rp() and getItems() sorted it out. Thanks! — Jacob, Dec 09 '20 at 19:32

score 0 · Answer 1 · answered Dec 09 '20 at 19:08

0

The reason it happens is that the then cb function goes to the callback queue. You should wrap them both in an async function with an await on the part you want to wait for.

That should solve you that problem.

answered Dec 09 '20 at 19:08

Eldad Nevo

1
1

Danziger · Accepted Answer · 2020-12-09T20:25:17.763

Your getItem function should return a Promise and then you can either use the Promise.prototype.then() method on it or the await keyword to make sure you wait for the results before trying to process them.

Here's a simple example with some fake rp function and data:

// Fake:
const rp = (item) => {
  console.log(`Fetching ${ item }...`);
  
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(Math.random());
    }, 1000 + Math.random() * 2000)
  });
}

function getItem(item) {
  const order = [];
  
  // This `getItem` function returns a Promise...
  return rp(item).then((randomNumber) => {          
    for (let i = 0; i < 10; ++i) {
      order.push(`${ item } ${ randomNumber + i }`);
    }
    
    // ...and when this Promise resolves, it will return the `order`
    // array with the right values in it:
    return order;
  });
}

getItem('Drinks').then(order => console.log(order));

console.log('This is executed after calling getItem, but we ware still waiting for the Promise to resolve...');

.as-console-wrapper {
  max-height: none !important;
}

Alternative with async/await:

// Fake:
const rp = (item) => {
  console.log(`Fetching ${ item }...`);
  
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(Math.random());
    }, 1000 + Math.random() * 2000)
  });
}

function getItem(item) {
  const order = [];
  
  // This `getItem` function returns a Promise...
  return rp(item).then((randomNumber) => {          
    for (let i = 0; i < 10; ++i) {
      order.push(`${ item } ${ randomNumber + i }`);
    }
    
    // ...and when this Promise resolves, it will return the `order`
    // array with the right values in it:
    return order;
  });
}

// You can't use `await` outside an `async` function, so we define this first...:
async function loadDataWithAwait() {
  const order = await getItem('Food');

  console.log('This won\'t be executed until getItem\'s Promise is resolved:');
  console.log(order);
}

// ...and now call it:
loadDataWithAwait();

.as-console-wrapper {
  max-height: none !important;
}

Thanks for this. I got it working from Emiel's comment, but this has given me something to look at and learn from going forward! — Jacob, Dec 09 '20 at 21:37

How to await values being added to array?

2 Answers2