I am new to promises as I am trying to get some objects to show there actual values on a webpage. Instead I am just getting a bunch of [object Promise]
instead
This is the code I have so far:
\ This section fetches the api results and puts them into a list/array async function getitglinkquery(){ var linkresults = await parseitgsearchquery(); console.log(linkresults); // var linkresultvalues = []; for (let i = 0; i < linkresults.length; i++) { var linkresultvalues = fetch(linkresults[i], { method: "GET", withCredentials: true, headers: { // needed to base64 encode my key with ":x" at the end of the api key then I used that for the authorization header. "x-api-key": "INSERTAPITHINGYHERE"}}) .then(response => response.json()) } return linkresultvalues; } \**This section is trying to get the promise and parse the results** async function parseitglinkquery() { var queriedresults = await getitglinkquery(); console.log(typeof queriedresults); // linkresultvalues.push(response); const output = document.querySelector('span.ms-font-mitglue'); let pre = document.createElement('p'); pre.innerHTML = queriedresults; pre.style.cssText += 'font-size:24px;font-weight:bold;'; output.appendChild(pre); } parseitglinkquery(); }
What I tried
I tried reading the firefox promise.resolve
method as that seems like what I was looking for: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/resolve However I tried using the static promise.resolve method example they have and it didn’t work for me. Like so:
\ This section is trying to get the promise and parse the results async function parseitglinkquery() { var queriedresults = await Promise.resolve(getitglinkquery()); console.log(queriedresults); \ This is where my promises are coming out of }
So I don’t think that is what I am looking for. I also tried reading here: https://stackoverflow.com/a/64165144 but I don’t know how to use the .then
method to get the variables from the result. I already put .then
in the api request at the first function yet I still have a list of promises.
Picture of the code: enter image description here
Picture of the result: enter image description here
I tried Promise.all()
but it errored out and didn’t work so I don’t think that is the issue as well. I double checked my queriedresults
variable to make sure its an object by using console.log(typeof queriedresults) and it said it was an object.
Attempted code:
async function parseitglinkquery() { var queriedresults = await Promise.all(getitglinkquery()); }
Error: Uncaught (in promise) TypeError: object is not iterable (cannot read property Symbol(Symbol.iterator))
Picture of the failure again
I tried using:
queriedresults.then(function(result){ console.log(result) })
based on the information from here: https://stackoverflow.com/a/29516570/16660683 but that didn’t work either as I get an error:
Uncaught (in promise) TypeError: queriedresults.then is not a function
Advertisement
Answer
The proper usage of Promise.all
is
async function getItglinkQuery() { const linkresultUrls = await parseItgsearchQuery(); const linkresultPromises = []; for (let i = 0; i < linkresults.length; i++) { const promise = fetch(linkresults[i], { method: "GET", withCredentials: true, headers: { "x-api-key": "INSERTAPITHINGYHERE" } }) .then(response => response.json()); linkresultPromises.push(promise); // ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ } return Promise.all(linkresultPromises); // ^^^^^^^^^^^ }
Now, getItglinkQuery
returns a promise for an array of values, not a promise for an array of promises.