AngularJS形式のJSON文字列出力

92

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

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

ここに画像の説明を入力してください

そして、今のようには見えません：

ここに画像の説明を入力してください

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

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

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

— アメノワール
ソース

1

あなたはこれを試すことができます-テキストエリアで、Enterキーを押し、結果の文字列を必要に応じてフォーマットします。次に、$watch（前の質問への回答に基づいて）textareaモデルで、a console.log()を実行して、Enterキーの文字列でどのような値が得られるかを確認できます-「/ n」だと思います

— callmekatootie

1

これに基づいて、テキストのフォーマット方法を提案できます

— callmekatootie

{"anchorPosition"： "1"、 "difficulty"： "1"、 "includeInSequence"： "1"、 "questionCount"： "1"}

— amenoire

基本的に、文字列がフォーマットされた後は何も変更されません。

— アメノワール2014

以下の回答をご覧ください-彼らは役に立ちますか？

— callmekatootie 2014

65

オプションのパラメータを使用できます JSON.stringify()

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

パラメーター

value JSON文字列に変換する値。

replacer関数の場合、文字列化中に遭遇した値とプロパティを変換します。配列の場合、最終文字列のオブジェクトに含まれるプロパティのセットを指定します。replacer関数の詳細な説明は、javaScriptガイドの記事「ネイティブJSONの使用」に記載されています。

space 結果の文字列をきれいに出力します。

例えば：

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

次の結果が得られます：

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

— ルカシュ・ウィクトル
ソース

5

これにより$$hashKey、内部モデルの追跡に使用されるプロパティangularが保持されることに注意してください

— PixnBits '20

1

JSON.stringify(object, null, 2)2が空白文字の数である場合にも実行できます。

— MrE 2016

@ Lukasz、$$ Hashkeyを回避できますか？

— メリーランドアスラム

433

Angularには表示用のビルトインfilterがありますJSON

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

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

デモ：

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="angular.js@1.2.15" 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メソッドもありますが、私はそれをいじりませんでした（ドキュメント）

— イヴァルニ
ソース

1

はい、私はすでにこれを知っています。しかし、textarea自体がモデルであるため、このフィルターを作成できません。

— アメノワール2014

これはとてもシンプルですが、とても便利です：D

— Jamie Street

2

@ ra170見出しだけでなく、質問全体を注意深く読んでください。単純なjsonフィルターとは少し異なるものを求めていました。

— アメノワール2015

<pre>タグのwhite-spaceプロパティにnormalまたはを設定しないでくださいno-wrap。そうしないと、JSONが意図したとおりにインデントされません。

— falconepl

3

私は問題を抱えていましたが、<pre>なしで実行していました。

— ルーカス

23

JSONをHTMLとしてレンダリングし、折りたたむ/開くことができる場合は、先ほど作成したこのディレクティブを使用して、JSONを適切にレンダリングできます。

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

ここに画像の説明を入力してください

— モーセン
ソース

11

すでに述べた角度jsonフィルターに加えて、角度toJson()関数もあります。

angular.toJson(obj, pretty);

この関数の2番目のパラメーターを使用すると、プリティプリントをオンにして、使用するスペースの数を設定できます。

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

（デフォルト：2）

— ダニエル・ヘイリー
ソース

私が彼に1000個のオブジェクトの配列を与えると、私のページはブロックされます

— Asqan

Youvariable = angular.toJson ......、あなたが書いたように、それはかなり、結果のように見える

— マルシオRossato

6

私はあなたがjsonテキストを編集するのに使いたいと思います。次に、ivarniの方法を使用できます。

{{データ| json}}

作成する追加属性を追加します

 編集可能


<pre contenteditable="true">{{data | json}}</pre>

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

— ジョイゲ
ソース

2

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

これを使用する方法は次のとおりです。 <pre pretty-json="jsonObject"></pre>

— ナヤン
ソース