Returning [object Promise] instead of actual value

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

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.