3

のような文字列が{ "a": "1", "b": "2", "c": "3", "asefw": "Chintan" }あり、適切にインデントして html に出力する必要があります。

現在、私は google-code-prettify (構文の強調表示用) と ruby​​ の JSON オブジェクトを組み合わせて出力していますが、インデントが少しずれています: ここに画像の説明を入力

私のRailsビューからの関連コードは次のとおりです。

.container
  .row.demo-samples
    .span9{:style => "\n-moz-border-radius: 8px 8px 6px 6px;\nborder-radius: 8px 8px 6px 6px;"}
      -@content.each do |content|
        %pre
          %code.prettyprint
            =JSON.pretty_generate(JSON[content.content])

すべてのように見えますが、最初の行がインデントされすぎています。これを修正する方法はありますか？

4

2 に答える 2

3

この FAQ エントリが役立つかもしれません....

http://haml.info/docs/yardoc/file.FAQ.html#q-preserve

于 2013-07-09T23:11:10.613 に答える
0

私は同じ問題に遭遇し、この小さなコードを書きました:

var pretty_json = function (ele, level, key) {
    var cls = [];
    if (key) {
        cls.push('pretty-json-key');
        ele = ele + ':';
    } else if (typeof ele === 'number') {
        cls.push('pretty-json-number');
    } else if (typeof ele === 'boolean' && ele) {
        cls.push('pretty-json-true');
    } else if (typeof ele === 'boolean' && !ele) {
        cls.push('pretty-json-false');
    } else if (typeof ele === 'string') {
        cls.push('pretty-json-string');
    } else {
        cls.push('pretty-json-null');
        ele = '<i class="fa fa-ban"></i>';
    }

    var output = '<span ';
    if (key) output += 'style="margin-left:' + (INDENT * level) + 'px" ';
    output += ('class="' + cls.join(' ') + '">' + ele + '</span>');
    console.log(output);
    return output;
};

var eachRecursive = function (obj, level, s) {
    for (var k in obj) {
        if (!obj.hasOwnProperty(k)) continue;
        if (typeof obj[k] == "object" && obj[k] !== null) {
            s.push(pretty_json(k, level, true));
            s.push("<br>");
            eachRecursive(obj[k], level + 1, s);
        } else {
            s.push(pretty_json(k, level, true));
            s.push(pretty_json(obj[k], level));
            s.push("<br>");
        }
    }
};

var make_pretty_json = function (json_str) {
    var json_obj = JSON.parse(json_str);
    var output = [];
    eachRecursive(json_obj, 1, output);
    return output.join('');
};

http://jsfiddle.net/qwwqwwq/kefn7/37/

基本的な戦略は、オブジェクトを再帰的にトラバースし、各キーと値を適切なクラス (つまり、キー、数値、文字列、ブール値、null はすべて独自のクラスを持つ) の html タグに置き換えることです。インデントは、インライン スタイル属性を使用して、オブジェクト ツリーの深さに応じて設定されます。

于 2014-05-04T00:32:04.173 に答える