I've been working on a code that parses JSON data and populates a table using ngFor.
Here's an example of what the output looks like:
https://i.sstatic.net/xDlOa.jpg
So far, I've successfully listed the data in the table.
But now, I'm wondering how to extract and display a single piece of data based on a specific ID.
For instance, if I want to retrieve the name corresponding to id=3, it should be "Edward".
I'm stuck on this, and I need some guidance or assistance. Can anyone help me out?
Thank you.
app-components.ts
import { Component } from '@angular/core';
import {Http, Response} from '@angular/http';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
private data;
constructor(private http:Http){
}
ngOnInit(){
this.getData();
}
getData(){
this.http.get('/localhost/data.json')
.subscribe(res => this.data = res.json());
}
}
app-component.html
<table>
<tr>
<th>#</th>
<th>Name</th>
<th>Amount</th>
</tr>
<tr *ngFor="let info of data">
<td>{{info.id}}</td>
<td>{{info.name}}</td>
<td>{{info.amount}}</td>
</tr>
</table>
data.json
[
{
"id":"1",
"name":"John",
"amount":"112"
},
{
"id":"2",
"name":"Maria",
"amount":"44"
},
{
"id":"3",
"name":"Edward",
"amount":"40"
}
]
Please let me know if the information provided is adequate.