Why is my console.log not outputting anything here?

Question

So im trying to make a request to an API using a foreach loop on an array. The array contains a list of strings that are placed into the request

var myHeaders = new Headers();
myHeaders.append("Content-Type", "application/x-www-form-urlencoded");

var urlencoded = new URLSearchParams();
urlencoded.append("", "");

var requestOptions = {
  method: 'POST',
  headers: myHeaders,
  body: urlencoded,
  redirect: 'follow'
};

var array = [];
var data = [];

var importdata =  new Promise((resolve, reject) => {
    $.getJSON('name of json.json')
    .then(response => {
        data = response;
        resolve(response)
    })
    .catch(err => {
        reject(err)
    })
})

var getAPIResults = new Promise((resolve, reject) => {
    var xmlHttp = new XMLHttpRequest();
    data.forEach((element) => {
        console.log(element) // This isn't being outputted into the console, even though 'data' array has elements after running 'importdata'
        xmlHttp.open( "GET", 'http://api.com/json/apiroute?key=xxxx-xxx-xxxx&dataitem='+element, true );
        xmlHttp.send( null );
        array.push(xmlHttp.responseText)
    })
    resolve(xmlHttp.responseText)
})


async function main () {
    await importdata
    await console.log(data)
    await console.log(getAPIResults)
}

main()

I have added a comment where the data isn't being logged

Here is what the console looks like:

{Data: {…}}
Data:
   data: (1030) [expected data elements]
   __proto__: Object
   __proto__: Object

Promise {<fulfilled>: ""}
   __proto__: Promise
   [[PromiseState]]: "fulfilled"
   [[PromiseResult]]: ""

Surely there should be a long list of elements (the data array is around 1000 elements long) when getAPIResults is ran?

Answer 1

You're awaiting the console.log (which isn't asynchronous), but not awaiting the getAPIResults Promise (which is asynchronous). Just as you did when you awaited importdata, you also need to await getAPIResults:

await importdata;
console.log(data);
console.log(await getAPIResults);

Though it appears there are further problems within getAPIResults itself. Internally it's sending AJAX requests, which are also asynchronous, but it's trying to immediately use their responses. You'll need to continue to repeat the pattern of awaiting promises, or perhaps using callbacks.

At the very least the console.log(element) within getAPIResults will do what you're looking for, as asked in the question. But your next problem will be that array.push(xmlHttp.responseText) is pushing no data to the array and resolve(xmlHttp.responseText) is resolving nothing from the promise. (And don't you want to resolve to the array, not just the last API result?)

---

Edit: Regarding the AJAX operations taking place within getAPIResults, you'd want to treat them asynchronously just like you already do with importdata. In fact, why not just use $.getJSON like you already do? Perhaps something like this:

var getAPIResults = new Promise((resolve, reject) => {
    var promises = [];
    data.forEach((element) => {
        console.log(element);
        promises.push(
            $.getJSON('http://api.com/json/apiroute?key=xxxx-xxx-xxxx&dataitem='+element)
            .then(response => {
                array.push(response);
            });
        );
    });
    Promise.all(promises).then(() => {
        resolve(array);
    });
});

The idea here is that you loop through the array of data you have, invoking an AJAX request for each. $.getJSON returns a Promise, so you add all those promises to an array. Then use Promise.all to await all of those promises and, when they're complete, resolve getAPIResults to the resulting data.

As an aside, if it's an option you may want to start using async/await syntax. It would clear up a lot of this and make the code easier to follow. Instead of making things like getAPIResults a Promise, you'd make it a function which happens to be async. Something as simple as:

var getAPIResults = async () => {
    const result = [];
    for (const element of data) {
        // I don't think jQuery's AJAX functions return actual promises.
        // So I've wrapped it in one here.  Which is inelegant, but should work.
        // If they DO return actual promises these days, unwrap this.
        // It's worth testing both approaches for your needs.
        const response = await new Promise(resolve => {
            $.getJSON('http://api.com/json/apiroute?key=xxxx-xxx-xxxx&dataitem='+element)
            .then(json => {
                resolve(json);
            });;
        });
        result.push(response);
    }
    return result;
};

Then consuming that function would be:

console.log(await getAPIResults());

You'll also find that passing values to and returning values from functions is much cleaner than relying on global variables. Note how this version doesn't push to the global array variable but just returns the expected array. You could also make importdata a function which returns its result, and pass that result to getAPIResults as a function argument.