ang 4ネストされたjsonをフェッチする

Question

ネストされたjsonにはどうやってアクセスできますか？私は次のファイルを持っています：

{ 
    "user1": { 
     "name": "john", 
     "surname": "johnsson" 
    }, 
    "user2": { 
     "name": "Jacob", 
     "surname": "Jacobsson" 
    } 
} 

などです。私はこのJSONデータからフィールド名と姓のテーブルを作成する必要があります。これどうやってするの？私は、次のコードを書いた： users.service.ts

export class UsersService { 
    private _url: string = '../assets/users.json'; 

    constructor(private _http: Http) { 
    } 

    getUsers() { 
     return this._http.get(this._url).map((response: Response) => 
      response.json()); 
    } 
} 

とusers.component

export class UsersComponent implements OnInit { 
    users = []; 

    constructor(private _usersService: UsersService) { 
    } 

    ngOnInit() { 
     this._usersService.getUsers().subscribe(resUsersData => this.users = resUsersData); 
     console.log(this.users); 
    } 
} 

その後、私はちょうどusers.component.htmlで{{users}}を使用して、私の結果を見てみたいが、私は見ますちょうど[object Object]。だから私は明らかに何かにアクセスしてエラーを得ることはできません。

Answer 1

最初の事はあなたのJSONデータファイルフラット化でアクセスすることができ

Answer 2

あなたの応答はオブジェクト、NOTの配列です。応答を配列に変換する必要がありますし、*ngForをhtmlテーブルに使用することができます。

Object.keysを使用してキーを反復することができます。配列を返すには、.map()を使用します。

ngOnInit() { 
    this._usersService.getUsers().subscribe(
     resUsersData => 
      //resUsersData is an Object, not an array. Transform it. 
      this.users = Object.keys(resUsersData).map(key => resUsersData[key]) 
    ); 
    console.log(this.users); 
} 

今すぐあなたのテーブルにあなたの*ngForで{{users}}を使用することができます。

Answer 3

your data format should be 

    { 
    "user": [{ 
     "name": "john", 
     "surname": "johnsson" 
    },{ 
     "name":"aish", 
     "surname":"johnshon" 
     }] 
} 

、あなたは、あなたがあなたがやりたい

Answer 4

{ 
    "users": [{ 
     "name": "john", 
     "surname": "johnsson" 
    },{ 
      "name": "Jacob", 
     "surname": "Jacobsson" 
     }], 
} 

すべての結果にアクセスするためのforeachを使用することができます。

[{ 
    "name": "John", 
    "surname": "Johnsson" 
}, { 
    "name": "Jacob", 
    "surname": "Jacobsson" 
}] 

を

ファイルにはusers.jsonという名前が付けられているので、ユーザーオブジェクトの配列これは、ファイル（user1、user2）にそのレベルの階層をもう一度持ち歩く必要がないことを意味します。実際には、それを得るのが難しくなります。 usersファイルは、それぞれがnameとsurnameのプロパティを持つ単一レベルのオブジェクト配列である必要があります。

JSONブロック全体が配列[{}]としてラップされていることにも注意してください。

第二に、あなたのサービス：

export class UsersService { 
    private _url: string = '../assets/users.json'; 

    constructor(private _http: Http) { 
    } 

    getUsers(): Observable<Response> { 
     return this._http.get(this._url) 
       .map(response => response.json()) 
    } 
} 

私はタイプが期待されているどのようなコードを読むとき、それはそれが明確になるように私は、私ができることはすべてを入力することを確認し、IDEがあなたのための型の不一致をキャッチすることができ、デバッグを容易にします。

次にコンポーネント：

export class UsersComponent implements OnInit { 
users: any; 

constructor(private _usersService: UsersService) { 
} 

    ngOnInit() { 
     this._usersService.getUsers() 
      .subscribe(response => { 
       this.users = response; 
       console.log('Returned Users:', this.users); 
     }); 
    } 

サービスがデータを解決した、とあなたは「未定義」を得るよ前にサブスクリプションの外console.log this.users、その後、コンソール声明はさらに、実行されますデータは戻ってきましたが、ログアウトした後で変数に割り当てられました。定期購読の場合、常に.subscribeブロック内のデータをログアウトしてください。あなたが持っているべきか今

は、名前と姓プロパティを持つ2つのユーザオブジェクト、それぞれの配列が含まthis.usersで、あなたはあなたがすることはできません*ngFor

<ul> 
    <li *ngFor="let user of users">{{user.name}}, {{user.surname}}</li> 
    </ul>