将JSON渲染为HTML [英] Render JSON into HTML

问题描述

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

I get JSON data with next code:

$.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()无效.

Some of strings included : < and > and this did not displaying as regular html <, > Try to use .html() instead .append() did not work.

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

推荐答案

以下是您要的信息:

Here is whet you were asking for: 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);
});

---

编辑:这里保留一个简单示例.

---

Edit: Keeping this here as a simpler example.

// 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

这篇关于将JSON渲染为HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！