AngularのHttpClientでネストされたJSONオブジェクトを読み込むには、オブジェクトごとにクラスを作成します。
APIが以下のようなJSONを返す場合。(Amazonの商品検索API風です)
{ Item:[ { ASIN:'AAAAAA', DetailPageURL:'http://hogehoge/', ItemAttributes:{ Title:'タイトル1' } }, { ASIN:'BBBBBB', DetailPageURL:'http://fugafuga/', ItemAttributes:{ Title:'タイトル2' } }, { ASIN:'CCCCCC', DetailPageURL:'http://piyopiyo/', ItemAttributes:{ Title:'タイトル3' } }, … ] }
JSONの構造に合わせて以下のようなクラスを作ります。
export class AmazonSearchResult{ Item:AmazonItem[]; } export class AmazonItem { ASIN:string; DetailPageURL:string; ItemAttributes:AmazonItemAttributes; } export class AmazonItemAttributes { Title:string; }
APIと通信するサービスクラスを作り、HttpClient.get()メソッドのレスポンスを作成した型にマッピングします。
(前略) private apiUrl = 'https://hogehoge.app/search'; search(keyword: string): Observable<AmazonSearchResult> { return this.http.get<AmazonSearchResult>(`${this.apiUrl}?keyword=${keyword}`); }
コンポーネント等でsubscribeして、必要な値を取り出すなどして使います。
search(keyword: string): void { this.amazonSearchService.search(keyword) .subscribe(amazonResult => { this.items = amazonResult.Item; } ); }
JSONに合わせたクラスの入れ子を作るというのがミソでした。