在HTML中打印JSON字符串

Question

我有一个像{ "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])

看起来除了第一行之外的所有内容都缩进太多了。知道如何解决这个问题吗？

Answer 1

此常见问题解答条目可能会有所帮助......

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

Answer 2

我遇到了同样的问题，我写了这段小代码：

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/

基本策略是递归遍历对象并用html标记替换每个键和值，并使用适当的类（即键，数字，字符串，布尔值，空值都有自己的类）。根据使用内联样式属性进入对象树的深度来设置缩进。