web-dev-qa-db-ja.com

プリティ印刷方法でのdivへのJSON.stringify出力

私はJSON.stringifyによってjsonオブジェクトを

result = JSON.stringify(message, my_json, 2)

上記の引数の2は、結果をきれいに表示することになっています。 alert(result)のようなことをすると、これが行われます。ただし、これをdiv内に追加してユーザーに出力したいと思います。これを行うと、1行だけが表示されます。 （ブレークとスペースがhtmlとして解釈されていないため、機能しているとは思わないでしょうか？）

{ "data": { "x": "1", "y": "1", "url": "http://url.com" }, "event": "start", "show": 1, "id": 50 }

JSON.stringifyの結果をかなりきれいな方法でdivに出力する方法はありますか？

javascripthtmljsonpretty-printstringify
126
Alexis

<pre>タグを使用してください

デモ： http://jsfiddle.net/K83cK/

var data = {
  "data": {
    "x": "1",
    "y": "1",
    "url": "http://url.com"
  },
  "event": "start",
  "show": 1,
  "id": 50
}


document.getElementById("json").innerHTML = JSON.stringify(data, undefined, 2);
<pre id="json"></pre>
327
Diode

JSON出力が<pre>タグにあることを確認してください。

22
Adam

私はこのパッケージの作成者ですが、JSONまたはJavaScriptオブジェクトを読みやすい方法で出力する別の方法は、パーツをスキップしたり、折りたたんだりできるなど、完全なものですnodedump、 https://github.com/ragamufin/nodedump

6
ragamufin

これが実際にユーザー向けの場合は、テキストを出力するだけでなく、次のようなライブラリを使用できます https://github.com/padolsey/prettyprint.js を使用して、HTMLテーブルとして出力します。

2
Jason Livesay

REST AP​​Iが返すことを考慮してください：

{"Intent":{"Command":"search","SubIntent":null}}

その後、次の手順を実行して、ナイス形式で印刷できます。

<pre id="ciResponseText">Output will de displayed here.</pre>   

var ciResponseText = document.getElementById('ciResponseText');
var obj = JSON.parse(http.response);
ciResponseText.innerHTML = JSON.stringify(obj, undefined, 2);
2
Siddarth Kanted

<pre>タグがJSONの単一行を表示している場合は、その方法で文字列が既に提供されているため（APIまたは制御外の関数/ページを介して）、次のように再フォーマットできます。

HTML：

<pre id="json">{"some":"JSON string"}</pre>

JavaScript：

    (function() {
        var element = document.getElementById("json");
        var obj = JSON.parse(element.innerText);
        element.innerHTML = JSON.stringify(obj, undefined, 2);
    })();

またはjQuery：

    $(formatJson);

    function formatJson() {
        var element = $("#json");
        var obj = JSON.parse(element.text());
        element.html(JSON.stringify(obj, undefined, 2));
    }
1
thinkOfaNumber

スタイルwhite-space: preを使用すると、<pre>タグは、望ましくないテキスト形式も変更します。

1
user7986267

私の提案は以下に基づいています：

  • 各 '\ n'（改行）を<br>に置き換えます
  • 各スペースを＆nbsp;に置き換えます
var x = { "data": { "x": "1", "y": "1", "url": "http://url.com" }, "event": "start", "show": 1, "id": 50 };


document.querySelector('#newquote').innerHTML = JSON.stringify(x, null, 6)
     .replace(/\n( *)/g, function (match, p1) {
         return '<br>' + '&nbsp;'.repeat(p1.length);
     });
<div id="newquote"></div>
1
gaetanoM

jSXを使用してコンポーネントの状態を出力する

render() {
  return (
    <div>
      <h1>Adopt Me!</h1>
      <pre>
        <code>{JSON.stringify(this.state, null, 4)}</code>
      </pre>
    </div>
  );
}

stringify

0
Bar Horing

このリポジトリを試すことができます： https://github.com/amelki/json-pretty-html

0
kofifus