Question

168

Render JSON into HTML

rated 0 times [ 172] [ 4] / answers: 1 / hits: 43874 / 11 Years ago, fri, january 17, 2014, 12:00:00

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>

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

Here is live example http://jsfiddle.net/u6yUN/

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

eanskylerg

Add To Favorites

Follow

Total Points: 524

Total Questions: 107

Total Answers: 100

Location: Colombia

Member since Mon, May 2, 2022

2 Years ago

eanskylerg questions

1 React Router v6 : How to render multiple component inside and outside a div with the same path

Sat, Feb 19, 22, 00:00, 2 Years ago

1 dotenv: command not found in nestjs project

Sat, Oct 30, 21, 00:00, 3 Years ago

1 How can I resolve the TypeScript Compiler error Namespace 'NodeJS' has no exported member 'Global'?

Mon, Jul 5, 21, 00:00, 3 Years ago

1 Limit x-axis in Apexcharts.js

Wed, Mar 10, 21, 00:00, 3 Years ago

1 Cannot use import statement outside a module in Vuejs. Template Django

Sat, Jan 23, 21, 00:00, 3 Years ago

View All

answered 11 Years ago christianu · Accepted Answer

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 = '&lt;div style=background:#FF0&gt;Hello World&lt;/div&gt;';



// Temp div to render html internally

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



// Add rendered html to DOM

$('#output').append(decode);

DEMO