【Angular】オブジェクトの中身を表示する JSON パイプ

「TypeScript(Angular)でオブジェクトの中身を画面に表示したいのに[object Object]って表示される。どうしたらいい？」みたいな質問を仕事中に受けたのでメモ。

オブジェクトをJSON文字列に変換する

質問を受けた時は、JavaScriptのメソッドであるJSON.stringifyを使ってオブジェクトをJSON文字列に変換すると表示できますよーみたいに回答したんですが、後から調べたら、オブジェクトをJSON文字列にして表示するJsonPipeというのがAngularにあるとのこと。

試してみます

• JsonPipeを使わない場合

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
  // 中身を表示したいオブジェクト
  public member = {
    id: 1,
    name: '大久保綾乃',
    age: 35,
    job: '小学校の教師'
  };

  constructor() {}

  ngOnInit() {
  }
}

<div>{{ member}}</div>

上記の実装で画面を表示すると、オブジェクトの中身は表示されず[object Object]と表示されてしまいます。

オブジェクトの中身が表示されない

• JsonPipeを使った場合

特に事前準備は必要なく、テンプレート上で[中身を表示したい object ] | pipeと記載してあげるだけでOKです。

<div>{{ member | json }}</div>

このようにJSONパイプを使ってあげると、オブジェクトの中身が表示されます。

オブジェクトの中身が表示される

バージョン情報

• Angular v7.2.0