AngularのHttpClientでネストされたJSONオブジェクトを読み込む

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に合わせたクラスの入れ子を作るというのがミソでした。