Instead of displaying the downloadurl, the `[object Object]` is shown

The console is not displaying the downloadurl, instead [object,Object] [screenshot image]1

this.dbs.collection("databases").get().toPromise().then((snapshot) => {
  snapshot.docs.forEach(doc=>{ 
    let name=doc.data().path;
    this.down=this.storage.ref(name).getDownloadURL();
    console.log(name);
    console.log(this.down);
  })

Answer №1

When examining the developer guide, it's important to note that the method getDownloadURL() returns a promise. Therefore, you should make sure to wait for this promise to be resolved before trying to access the URL:

this.storage.ref(name).getDownloadURL().then((link) => {
  this.down = link;
}

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

Generating exports while utilizing the UseReducer hook method for a React application

My React hooks application includes a special actions file when userReducer is used, as shown below: export namespace PrepareReviewActions { export enum Types { TOGGLE_CONFIRMATION, TOGGLE_ALL_CHECKED, SET_EXCEPTION_TYPES, SET_ACTION_ ...

Creating a versatile protractor framework to streamline multiple project implementations

There's a concept in the works for creating a 'protractor core' that will be utilized by various projects for UI testing. Currently, I have an Angular project called 'project1' with e2e tests (cucumber-protractor-typescript) that c ...

Encountering an issue when trying to build an Apache Cordova Android application that integrates Firebase and cordova-plugin-f

I am seeking assistance regarding the Firebase and Cordova plugin known as cordova-plugin-firebase. I am using Visual Studio 2017 and need to create an Android project with push notifications. After installing the plugin, I encountered an error when trying ...

Implementing ngFor to group values within div containers according to specific keys

In my Angular application, I am working with an array named calendarDates that holds various date-related information. calendarDates = [ {"date": "2018-10-23", "day": 5, "month":10, "year":2018, "price":"500", "date_is_valid": true}, {"date": "2018-10 ...

What is the best way to display large typescript types within VSCode?

My question pertains to a type that has a large structure, similar to the one below: type Large = { foo: 123, bar: 123, baz: 123 } | { foo: 123, bar: 123, baz: 123 } | ... When I hover over it in VSCode, it gets shortened like thi ...

What sets Firebase apart from Express in terms of its core functionalities?

Currently, I am delving into the realm of writing an API using Express and MongoDB while incorporating Angular for routes and views. I have been contemplating whether Firebase and AngularFire could potentially eliminate the need for Express altogether, mak ...

Using TypeScript to define attributes by merging specified attribute names with variable attribute names

Can a TypeScript type/interface be created with the specified structure below? interface Model { id: number; something: string; somethingElse: Date; [key: string]: string | null; } It essentially consists of both defined attributes and 0 to n und ...

I am experiencing issues with Jest tests failing due to the ENOENT error indicating that the specified spec files cannot be found in the directory

We are encountering issues with our NestJS project that has multiple modules. Out of the blue, certain tests have started failing with errors like: FAIL libs/backend/nest/pipes/src/lib/iso-date-validation.pipe.spec.ts ● Test suite failed to run ENOENT ...

I have successfully implemented useLazyQuery in a functional component, but now I am looking to integrate it into a class component. Can you provide guidance on how to achieve

Recently, I encountered an issue with my functional component that contains 3 checkboxes and 1 button. I utilized the useLazyQuery hook to ensure that my query was only sent upon clicking the button. However, a major drawback is that my component re-rend ...

Leverage the optional attribute of an interface as a data type within openapi-typescript

Is there a way to use an interface property as a variable type in TypeScript? I need to access the property: string type and use it as a variable type, but I'm having trouble accessing it. interface foo { bar?: { baz: { property: string; ...

What is the process for invoking an External Javascript Firestore function within a Typescript file?

Trying to figure out how to integrate a Firestore trigger written in an external JavaScript file (notifyNewMessage.js) into my TypeScript file (index.ts) using Node.js for Cloud functions. Both files are located in the same directory: https://i.stack.imgu ...

a helpful utility type for extracting a union from a constant array of strings

I create string arrays using const assertions and then use them to generate union types. const elements = ["apple", "banana", "orange"] as const; type elementsUnion = typeof elements[number]; // type elementsUnion = "appl ...

Access values of keys in an array of objects using TypeScript during array initialization

In my TypeScript code, I am initializing an array of objects. I need to retrieve the id parameter of a specific object that I am initializing. vacancies: Array<Vacancy> = [{ id: 1, is_fav: this.favouritesService.favourites.find(fav = ...

You have to include the necessary request body in the front-end request to address the

After successfully testing a POST request to add a new entity to the database from my project back-end using Postman, I encountered an error when trying to do the same from the front UI (I'm using Angular 4): Required request body is missing. Failed ...

Incompatible parameter type for the Angular keyvalue pipe: the argument does not match the assigned parameter type

I need to display the keys and values of a map in my HTML file by iterating over it. To achieve this, I utilized Angular's *ngfor with the keyvalue pipe. However, I encountered an error when using ngFor: The argument type Map<string, BarcodeInfo ...

Neither of the elements within the ngIf statement is visible despite the fact that one of them should evaluate to true

I'm currently grappling with using ngIf to conceal a component's details until the necessary variable is set. During this waiting period, it should display a loading message. Despite my efforts to find a solution through online searches, I'v ...

The method of evaluating in-line is distinct from evaluating outside of the

What causes the compiler to produce different results for these two mapped types? type NonNullableObj1<O> = {[Key in keyof O] : O[Key] extends null ? never : O[Key]} type NotNull<T> = T extends null ? never : T; type NonNullableObj2<T> = ...

Guide on displaying the length of an observable array in an Angular 2 template

I am working with an observable of type 'ICase' which retrieves data from a JSON file through a method in the service file. The template-service.ts file contains the following code: private _caseUrl = 'api/cases.json'; getCases(): Obs ...

Tips on ensuring a certain HTML tag is used in the component interface

I developed a custom checkbox component that can receive children props from its parent interface CustomCheckboxProps { children?: string; } const CustomCheckbox = (props: CustomCheckboxProps) => { const { children } = props; return ( <di ...

Typescript: object containing at least one property with the type T assigned

Is there a method to write the HasNumber interface in Typescript without receiving an error due to the fact that the HasNumberAndString interface includes a property that is not of type number? I am looking for a way to require the HasNumberAndString int ...