Returning [object Promise] instead of actual value

Question

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

enter image description here

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

Take a look at `Promise.all()`, if you have an array of promises it's most likely what you're looking for. Also, try to avoid mixing promises with await, it makes it hard to reason about the code. — Michał Sadowski, Aug 13 '21 at 19:14
You pasted poorly or your code has some seriously unbalanced `(` and `{`. — crashmstr, Aug 13 '21 at 19:14
@MichałSadowski I found out that my promise isn't an array. it just looks like one because I made a variable called `linkresultvaluesx` and put my fetch into that instead. Then I appended all the results of the fetch like so: `linkresultvalues.push(linkresultvaluesx)`. I only assume its not an array because when I tried `var querriedresults = await Promise.all(getitglinkquerry());` I got an error that said `Uncaught (in promise) TypeError: object is not iterable ` I am going to try to see the type of data it is by using console.log(typeof querriedresults)). Be back soon — , Aug 13 '21 at 19:40
@stsitilegnikcuferasyuguoy You need to put the `return Promise.all(linkresultvalues);` *inside* the `getitglinkquerry` function. The call shouldn't change. (Btw, I'd recommend renaming `linkresultvalues` to `linkresultpromises` since it's an array of promises) — Bergi, Aug 13 '21 at 21:25
@bergi I am pretty sure you just hit the nail on the head. I am gettting [object Object] instead but I think I can retrieve that object data by iterating over what I want in a for loop. so I think this solve the main issue of how to get my results from a promise. If you make an answer to this I will give you credit. Also I will probably change the variable to `linkresultpromises` instead. The wording is better and more on topic. Thanks — , Aug 13 '21 at 21:34

score 2 · Accepted Answer · answered Aug 13 '21 at 21:45

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.

I am too low to give you an +1 but I marked yours as the answer. Because of you I was able to continue onto parsing the actual object instead of getting promises. Now everything on the webpage works perfectly. Thank you again. — , Aug 13 '21 at 22:16

Returning [object Promise] instead of actual value

1 Answers1