How to display an array item's attribute based on an incoming value from restapi?

Question

In an input form, I am showing a list of textual values in drop down and storing an index value of the user selected item in the back end table.

For example, I have an array like this. In the input form, I am showing the name attribute in the dropdown, but storing value attribute in the table.

NEIGHBOURHOOD_TYPES = [
    {value: 1, name: 'School'},
    {value: 2, name: 'College'},
    {value: 3, name: 'Hospital'}
];

In a display screen of that same data, I am fetching the records from table and i am getting value 1,2,3, etc. I want to show its corresponding name attribute in a simple <td> element.

 <table mat-table [dataSource]="dataSource" matSort>

    <!-- Type Column -->
    <ng-container matColumnDef="type">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> Type </th>
      <td mat-cell *matCellDef="let row"> {{row.neighbourhoodType}} </td>
    </ng-container>

showing 1,2,etc. But I want it to show its corresponding name attribute.

what is the simplest and best option to do it?

Refer the screen shot of the usage screen

(sorry for this naive question, but I am new to angular.).

Dharman · Accepted Answer · 2020-08-30 13:36:58Z

0

Use *ngFor attribute.

<table>
    <tr *ngFor="let item of NEIGHBOURHOOD_TYPES">
        <td>{{item.value}} +' : '+{{item.name}}</td>
    </tr>
</table>

edited Aug 30, 2020 at 13:36

Dharman♦

33.9k27 gold badges106 silver badges157 bronze badges

answered Aug 30, 2020 at 13:31

Sudeep Shrestha

1282 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jeyakumar Over a year ago

I do not want to show all values of that array, rather want to show only the item that user has saved in the backed table. (please refer my updated edit and screenshot and code snippet)

Jeyakumar · Accepted Answer · 2020-08-30 15:58:27Z

0

Got an answer from these two threads.

https://stackoverflow.com/questions/42580100/typescript-take-object-out-of-array-based-on-attribute-value

Call TypeScript function in HTML without a click event

    <ng-container matColumnDef="type">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> Type </th>
      <td mat-cell *matCellDef="let row"> {{getNeighbourhoodTypeName(row.neighbourhoodType)}} </td>
    </ng-container>

Had a write a tiny function in the ts file

  getNeighbourhoodTypeName(val):string {
    return this.NEIGHBOURHOOD_TYPES.find(nType => nType.value === val).name;
  }

Thanks.

answered Aug 30, 2020 at 15:58

Jeyakumar

251 silver badge5 bronze badges

Collectives™ on Stack Overflow

How to display an array item's attribute based on an incoming value from restapi?

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related