Display the value function within an Angular template

I am attempting to calculate the sum of a value in an array obtained from an HTTP GET method and a subscribe function. I want to display the result in the HTML but it is not working.

I really hope someone can assist me with this because I am stuck.

Here is my TypeScript file:

result: any;
getSumFacture() {
  let total: number;
  this.http.get(this.url).subscribe((data: any) => {
    this.products = data;
    total = this.products.reduce((sum: any, current: { totalPrice: any; }) => sum + current.totalPrice, 0);
    console.log(total);
    return total;
  });      
}

And here is my HTML file:

{{result}}

Answer №1

It is necessary to utilize the async technique as the API call yields a Promise :

<div>{{response |async }}</div>

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

Guide to making a Typescript interface by combining elements from two separate interfaces without utilizing inheritance

Programming Language: Typescript I am looking to combine the properties of two interfaces as the value of an indexable-type within a third interface. Interface 1: export interface Employee { id: string name: string } Interface 2: export interfa ...

Is it possible to utilize TypeScript version 2.0.6 in conjunction with Visual Studio 2017?

Is it possible to utilize TypeScript 2.0.6 with Visual Studio 2017, or do I need to use a version greater than 2.1? Also, can you explain the difference between Microsoft.TypeScript.Compiler and Microsoft.TypeScript.MSBuild? If I don't have Microsof ...

Unusual behavior observed in the String.split() function in TypeScript

I have a TypeScript model that looks like this: export class Product { id:number; name:string; brand:Brand; price:number; shippingPrice:number; description:string; photoName:string; productType:ProductType; purchaseCoun ...

Guide to iterating through an Observable<Object[]> to generate an array of objects

Google Firestore collection named users is structured as follows : { "contactNumber":"0123456789", "email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="88e2e7e0e6ece7edc8efe5e9e1e4a6ebe ...

What could cause a member variable to be uninitialized in the ngInit method in Ionic/Angular, even though it was initially set in the constructor

Despite setting the modal form to be bound to an instance of "Foo" during its construction, I encountered a strange issue where, post-constructor, this.foo became undefined. Even after verifying this through breakpoints and console.log, the problem persist ...

Exploring Vue 3.3: Understanding Generics and Dynamic Properties

I'm currently diving into the generics feature in vue 3.3 and I've been pondering about defining the type of an incoming prop based on another prop value. This is my current component structure: export interface OptionProps { id: string | numb ...

There is only a singular font awesome icon that appears properly based on the conditions set by [ngClass

I'm currently developing a user profile feature that allows users to submit links to their social media accounts. Each account is represented by a clickable icon, and the selection of which icon to display is based on various conditions within [ngClas ...

The specified type 'IterableIterator<number>' does not belong to either an array type or a string type

Encountering an error while attempting to generate a dynamic range of numbers. Error: Type 'IterableIterator<number>' is not recognized as an array or string type. Use the compiler option '--downlevelIteration' to enable iteratio ...

Unable to fetch data from URL in Angular using the HttpClientModule

I have a goal in my application to retrieve data from the following URL and showcase it within the app: https://jsonplaceholder.typicode.com/posts/1 The issue I'm encountering is that the data is not being displayed in my app. The console is showing ...

The VSCode Extension fails to launch after being packaged

I'm currently working on a straightforward VSCode extension that scans the active open file for any comments containing "//TODO: " and then presents a list of all TODO comments in a webview sidebar tab. While I have a functional prototype that runs s ...

React-Redux: Unable to access the 'closed' property as it is undefined

Encountered a problem when using dispatch() in React-Redux. Specifically, the action below: export const fetchMetrics = () => { dispatch(fetchMetricsBegin); APIService.get('/dashboard/info/') .then((response) => { ...

Issue: The last loader (./node_modules/awesome-typescript-loader/dist/entry.js) failed to provide a Buffer or String

This issue arises during the dockerhub build process in the dockerfile. Error: The final loader (./node_modules/awesome-typescript-loader/dist/entry.js) did not return a Buffer or String. I have explored various solutions online, but none of them have pr ...

The element cannot be clicked at the specified point in Protractor while using TypeScript

I've been struggling with this code and can't seem to get it to click the element or stop throwing errors. Can someone please help me correct this code? async testMethod() { let button = element( by.cssContainingText('span.mat-button-wr ...

Customize the appearance of pages in Ionic 2 on the fly

In my app, there are 2 different themes based on the subject matter. However, some pages are shared between subjects. Therefore, I need to customize the ion-content based on the subject. I am looking for a solution to allow page-test to switch between dif ...

Change Json data into a TypeScript class [ts]

I have the following JSON data: {"mapData":{"test":"success","publicKey":""},"statusCode":200,"message":null} How can I convert this JSON to a TypeScript class? The mapData contains anonymous values: It may be {"test":"success","publicKey":""} Or it m ...

Having trouble with Angular 17 router.navigate not functioning properly?

I'm facing an issue with my angular application where I have two pages - one with a form and the other with data. Upon clicking a button, I navigate to the results page using router.navigate. However, I've noticed that sometimes the navigation do ...

Dynamically pass a template to a child component

How can I dynamically load content on my page based on the active navigation point? export class Sub_navigation_item { constructor( public title: string, public templateName: string ) {} } I have a navigation item with an ID from an ...

Webpack and typescript are encountering a critical dependency issue where the require function is being utilized in a manner that prevents static extraction of dependencies

Having recently started diving into typescript and webpack programming, I must admit that my background in this area is limited. Despite searching through similar questions on Stack Overflow, none of the solutions provided so far have resolved my issue: I ...

Formatting Strings in JavaScript when saving as a .txt file with proper indentation

Utilizing Angular and TypeScript/JavaScript for testing purposes. Each row has been formatted with a newline at the end of the code. formattedStr += car.Name + ' | ' + car.Color + ' | ' + car.Brand + '\r\n' The da ...

Executing multiple HTTP requests in Angular using the HttpClient

Recently, I came across a concerning issue in my Angular 5 App. It all started with this simple call in my service: interface U{ name:string; } ... constructor(private http : *Http*, private httpC:HttpClient) // Http is deprecated - its a compare test ...