web-dev-qa-db-ja.com

AngularJS形式のJSON文字列出力

入力からデータを収集し、JSON.stringify()を使用してモデルを文字列に変換し、<textarea>要素が更新された場合に入力フィールドが更新されるようにユーザーにこのモデルを編集させるAngularJSアプリケーションがあります。ある種の双方向バインディング:)

問題は、文字列自体が見にくいので、フォーマットしたいので次のようにします。

enter image description here

そして今はこんな感じじゃない。

enter image description here

これをどのように達成できるかについてのアイデアはありますか？追加情報が必要な場合は、遠慮なく質問してください。すべての答えは高く評価されていてすぐに答えられます。

ありがとうございました。

P.Sこれはある種のディレクティブかカスタムフィルタであるべきだと思います。データ自体は変更されるべきではなく、出力のみが変更されるべきです（SHOULD NOT）。

javascriptjsonstringangularjsformatting
89
amenoire

JSON.stringify()というオプションのパラメータを使うことができます。

JSON.stringify(value[, replacer [, space]])

パラメータ

  • valueJSON文字列に変換する値です。
  • replacement関数の場合、文字列化中に見つかった値とプロパティを変換します。配列の場合は、最終文字列のオブジェクトに含まれる一連のプロパティを指定します。置換機能の詳細な説明は、javaScriptガイドの記事Using native JSONにあります。
  • space結果の文字列をきれいに印刷します。

例えば：

JSON.stringify({a:1,b:2,c:{d:3, e:4}},null,"    ")

次のような結果が得られます。

"{
    "a": 1,
    "b": 2,
    "c": {
        "d": 3,
        "e": 4
    }
}"
59
Lukasz Wiktor

Angularはfilterを表示するための組み込みのJSONを持っています

<pre>{{data | json}}</pre>

空白と改行を節約するためのpre-タグの使用に注意してください。

デモ：

angular.module('app', [])
  .controller('Ctrl', ['$scope',
    function($scope) {

      $scope.data = {
        a: 1,
        b: 2,
        c: {
          d: "3"
        },
      };

    }
  ]);
<!DOCTYPE html>
<html ng-app="app">

  <head>
    <script data-require="[email protected]" data-semver="1.2.15" src="//code.angularjs.org/1.2.15/angular.js"></script>
  </head>

  <body ng-controller="Ctrl">
    <pre>{{data | json}}</pre>
  </body>

</html>

angular.toJsonメソッドもありますが、私はそれを試していません（ Docs ）

415
ivarni

JSONをHTMLとしてレンダリングし、それを折りたたんだり開いたりすることができるのであれば、このディレクティブを使って、うまくレンダリングすることができます。

https://github.com/mohsen1/json-formatter/

enter image description here

23
Mohsen

すでに述べた angular json filter の他に、 angular toJson()関数 もあります。

angular.toJson(obj, pretty);

この関数の2番目のパラメータは、きれいな印刷をオンにして、使用するスペースの数を設定することを可能にします。

Trueに設定した場合、JSON出力には改行と空白が含まれます。整数に設定されている場合、JSON出力にはインデントごとにその数のスペースが含まれます。

（デフォルト：2）

11
Daniel Haley

私はあなたがJSONテキストを編集するために使用したいと思います。それからあなたはivarniの方法を使うことができます：

{{データ| json}}
 編集可能
 
 <pre contenteditable="true">{{data | json}}</pre>

これがお役に立てば幸いです。

4
Joy Ge

JSONをフォーマットして構文の強調表示もしたい場合は、ng-prettyjsonディレクティブを使用できます。 npmパッケージを見てください。

使い方は次のとおりです。<pre pretty-json="jsonObject"></pre>

2
Nayan