Deep Insider の Tutor コーナー
>>  Deep Insider は本サイトからスピンオフした姉妹サイトです。よろしく! 
AngularJS TIPS

AngularJS TIPS

JavaScriptオブジェクトをJSON形式に変換するには?(json)

2015年9月7日

jsonフィルターを使って、JavaScriptオブジェクトをJSON形式に変換する方法を説明する。

  • このエントリーをはてなブックマークに追加

 jsonフィルターを利用することで、JavaScriptのオブジェクトをJSON(JavaScript Object Notation)形式に変換できます。主に、デバッグ用途で変数の中身を確認したいような状況で利用します。

 以下は、$scope変数objの内容を、jsonフィルターで変換した例です。

HTML
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8" />
<title>AngularJS TIPS</title>
</head>
<body ng-controller="MyController">
<pre>{{ obj | json }}</pre>

<pre>{{ obj | json : 8 }}</pre>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script>
angular.module('myApp', [])
  .controller('MyController', ['$scope', function($scope) {
    $scope.obj = {
      isbn: undefined,
      title: 'AngularJSライブラリ 活用レシピ 厳選 108',
      authors: ['山田祥寛', '掛谷奈美'],
      price: 1200,
      toString: function() { /* 任意の処理 */ }
    };
  }]);
</script>
</body>
</html>
スコープ変数の内容をJSON形式で出力するコード(json.html)
オブジェクトを読みやすい形式で表示
オブジェクトを読みやすい形式で表示

 jsonフィルターの構文は、以下の通りです。

[構文]jsonフィルター

{{obj | json [:space] }}

  • obj: 任意のオブジェクト
  • space: インデントに利用するスペース数(デフォルトは2

 jsonフィルターは、インデント付きのJSON文字列を出力するだけで、<br>など整形のためのタグを付与するわけではありません。ブラウザーへの表示に際しては、<pre>要素などでくくるようにしてください。

 なお、オブジェクトの値がundefined、もしくはfunction型であるプロパティが含まれる場合、変換の対象外となります(=結果から削除されます)。この例であれば、isbnプロパティ、toStringプロパティ(メソッド)が結果から除去されている点に注目です。

処理対象:フィルタリング カテゴリ:基本
処理対象:フィルターコンポーネント カテゴリ:基本
API:json カテゴリ:ng(コアモジュール) > filter components(フィルターコンポーネント)

※以下では、本稿の前後を合わせて5回分(第22回~第26回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

AngularJS TIPS
22. 配列の内容をフィルターするには?(filter)

任意の条件で配列を絞り込むためのフィルターである「filter」の基本的な使い方を解説。否定や完全一致などさまざまな条件でのフィルタリング方法も紹介する。

AngularJS TIPS
23. 自作の検索条件/比較ルールで配列を検索するには?(filter)

任意の条件で配列を絞り込むためのフィルターである「filter」の応用的な使い方として、検索条件や比較ルールをカスタマイズする方法を解説する。

AngularJS TIPS
24. 【現在、表示中】≫ JavaScriptオブジェクトをJSON形式に変換するには?(json)

jsonフィルターを使って、JavaScriptオブジェクトをJSON形式に変換する方法を説明する。

AngularJS TIPS
25. 式の値によって表示を切り替えるには?(ng-switch)

ng-switchディレクティブを使って、与えられた式の値に応じて、表示すべきコンテンツを切り替える方法を説明する。

AngularJS TIPS
26. 数値(単数/複数)によって表示を切り替えるには?(ng-plurlize)

ng-plurizeディレクティブやngMessageFormatモジュールを使うことで、変数の値によってメッセージ内容を切り替える方法を説明する。

サイトからのお知らせ

Twitterでつぶやこう!