Angular: Is it possible to access a specific value within an object inside an array?

If I wanted to achieve a total of 59, what steps should I take?

data = [
   {name: 'AK', price: 50, amount: 1, total: 50},

   {name: 'UMP', price: 59, amount: 1, total: **59**}
]

Answer №1

Are you in need of a solution involving Array iteration?

for (let item of array) {
    console.log(item.value);
}

If you require a condition-based solution, try this:

array.find(item => item.name === 'UMP').value;

Answer №2

When dealing with a static data array:

 data[1].total   

However, if the data array is not static:

  const objectWithTotal59 = this.data.filter(item =>{
          return item.total === 59;
        })

In that case, retrieve the total value from the first object:

objectWithTotal59[0].total;

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

Personalized context hook TypeScript

I have been experimenting with a custom hook and the context API, based on an interesting approach that I found in this repository. However, I encountered an error when trying to use it with a simple state for a number. Even though I wanted to create a mo ...

Creating variables in Typescript

I'm puzzled by the variable declaration within an Angular component and I'd like to understand why we declare it in the following way: export class AppComponent { serverElements = []; newServerName = ''; newServerContent = &apos ...

Implementing real-time search functionality using API calls in Angular

Seeking guidance on implementing Typeahead for a global search feature in my app. When users type, it should call an API and display results in a drop-down menu. I am a beginner in Angular and Typescript, so any working examples with code would be greatly ...

Sending information from Angular (Version 5) to the database of an API using an interface

Currently, I am working on creating a CRUD operation using Angular (v 5) within a Node.js application. I have successfully managed to retrieve data in my view, but I am encountering an issue with the post script in Angular. View the file structure of the ...

Implementing a post method in Angular without a request body

I've been attempting to send a JSON request and handle the response, but I keep encountering these errors: zone-evergreen.js:2952 OPTIONS http://'api':10050/api/content/Delivery net::ERR_EMPTY_RESPONSE core.js:6014 ERROR HttpErrorResponse ...

"Optimize the appearance of group headers and items in Angular select style

I have integrated the ng-select library into my Angular project to create a dropdown menu. Here is an example of how I am using it: <ng-select [items]="flattenedSelectList" bindLabel="displayName" placeholder="Select speci ...

Enhancing TypeScript - Managing Variables within Namespace/Scope

Why is the console.log inside the function correctly logging the object, but after the function returns it logs undefined, failing to update the variable? In addition, when using this within testNameSpace, it returns window. Why is that? namespace testNa ...

Tips for registering a provider in Angular 2 using dynamic data during runtime

Previously in Beta, I was able to achieve the following: export class AppBootstrapper { constructor(mySettings: AppSettings) { bootstrap(App, [ provide(AppSettings, { useFactory: () => mySettings }) ] } ...

There was an unexpected error: Module 'restore-cursor' not found

Has anyone else encountered this specific problem with Angular 11 while using ng serve? The issue stems from the following stack trace: C:\Users\x\Desktop\codebase\app\node_modules\cli-cursor\index.js C:\User ...

Is there a way to prevent IntelliJ from creating .js files when working with .ts source code?

Working on a mixed Java/Typescript project with Maven as the build tool, I utilize the frontend-maven-plugin to successfully build from the command line. However, I am encountering an issue with IntelliJ 2018.2 where it keeps transpiling .js files for my . ...

Guide on integrating Mapbox GL Draw into an Angular 8 project

I'm currently working on an Angular 8 project that utilizes Webpack. My integration of Mapbox GL JS was successful, however, I am facing issues with importing Mabox GL Draw. Here are the versions I am using: "@angular/core": "8.2.14", "mapbox-gl": "^ ...

Guide to sending jQuery data back to main class in TypeScript

Hi everyone, I'm diving into the world of typescript and JQuery. I have a simple question. In my typescript class called DatePicker, I am calling a function. Here's a snippet of the code: Class DatePicker { private pickerData; public update( ...

What could be causing the React text input to constantly lose focus with every keystroke?

In my React project using Material-UI library, I have a component called GuestSignup with various input fields. const GuestSignup = (props: GuestSignupProps) => { // Component code goes here } The component receives input props defined by an ...

Creating a distinct input for each row in a table using Angular 2

I am encountering an issue with inputs being created for each row in my PrimeNG/datatable. The problem arises from the local variable #itsmIncident, which causes confusion when trying to pass values to the "Save" button as there are multiple rows involve ...

ngsw-worker.js is not integrated with Angular Universal

Our implementation of PWA (@angular/service-worker) is functioning properly in prod mode, but we are encountering an issue in dev mode where the file "ngsw-worker.js" is not being generated. Despite adjusting the registration to enable it on all environmen ...

"Angular application experiencing navigation blockage due to multiple concurrent HTTP requests using RxJS - Implementation of priority-based cancel queue

I've come across similar threads, but I have yet to find a suitable solution for my specific issue. Situation: Currently, I'm navigating on both the server side and client side simultaneously. This entails that every frontend navigation using ro ...

Include asterisk symbol at the end of a web address following a designated keyword

I currently have a URL structured in the following way: https://localhost:8080/user/login But, there is an option to manually add query parameters which could result in a URL like this. https://localhost:8080/user/login?ten=123456 This leads me to seek ...

Blob is unable to open the PDF file as it is not

Currently, I am utilizing ASP.NET Core and Angular to create a web application. In one of the controller actions, I am returning a File like this: return Ok(Microsoft.AspNetCore.Mvc.File(await GetFileContents(args), "application/pdf")); Then in TypeScript ...

Developing cross-platform libraries for Desktop, Web, and Mobile Applications using Electron.JS, Angular, and NativeScript

Looking for advice on creating separate libraries for models (Reusable Libraries)? Let's say I need to create web, desktop, and mobile apps. In all these projects, I need models and services files to interact with my API. I want to have the same mod ...

I need assistance with the following issue: the type 'Observable<ArrayBuffer>' cannot be assigned to the type 'Observable<User[]>. Can anyone provide a solution for this problem?

Encountered an issue with the error message: Type 'Observable' cannot be assigned to type 'Observable<User[]>' while working on setting up Angular service.ts for implementing HTTP requests. ...