2017-03-23 6 views
1

深く入れ子になったjsonオブジェクトから値を取得しようとしています。angg2で深く入れ子になったjson値を求める方法

私はパイプを使ってみましたが、私はキーと値を得ることに成功しましたが、それらは私が得ようとしている正しいキーと値ではありません。

誰でも、私が下に書いた値をどのようにngにするのを手伝ってもらえますか?

data: { 
category:[ 
{0:{one:'test1', **two**:'test2'}}, 
{1:{one:'test3', **two**:'test4'}}, 
{2:{one:'test5', **two**:'test6'}} 
] 
number:[] 
] 
} 

私は「2つの値」を求めています。あなたが期待するように私は現在、パイプ

import { Pipe, PipeTransform } from '@angular/core'; 

`@Pipe({name: 'keys'}) 
export class KeysPipe implements PipeTransform { 
    transform(value, args:string[]) : any { 
    let keys = []; 
    for (let key in value) { 
     keys.push({key: key, value: value[key]}); 
    } 
    return keys; 
    } 
} 

と私のコンポーネントテンプレートで、私は

<div *ngFor="let one of theme | keys"> 
    <div *ngFor = " let two of one.key | keys"> 
    <div *ngFor = "let three of two.key> 
     <p id="thm-title">{{three.value['two']}}</p> 
    </div> 
    </div> 
</div> 
+0

あなたがLodashを使用することができます。 http://stackoverflow.com/a/41453175/2589202 – paqogomez

答えて

2

あなたのパイプ作品を持っている、あなたは自分の*ngForにいくつかの変更を加える必要が

ループ

あなたの質問に配列とオブジェクトが混在しているので、データが以下のように構成されていると仮定しています。このループが出力さtest2test4test6

data = { 
    category: [ 
     { 0: { one: 'test1', two: 'test2' } }, 
     { 1: { one: 'test3', two: 'test4' } }, 
     { 2: { one: 'test5', two: 'test6' } } 
    ] 
} 

HTML

<div *ngFor="let one of data | keys"> 
    <div *ngFor="let two of one.value"> 
     <div *ngFor="let three of two | keys"> 
      {{ three.value['two'] }} 
     </div> 
    </div> 
</div> 
関連する問題