Fetch the JSON data with parameter in angular2

[Vinu Prasad]

hiii... 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",
      }
    ]
  }
    .....]

the parameter retrieved successfully by ,

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});
 }

all the data from the json1 is available in result . 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 ..?


I tried but not work .

this.a= this.result.map(item=>item.Name['name']); // name is the parameter received

and also try to display in table like 
<tr *ngFor = "let d of result['{{name}}']">
        <td>{{name}}</td><td>{{d.test1}}</td><td>{{d.test2}}</td></tr>

please help .....!

[Sander Elias]

Hi Vinu,

don't subscribe in the components class, but prefer the async pipe, as it is much clearer what is going on.

try something like:

import { Component, OnInit } from '@angular/core';

import { ActivatedRoute } from '@angular/router';

import { Http } from '@angular/http';

import 'rxjs/add/operator/mergeMap';

import 'rxjs/add/operator/publishReplay';

@Component({

selector: 'selector-name',

template: `

<tr *ngFor = "let d of viewData$|async">

<td>{{d.name}}</td><td>{{d.type.test1}}</td><td>{{d.type.test2}}</td>

</tr>

`

})

export class NameComponent implements OnInit {

baseData$ = this.http

.get('http://192.168.0.101:8000/json1')

.map(response => response.json())

.publishReplay(1); // This operator "buffers" the result in memory

currentId$ = this.route.params.map(params => params['id']);

viewData$ = this.currentId$.mergeMap(id =>

this.baseData$.map(data => data.filter(row => row.name === id))

);

constructor(private http: Http, private route: ActivatedRoute) {}

ngOnInit() {}

}

Regards

Sander

[Vinu Prasad]

thanks@Sander.  It is perfectly working

--
You received this message because you are subscribed to a topic in the Google Groups "Angular and AngularJS discussion" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/iKR1SRJkPH0/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+unsubscribe@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

--

Vinu Prasad