URLが

Question

AmのネストされたJson値を、angle2を使用して取得します。私は名前に基づいて、このJSONデータにアクセスする必要が

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

：私のようなネストされたJSONを持っています。名前は

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

のように、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}); 
 
     
 
    }

私がしたいURLからデータを取得しています

を含む表を表示する

<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>

どのように私はそこに特定のdetails..Is任意の可能な解決策を表示することができます。??事前に おかげ

Answer 1

これを試してみてください：

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

は、あなたがして、「結果」プロパティを反復処理する.TYPE [0から各エントリ.nameの、その後.test1と.test2のために印刷することができます]（typeプロパティは配列なので）。

更新：テンプレート内の一部の要素のみを表示する場合は、コンポーネント内の配列をフィルタ処理することができます（この例では、「白い名前」は「aa」に等しい）。

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