reading an array of objects using typescript

Trying to retrieve an object from an array called pVal. pVal is the array that includes objects. I am attempting to obtain the value of "group" based on the id provided. For instance, if the id is equal to 1, it should display "VKC". Any assistance would be greatly appreciated.

Here is the code I have experimented with:

this.arr = userData; // -> json
this.pId = this.arr.pId; // could be 1, 2, or 3 

pVal: Array<Object> = [{id:1, group:'VKC'},
{id:2, group:'ABC'}, 
{id:10, group:'DEF'},
{id:3, group:'GHI'},
{id:5, group:'JKL'},]

alert(this.pVal['1'].group);
this.pInd = this.pVal[this.pId].group;

Answer №1

When the identification number is 1, it will show "VKC"

The criteria for what should be shown is already included in the object. If you only wish to show id 1, you can achieve it using this code snippet:

for(let item of this.pVal){
   if(item.id === 1)
      alert(item.group);
}

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 resolve the angular error "Encountering an unhandled exception: Unable to locate module 'typescript' "?

I'm encountering errors when running ng serve. I've attempted the following code as well, but I'm still facing the same error: npm install -g typescript https://i.sstatic.net/Gyi71.png Error displayed in text format D:\xampp\htd ...

How to utilize FileReader for parsing a JSON document?

I'm currently facing an issue while attempting to read and copy a JSON file uploaded by the user into an array. When using .readAsText(), the returned data includes string formatting elements like \" and \n. Is there a way to utilize FileRe ...

Using Angular to transmit data to a transcluded component

Is it possible to have a video-uploader component where users can upload one or multiple videos, with the ability to choose from three different view options: Seperate - In progress videos and uploaded videos are displayed in separate tables. Combine ...

The error `npm run server` is not able to recognize the command '.' as an internal or external command

While working on my project from github https://github.com/angular-university/reactive-angular-course, I encountered an issue. Even though I have all the latest dependencies and am running on Windows, I am facing this problem. Interestingly, it works fin ...

Ways to initiate a language shift in the **JavaScript yearly calendar** when the language is modified in an Angular application

1. I have incorporated ngx-translate into my Angular application for translation purposes. 2. I have successfully implemented the ability to switch languages during initialization by specifying options like {language:'ja'} for Japanese within th ...

Angular universal issue: 404 error code failing to function properly

After numerous attempts, I find myself at a dead end. Our Angular 11 website requires Universal for SEO purposes, and we have set up a 404 page to redirect when necessary. The issue arises when the redirect returns a status code of 200 instead of 404. To ...

What methods can be used to test included content in Angular?

When testing an Angular component that includes transclusion slots utilizing <ng-content>, it becomes challenging to verify if the transcluded content is correctly placed within the component. For instance: // base-button.component.ts @Component({ ...

What steps can be taken to avoid an abundance of JS event handlers in React?

Issue A problem arises when an application needs to determine the inner size of the window. The recommended React pattern involves registering an event listener using a one-time effect hook. Despite appearing to add the event listener only once, multiple ...

The RxDB Angular2-cli error message. "Cannot assign a 'Promise<void>' to a 'Promise<any>' parameter."

https://i.sstatic.net/50vu6.png I've been grappling with getting RxDB to function properly in a fresh project I initiated using the Angular CLI. Here's my process: ng new <Projectname> After that, I installed RxDB by running: npm instal ...

Oops! An issue occurred during the `ng build` command, indicating a ReferenceError with the message "Buffer is not defined

I'm facing an issue while trying to utilize Buffer in my angular component ts for encoding the Authorization string. Even after attempting npm i @types/node and adding "node" to types field in tsconfig.json, it still doesn't compile with ng buil ...

Warning: Unresolved promise: NullInjectorError encountered: StaticInjectorError(AppModule) when trying to use FormBuilder

I encountered an error in my Angular app when adding routes in gifts-routing.module.ts. The error disappears when I remove the routes, but I still need to implement routing. How can I resolve this issue? ERROR Error: Uncaught (in promise): NullInjectorErr ...

Issues arise when attempting to store data into an array with the assistance of FileReader

I am currently working on an Angular4 project where I am facing an issue with saving Blob data returned from my API call to an array of pictures in base64 format. This is so that I can later display the images using *ngFor. Here is the API call I am makin ...

"Discover the step-by-step process of building a vue.js3 application with typescript, vue-router, and vuex without relying on

I have been assigned the task of developing a Vue3 application with TypeScript support using Vuex for state management and vue-router for basic routing. However, I am not allowed to use vue-cli for this project. Here is my current code: <head> & ...

Utilizing ng-container for nested conditions in *ngIf statements

I have a project where I need to display rows based on specific conditions. There is a table cell (td) that needs to be populated according to certain criteria. I am looking to achieve this functionality in Angular using *ngIf if(value1||values2) { if( ...

The argument represented by 'T' does not align with the parameter represented by 'number' and therefore cannot be assigned

I am confused as to why, in my situation, <T> is considered a number but cannot be assigned to a parameter of type number. Changing the type of n to either number or any resolves the issue. Error: https://i.sstatic.net/h1GE9.png Code: const dropF ...

`Is there a way to effectively test an @Input component in Angular?`

Despite multiple successful attempts in the past, I am facing some difficulty getting this to function properly. Within my component, I have an input @Input data: Data, which is used in my template to conditionally display certain content. Oddly enough, du ...

Employing 'as' in a similar manner to *ngIf

Utilizing the *ngIf directive, one can simplify code by assigning a property from an observable using syntax like *ngIf = (value$ | async).property as prop . This allows for the use of prop throughout the code without repeated references to (value$ | async ...

When the route is changed, the system must execute a function to verify the authenticity of the token

When routing changes in Angular, I have a requirement to execute a function based on whether a valid token is set or not. Is there anyone who can assist me in achieving this task? In Angular 1, I used to accomplish this using $on. ...

How to Hide Parent Items in Angular 2 Using *ngFor

I am dealing with a data structure where each parent has multiple child items. I am trying to hide duplicate parent items, but accidentally ended up hiding all duplicated records instead. I followed a tutorial, but now I need help fixing this issue. I only ...

Is it feasible to select which modules to be loaded into the application?

Looking for a solution to my problem outlined in the title. For example, I am tasked with creating two separate versions of an app - one for France and one for the UK. In some areas, they require completely different implementations. Is it feasible to sw ...