【Angular/MongoDB】ネストが深いオブジェクトの表示 - 大田区から発信するゆるゆる日記

※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。

【目次】

背景
深いネストにあるオブジェクトを表示させる
今後に向けて
参考

背景

前回記事の応用編です。

【Angular/TypeScript/MongoDB】オブジェクトデータの表示【［object Object］】 - 大田区から発信するゆるゆる日記

オブジェクトを表示させようとすると、[object Object]が表示されるときの対処方法を書きます。

今回はネストが深い場合のオブジェクトを表示させます。

分かりやすいように細かくコードを書いたので、少し不格好なコードであることはご了承ください。

深いネストにあるオブジェクトを表示させる

前提条件

今回は下記のデータをAngularのcomponent.htmlを使って表示させたいと思います。

  data = {
    "data1": [
      {
        "id": "1",
        "name": "Taro",
      },
      {
        "id": "2",
        "name": "Hanako",
      }],
    "data2": [
      {
        "id": "5",
        "food": "Tomato",
      },
      {
        "id": "6",
        "food": "Fish",
      }]
    };

1.Keyを指定(objectName.propertyName)

あるデータのみを表示させたい時に有効です。

プロパティ名(Key)を取得することができません。

例

{{ data['data1'][0]['name'] }} // ブラケット表記法
or
{{ data.data1[1].name }} // ドット表記法

結果

{{ data['data1'][0]['name'] }} // ブラケット表記法
or
{{ data.data1[1].name }}// ドット表記法

2.Object.keysメソッド(Angular6以下)

Object.keys() - JavaScript | MDN

このメソッドはオブジェクトデータのプロパティ名(Key)を配列にして返してくれます。つまり、プロパティ名だけの配列を生成してくれます。

Object.keysメソッドを使うには、Object.keysメソッドを一度変数に入れる必要があります。引数にメソッドを入れることもできます。

今回はcomponent.tsでメソッドを作らずに、オブジェクトを表示させています。

メソッドを作って、ngForやObject.Keysの引数に入れることができれば、html側で下記の例ほどngForをまわす必要はなくなります。

注意点として、ngForはオブジェクトをまわすことができません。なので、下記の例のようにobjectKeysを上手く使って配列をまわすようにしましょう。

例

component.ts

export class AppComponent {
public objectKeys = Object.keys;
}

component.html

<ng-container *ngFor="let dataKey of objectKeys(data)">
<ng-container *ngFor="let nestData of data[dataKey]">
<ng-container *ngFor="let lastNestKey of objectKeys(nestData)">
{{ key }}:{{ a[key] }}
</ng-container><br>
</ng-container><br>
</ng-container><br>

結果

id:1 name:Taro
id:2 name:Hanako

id:5 food:Tomato
id:6 food:Fish

合わせて、Object.valuesメソッドも覚えているといいかもです。

Object.values() - JavaScript | MDN

使用頻度が多そうなら、パイプ化してしまうのもいいかと思います。

(弊社ではそうしています)

3.KeyValuePipe(Angular6.1以降)

Angular

Angular6.1以降から登場したパイプです。

CommonModuleのインポートが必要です。

プロパティ名を「key」と「value」とする配列を作り、それをオブジェクトにして返します。プロパティ値には引数のプロパティ名(Key)とプロパティ値(Value)が入ります。

参考資料：【Angular/MongoDB/エラー】オブジェクトデータの表示 - 大田区から発信するゆるゆる日記

例

module.ts

import { CommonModule } from '@angular/common';

・・・

imports: [ ・・・, CommonModule,・・・ ],

・・・

component.html

<ng-container *ngFor="let dataKeyValue of data | keyvalue">
<ng-container *ngFor="let nestKeyValue of dataKeyValue.value | keyvalue">
<ng-container *ngFor="let lastKeyValue of nestKeyValue.value | keyvalue">
{{ lastKeyValue.key }}:{{ lastKeyValue .value }}
</ng-container><br>
</ng-container>
</ng-container>

結果

id:1 name:Taro
id:2 name:Hanako
food:Tomato id:5
food:Fish id:6

やっぱり表示の順番が変わる・・・