I am trying to fetch data from my firestore database and then use the returned array of objects into my template. What I expected to be an array of objects is in fact a promise. and I can't seem to figure out how to extract it's data.

Here is the function that that does two calls to my firestore database, then combines both results into an array. The func returns this array.

async getOtherArticles (src, target){
    try {
        var tempArticles = []
        const q = query(collection(projectFirestore, "database")
        ,where('target', '==', target)
        ,where('src','==',src));
        const docs = await getDocs(q);
                    
        if(docs){
            docs.forEach((doc) => { tempArticles.push(doc.data()) })
        }
                    

         const q2 = query(collection(projectFirestore, "database")
         ,where('target', '==', src)
         ,where('src','==',target));
         const docs2 = await getDocs(q2);
         if(docs2){
             docs2.forEach((doc2) => { tempArticles.push(doc2.data()) })
         }
         return tempArticles
                    
     } catch (err) {
         throw new Error(err.message) 
     }
 }

Then I simply call the previous func in order to it's result as in the example below

this.similarArticles = this.getOtherArticles(this.drawerLinkData.src,this.drawerLinkData.target).then( function(val){return val})

When I console.log the result, I get :

Promise {<pending>}
[[Prototype]]: Promise
[[PromiseState]]: "fulfilled"
[[PromiseResult]]: Array(1)
0: {region: Array(1), technology: Array(1), target: 'Yandex', video: '', summary: '<p>Yandex announced that it has entered into a bin…rship in the business.</strong></p>\n<p>&nbsp;</p>', …}
length: 1
[[Prototype]]: Array(0)

I wish to get only what is in [[PromiseResult]]. How can I achieve this?