The outcome of a promise is an undefined value

I am facing an issue where I need to access the result of my API call outside the promise, but the value I receive is always undefined.

Within the OrderService :

public async getOrderPrice(device: string) : Promise<any> {
    this.urlOrderPrice = this.urlOrderPrice.replace("device", device);
    return await this.http.get(this.urlOrderPrice).toPromise();
  }

Inside the OrderDetailsComponent :

 public orderPrice: any;

 ngOnInit(): void {
    this.getOrder()?.then(data => { this.orderPrice = data; console.log(this.orderPrice) });
 }

private async getOrder() {
    const id = this.route.snapshot.paramMap.get('id');
    let order;
    if (id != null) {
       order = this.orderService.getOrderPrice(id).then((result) => {
        return result.results[Object.keys(result.results)[0]].val;
      });  
    }
    return order;
  }

Answer №1

When the getOrder() function is called with a null id, the returned order will be undefined.

Additionally, make sure to eliminate any unnecessary awaits from the REST call.

public async getOrderPrice(device: string) : Promise<any> {
    this.urlOrderPrice = this.urlOrderPrice.replace("device", device);
    return this.http.get(this.urlOrderPrice).toPromise();
  }

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

Incorporating DefinitelyTyped files into an Angular 2 project: A step-by-step guide

I am currently developing an application using angular 2 and node.js. My current task involves installing typings for the project. In the past, when starting the server and activating the TypeScript compiler, I would encounter a log with various errors rel ...

Error: The parameter should be a string, not an object

I am having trouble with a function that is supposed to return a string but instead, it returns an object. Unfortunately, I cannot use the .toString() method either. currentEnvironment: string = "beta"; serverURL: string = this.setServerURL(this.currentEnv ...

When a Javascript function marked as async is executed, it will return an object

Async function is returning [object Promise] instead of the desired real value. Interestingly, I can see the value in the console log. It seems like this behavior is expected from the function, but I'm unsure how to fix my code. This code snippet is ...

Converting string literals to an array of enums

I have a scenario where I am getting the following data in an API response: { "roles": [ "ADMIN", "USER" ] } The response always includes an array of roles (USER, PRESENTER, ORGANIZER, and ADMIN). I am looking to transform this into a valid TypeScript a ...

Warning: Google Map API alert for outdated Marker Class

Working on an application using the Google Maps TypeScript API, I came across a warning message when launching the app -> As of February 21, 2024, google.maps.Marker will no longer be available. Instead, developers are advised to use google.maps.marke ...

Detecting Changes in Angular2 Component Attributes via Observables

When working with Angular 2 components that have input attributes defined using @Input, how can I create an observable to track changes to those input attributes (not to be confused with user input from a form)? export class ExampleComponent implement OnC ...

Angular4 encountered an error: $(...).DataTable is not recognized as a function

I utilized the bootstrap4 datatable jQuery function within my Angular4 application to construct a sortable table. Below is the code snippet. .component.ts import { Component } from '@angular/core'; declare var $: any; @Component({ template ...

Exploring the usage of arrays within Angular 4 components. Identifying and addressing overlooked input

I'm struggling with array declaration and string interpolation in Angular 4 using TypeScript. When I define the following classes: export class MyArrayProperty { property1: string; property2: string; } export class MyComponent { @Input() object: ...

When using TypeScript with custom components as children in React, the `type` returned by React.Children is a string representing the function

It might sound a bit odd, or maybe I'm completely off track here. While going through some articles and React documentation on getting children and identifying specific child components using React.Component.map(), I ran into an issue with my custom c ...

What is the best way to declare a global TypeScript variable in a definition file to make it accessible for import?

My issue revolves around an external JS library that contains a global parameter: function Thing() { ... } ... var thing = new Thing(); I have a TypeScript definition file named thing.d.ts with the following content: declare var thing: ThingStatic; ex ...

Bootstrap Modal - Preselected Dropdown Option

When using Bootstrap Modal, I am encountering an issue where the default option is not being displayed correctly. Instead of "Please Select" appearing as the default choice in the drop-down, it is showing up as "A" by default. Below is the HTML code snip ...

Avoid invoking a TypeScript class like a regular function - _classCallCheck prevention

I am currently developing a TypeScript library that needs to be compatible with all versions of JavaScript. I have noticed that when calling a class in TS without using new, it does not compile properly, which is expected. In ES6/Babel, a class automatica ...

When utilizing a 'Token' in the provider() aliasing within Angular 2, the Typescript compiler may display an error message stating 'Unresolved variable or type'. This issue can arise when defining

When working with Typscript, I've encountered an issue where it can't handle a 'Token' in the context of an Angular2 provide() aliasing function. I'm unsure if there's a specific setting in the typescript compiler to address t ...

Deciphering key-value pairs that are separated by commas

I am looking to convert the following format: realm="https://api.digitalocean.com/v2/registry/auth",service="registry.digitalocean.com",scope="registry:catalog:*" Into this JSON object: { realm: "https://api.digitaloce ...

Upgrading my loop React component from vanilla JavaScript to TypeScript for improved efficiency and functionality

After seeking assistance from Stack Overflow, I successfully created a loop in React using a functional component that works as intended. However, I am encountering errors while trying to refactor the loop to TypeScript. The code for my DetailedProduct c ...

When working with TypeScript for initial data, you have the choice between using interface types or class types. Which approach is the

When working with initial data in TypeScript, you have the option to use either an interface type or a class type. Which approach is preferable? export interface Item{ text: string, value: number } itemModel: ItemComboBox = { value:'valu ...

How can one determine the completion of a chunked download request in Angular's HTTP client?

Currently, I am utilizing angular's HttpClient to retrieve an arraybuffer. The server is transmitting the data along with the following headers: *To avoid any confusion, the download route essentially retrieves a chunk file stored in the cloud. Howev ...

Angular drag and drop feature for interacting with intersecting elements like rows and columns within a table

I am currently working on implementing two intersecting drag and drop functionalities using cdkDragDrop. Although I generally try to avoid using tables, I have created one in this case for the sake of easier explanation. Here is the link to StackBlitz: ht ...

Angular 5 browser console displaying a communication from the server

I recently encountered an issue in Angular5 while trying to log into my account. Whenever there is a wrong password error, it displays a message in the browser console indicating server error 500. However, I do not want this message to be shown in the brow ...

Issue encountered while utilizing npm on Visual Studio 2015

I'm attempting to run my Angular2 project with Visual Studio 2015. It works perfectly when I start it using npm in the windows console with the command 'npm start'. However, when trying to do the same thing using npm Task Runner for VS, I e ...