How to get .json objects by id in Angular 2? - html

Question

I'm trying to get objects by id from a JSON file after selecting an item from my drop-down list. So far I have managed to retrieve all the objects from JSON but not by ID.
Typescript
showInfo() {
var selected = this.diadikasies.filter(x=> x.content);
console.log (selected);
}
HTML
<div *ngIf="diadikasies && diadikasies.length > 0" class="form-group">
<label for="diadikasies">
<i class="fas fa-clipboard-list" aria-hidden="true"></i> Please Select: </label>
<select #proc (change)="showInfo()">
<option [ngValue]="undefined" disabled selected>Επιλέξτε Διαδικασία</option>
<option *ngFor="let diad of diadikasies" [value]="diad.id">{{ diad.title.rendered }}</option>
</select>
</div>
Thanks in advance.

Answer 1

You can do with find() method like below
TS file
import { Component } from '#angular/core';
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
name = 'Angular';
description;
opts = [{
id: 1,
name: 'Test 1',
description: 'This is Test 1 description'
}, {
id: 2,
name: 'Test 2',
description: 'This is Test 2 description'
}];
showInfo(value) {
let selectedOpt = this.opts.find(opt => opt.id == value);
this.description = selectedOpt.description;
}
}
In the template file
<div *ngIf="opts && opts.length > 0" class="form-group">
<label for="opts">
<i class="fas fa-clipboard-list" aria-hidden="true"></i> Please Select: </label>
<select #proc (change)="showInfo(proc.value)">
<option [ngValue]="undefined" disabled selected>Επιλέξτε Διαδικασία</option>
<option *ngFor="let diad of opts" [value]="diad.id">{{ diad.name }}</option>
</select>
</div>
<div>{{ description }}</div>
You can find the working example from here Stackblitz

Answer 2

You can use ngModel and ngModelChange together to get the selected value
<select #proc [(ngModel)]="selectedObj" (ngModelChange)="showInfo()">
and inside showInfo method,
var selected = this.diadikasies.filter(x=> x.id == this.selectedObj.id);