L08084のブログ

技術記事の執筆は祈りに似ている

【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]と表示されてしまいます。

f:id:l08084:20191012153835p:plain
オブジェクトの中身が表示されない

  • JsonPipeを使った場合

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

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

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

f:id:l08084:20191012154422p:plain
オブジェクトの中身が表示される

バージョン情報

  • Angular v7.2.0