Fetch the nested Json value with Url

Question

Am using angular2. I have a nested Json like :

[
  {
    "Name": "aa",
    "vallue": 11,
    "type": [
      {
        "test1": "value1",
        "test2": "value2",
      }
    ]
  },
  {
    "Name": "bb",
    "vallue": 22,
    "type": [
      {
        "test1": "value1",
        "test2": "value2",
      }
    ]
  }
    .....]

I have to access this Json data based on the Name. The name is retrieved successfully from the URL , like

    this.route.params.subscribe( params => {
          this.name= params['id'];

and in the constructor of my component get data from url

constructor(private http : Http ,private route: ActivatedRoute){
      this.http.get('http://192.168.0.101:8000/json1')
      .map(response => response.json())
      .subscribe(data =>{ this.result = data});
        
    }

I want to display the table which contains

<table border="1" cellspacing="10" cellpadding="10" width="500">
    <tr><th>NAME</th><th>Type</th><th>prefix</th><th>rate</th></tr>
    <tr *ngFor = "let d of result['{{name}}']">
        <td>{{name}}</td><td>{{d.test1}}</td><td>{{d.test2}}</td></tr>
</table>

how can I display the specific details..Is there any possible solution .?? thanks in advance

Christian Benseler · Accepted Answer · 2017-11-01 09:43:25Z

2

Try this:

<tr *ngFor = "let item of result">
    <td>{{item.Name}}</td><td>{{item.type[0].test1}}</td><td>{{item.type[0].test2}}</td>
</tr>

you can iterate over the 'result' property, then print for each entry the .Name, and then the .test1 and .test2 from .type[0] (because type property is an array).

UPDATE: if you want to show only some elements in the template, one option is to filter the array in the component (in the example, return only the those white Name equals 'aa').

this.result = data.filter( item => item.Name === 'aa')

edited Nov 1, 2017 at 9:43

answered Oct 31, 2017 at 12:02

Christian Benseler

8,0839 gold badges42 silver badges73 bronze badges

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

2 Comments

vinu prasad Over a year ago

thanks@Christian . But I didn't want to display all the json data. If the parameter is " aa " , then display the "test1" and "test2" data of "aa"... Is there any possible solution ..?

Christian Benseler Over a year ago

The best way is to do this is in the component and not in the template. In the component you can filter the array and in the template, show it. I'll update the answer. Or you can use a custom pipe.

Collectives™ on Stack Overflow

Fetch the nested Json value with Url

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related