Displaying the array on the HTML page using Angular

Question

Displaying the array on the HTML page using Angular

I'm finding it challenging to implement this in Angular. I have this mapped item:

currentSuper?: any[];

this.currentSuper = response.builder?.superintendents?.filter((x) => x.id === 
this.builderSuperintendentId);

The output of response.builder.superindentents is:

 [0:{id:'', firstName: '', lastName:''}, 
  1:{ id: '', firstName:'', lastName:''}]

The issue here is the index number affecting currentSuper, making it look like this:

 [0:{id:'', firstName: '', lastName:''}]


<span class="text-secondary">Superintendent:</span><span class="mx-2">{{ 
order.value.currentSuper?.firstName }} {{ order.value.currentSuper?.lastName }}</span>

Currently, firstName is null and trying order.value.current[0].firstName doesn't work either. How can I ensure that this data renders correctly?

angular typescript ngrx

Answer 1

Answer №1

Since it retrieves an array, you will have to select an item from the list or display all the filtered items.

Here are some examples that utilize itemList as an array of items:

Select a specific item (not recommended) by its index:

<div>
  {{itemList[0].id}}
</div>

Display all items using ngFor:

<div *ngFor="let item of itemList">
  {{item.id}}
</div>

Alternatively, you can use find instead of filter to return an object rather than a filtered array. This may be more suitable for your needs

this.currentSuper = response.builder?.superintendents?.find((x) => x.id === 
this.builderSuperintendentId);

In the HTML, simply display the currentSuper:

<div>{{ currentSuper?.id }}</div>

Answer 2

Since it retrieves an array, you will have to select an item from the list or display all the filtered items.

Here are some examples that utilize itemList as an array of items:

Select a specific item (not recommended) by its index:

<div>
  {{itemList[0].id}}
</div>

Display all items using ngFor:

<div *ngFor="let item of itemList">
  {{item.id}}
</div>

Alternatively, you can use find instead of filter to return an object rather than a filtered array. This may be more suitable for your needs

this.currentSuper = response.builder?.superintendents?.find((x) => x.id === 
this.builderSuperintendentId);

In the HTML, simply display the currentSuper:

<div>{{ currentSuper?.id }}</div>

Displaying the array on the HTML page using Angular

Answer №1

Similar questions

The Vercel public domain is not functioning as expected

Tips for integrating Pico CSS into the overall scss stylesheet of your Angular project

Error: Component fails to compile when imported via a module in TestBed

What is the method to determine the length of a string with TypeScript?

Allow users to zoom in and out on a specific section of the website similar to how it works on Google Maps

Can you enforce function signatures on an existing library like rxjs using TypeScript?

What is the process for finding GitHub users with a specific string in their name by utilizing the GitHub API

Looking for assistance in crafting a test case for the .subscribe method in Angular

Angular2 and the Use of Environment Variables

Strategies for retaining a list of chosen localStorage values in Angular6 even after a page refresh

The name 'console' could not be located

I can't find my unit test in the Test Explorer

"Encountering a 404 (Not Found) error when attempting to access local backend APIs through Angular

Tips for setting or patching multiple values in an ngselect within a reactive form

Exploring the process of dynamically incorporating headers into requests within react-admin

Combining Angular 2 RC with Play Framework 2 for seamless integration

What is the process for generating an array of objects using two separate arrays?

Mean value calculated for each hour within a given array

Starting point for Angular 2 app setup

The functionality of Angular 2 md-radio buttons in reactive forms seems to be hindering the display of md-inputs