将JSON渲染为HTML

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

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

一些字符串包括： < 和> 并且这没有显示为常规html < ， >尝试使用.html()而不是.append()不起作用。

这是现场示例http://jsfiddle.net/u6yUN/

Answer 1

这是你要求的： 完成JSFiddle演示

 var jsonRequestUrl = 'http://www.reddit.com/r/funny/comments/1v6rrq.json'; var decoder = $('
'); 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 = $('
').html(encoded).text(); // Add rendered html to DOM $('#output').append(decode); 

DEMO

Answer 2

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

mohsen1 / JSON格式器-JS

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

在这里查看演示： AngularJS指令演示

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

Answer 3

使用$.parseHTML() jQuery method

 var myData = "yourHtml with <" // $("#content").append($.parseHTML(myData)); 

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

Answer 4

最简单的方法之一是

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

Answer 5

试试这种方式……

 var htmlString = $("
").html(data).text(); 

Answer 6

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