将JSON渲染为HTML

Question

我使用下一个代码获取JSON数据：

$.getJSON(
     "data.json",function foo(result) {
       $.each(result[1].data.children.slice(0, 10),
        function (i, post) {
          $("#content").append( '<br> HTML <br>' + post.data.body_html );       
        }
      )
    }
 )

 <div id="content"></div>

其中包含一些字符串：<和>，但这并未显示为常规html <，> 尝试使用.html()代替.append()无效。

这是实例http://jsfiddle.net/u6yUN/

Answer 1

如果您正在寻找一个漂亮的可折叠渲染器，我已经为此编写了一个模块。它使用的是纯JavaScript，因此您可以在任何框架中使用它。

mohsen1/json-formatter-js

如果您使用的是AngularJS，它也可以作为AngularJS指令使用 mohsen1/json-formatter

在此处查看演示：AngularJS directive demo

它也是主题，所以你可以改变颜色：

Answer 2

以下是您的要求： Complete JSFiddle Demo

var jsonRequestUrl = 'http://www.reddit.com/r/funny/comments/1v6rrq.json';
var decoder = $('<div />');
var decodedText = '';

$.getJSON(jsonRequestUrl, function foo(result) {
    var elements = result[1].data.children.slice(0, 10);

    $.each(elements, function (index, value) {
        decoder.html(value.data.body_html);
        decodedText += decoder.text();
    });

    $('#content').append(decodedText);
});

---

修改：将此作为一个更简单的示例。

// Encoded html
var encoded = '<div style="background:#FF0">Hello World</div>';

// Temp div to render html internally
var decode = $('<div />').html(encoded).text();

// Add rendered html to DOM
$('#output').append(decode);

DEMO

Answer 3

另一个用于呈现JSON对象的库是：renderjson

尽管它具有简约风格，但它允许单击JSON结构。

用法示例：

document.getElementById("test").appendChild (renderjson (data));

Answer 4

只需使用JSON.stringify的第三个（space）参数来格式化json，然后使用<pre>标签进行显示。

const json = { foo: { bar: 'hello' } }


$('html').append('<pre>' + JSON.stringify(json, null, 2) + '</pre>')

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 5

使用$.parseHTML() jQuery method

var myData = "yourHtml with <" //

$("#content").append($.parseHTML(myData));

这是一个jsfiddle：http://jsfiddle.net/x4haw/

Answer 6

最简单的方法之一是

var t= post.data.body_html;
t.replace('&lt','<').replace('&gt', '>');
$("#content").append( '<br> HTML <br>' + t ); 

Answer 7

试试这个......

var htmlString = $("<div/>").html(data).text();

Answer 8

您可能想尝试JSON2HTML。使用本机JavaScript，jQuery和node.js.允许完全自定义生成的HTML。