Retrieve information from a Firestore reference field and store it in an array

I am currently working with order data that includes user data and hotel data as references. As shown below, I have the following code to retrieve the data:

this.orderService.getOrders().subscribe(result => {
      this.orders = result.map(e => {
        return {
          id: e.payload.doc.id,
          uid: e.payload.doc.data()['uid'],
          vid: e.payload.doc.data()['vid'],
          grandTotal: e.payload.doc.data()['grandTotal'],
          status: e.payload.doc.data()['status'],
          paid:e.payload.doc.data()['paid'],
          time:e.payload.doc.data()['time']
        }
      });
    });

However, when trying to access uid and vid, which are references to Firestore documents, I attempted the following code snippet:

uid:e.payload.doc.data()['uid'].get().then(data=>{return res.data()}));

Unfortunately, this is returning a ZoneAwarePromise. Can someone please advise on how to retrieve the value of the document?

Here is a snippet from OrderService.ts:

 getOrders() {
    return this.db.collection('orders').snapshotChanges();
  }

Answer №1

Here are a few helpful resources on optimizing firestore usage. You'll find samples of various queries in this documentation, along with details on using firestore's REST API.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to address memory leakage issues in Angular

Is there a way to manually optimize the Garbage Collector by forcefully pushing variables into it? For example, if we have a root or global level variable in an Angular component that is no longer needed when switching to another page, how can we ensure it ...

Return the previous value if the filter function returns false in RxJs

In an attempt to optimize performance and reduce unnecessary requests to the server, this code checks if values exist in the store before making additional requests. While the overall logic functions correctly, there is an issue where if the filter returns ...

Disable multiple buttons at once by clicking on them

What is the best way to disable all buttons in a menu when one of them is clicked? Here is my code: <div class="header-menu"> <button type="button"> <i class="fa fa-search" matTooltip="Filter"& ...

Evaluating string combinations in JavaScript using valid comparisons

After choosing values on the screen, two variables store their value. var uval = '100'; var eval = '5'; There are 2 combinations with values: let combination1= 'u:100;e:1,4,5,10' let combination2 = 'u:1000;e:120,400,500, ...

Angular 14 is throwing an error due to an indent issue - the expected indentation is 2 spaces but 4 spaces were found

Currently using "eslint": "^8.23.0" with angular 14. Everything was functioning properly with "eslint": "^8.22.0", but after updating to 8.23.0, I encountered the following error: https://i.sstatic.net/UALvS.png ...

Issue encountered while attempting to compare '[object Object]'. This operation is restricted to arrays and iterables

I'm puzzled by this error that keeps popping up in my code. The issue seems to be occurring in AppComponent.html:4. An error is appearing related to '[object Object]'. It seems that only arrays and iterables are allowed. app.component.ht ...

Tips on setting a singular optional parameter value while invoking a function

Here is a sample function definition: function myFunc( id: string, optionalParamOne?: number, optionalParamTwo?: string ) { console.log(optionalParamTwo); } If I want to call this function and only provide the id and optionalParamTwo, without need ...

Breaking apart a combination of unions into a collective group of tuples within TypeScript

Looking for a solution similar to TypeScript extract union type from tuple, this question delves into how to split ['a' | 'b', number] into ['a', number] | ['b', number] rather than focusing on why they are not direc ...

Using type definitions in non-TS files with VSCode: A beginner's guide

My code is not in TypeScript, shown here: // foo.js module.exports = app => { // some logic here } I want to enhance my development experience by using TypeScript definition files to specify the type of the argument app, enabling VSCode to provide ...

Calculating numbers with Math.ceil will result in an increase of 1

After using Math.ceil, one value was rounded up to 50 and the other to 80. However, when I added these two values together, the result unexpectedly turned out to be 131. console.log(Math.ceil(e.currentTarget.clientHeight) // 50 console.log(Math.ceil(e.cu ...

Create a TypeScript array of objects that mirrors a Java List<Map<String, String>>

In my Java function, the argument type is List<Map<String, String>>. To perform a fetch call from a TypeScript file, I need to declare a variable whose type corresponds to List<Map<String, String>>. As TypeScript does not have a bu ...

Transferring multiple parameters between components using Navigate and ParamMap

My concern is that I'm unsure of how to pass multiple parameters through the component's route. I need to send two attributes. Is there a specific syntax required in defining the route? Below is my desired functionality for passing the attribut ...

Update the Firestore data by modifying one value depending on another value, and then synchronize the user interface to display the updated information

Greetings! I'm a newbie to the world of Swift and have been diligently following tutorials to enhance my skills. Recently, I decided to take the plunge and build my own app. However, I've hit a roadblock and am struggling to find a solution. I wo ...

Enhancing TypeScript type definitions for the Response.render() method in Express

Struggling with enhancing the type safety of my Express project by extending the Response.render function. import { Response } from "express"; import { Product } from "../models/Product.interface"; export interface ProductListResponse ...

What steps should I take to fix this Angular 8 error?

Encountered an issue in ../node_modules/@angular/http/src/backends/jsonp_backend.d.ts:1:28 - error TS2307: Module 'rxjs/Observable' not found. 1 import { Observable } from 'rxjs/Observable'; ~~~~~~~~~ ...

Assign the primeng dropdown's value to the model in a reactive form

I am currently encountering an issue while populating a form that contains several PrimeNg dropdowns. To simplify, let's consider an example similar to the ones provided on their website. <form [formGroup]="myFormGroup"> <p-dropdown [optio ...

Cloud function for Firestore to recursively update a subcollection or collection group

I've been working on this cloud function: import pLimit from "p-limit"; const syncNotificationsAvatar = async ( userId: string, change: Change<DocumentSnapshot> ) => { if (!change.before.get("published") || !change.after.exists) { ...

Typescript: Utilizing Index-Based Callback Parameters in Functions

I am currently working on creating a function that can handle specific data types ("resource") along with an array of arrays containing call objects and corresponding callbacks for when the calls finish ("handlers"). function useHandleResource< R exte ...

The bar chart functions perfectly on localhost but encounters issues after being hosted on Gitpage

Localhost Gitpage The bar chart was displaying correctly on localhost, but once it was hosted on Gitpage, it began to show issues. Any suggestions on how to resolve this? Repository Link: https://github.com/mzs21/bar-chart Live Preview: ...

Custom Typescript type that runs concurrently with the base type is disregarded

Assumption: When creating a custom type that mirrors an existing type, the expectation is for variables assigned to that type to maintain it and not default back to the base type. In the function f provided below, the expected return type should be Dog ins ...