Render JSON into HTML

2024/2/27 8:59:11

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 : &lt; and &gt; 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/

Answer

Just use the 3rd (space) parameter of JSON.stringify to format the json, and use <pre> tags to display.

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>

http://en.ppmy.cn/q/41677.html

Related Q&A

Remove an item from local storage in reactjs

Is this the right code to remove an item from localStorage: onDelete(name) {console.log("ProductList.onDelete: ", name);let {products} = this.state;products = products.filter(product => pr…

React material-ui: centering items on Toolbar

I am trying to implement a toolbar on a page in which I have three ToolbarGroup components:<Toolbar><ToolbarGroup firstChild={true} float="left">{prevButton}</ToolbarGroup>&…

IonRangeSlider assign labels to values

I am using ionRangeSlider and I want assign labels to values or vice versa.So user can pick distance from beach with options: on beach, 100m, 200m, 300m, more than 300m but i need in post values like 0…

I am confused about the keyword this in JavaScript

This is an example:function one() {var a = 1;two();function two() {var b = 2;three();function three() {var c = 3;alert(a + b + c); // 6}} }one()​; //calling the functionNow when we call function on…

CKEditor 4: Uncaught TypeError: Cannot read property langEntries of null

Im using the Ruby gem for CK Editor (https://github.com/galetahub/ckeditor) and Im getting this error:Uncaught TypeError: Cannot read property langEntries of nullHeres where its occurring in the code:C…

How to pre-load (cache) an external page in jquery before redirecting to it?

I am doing a phonegap app. I have an index.html page with a sign-in button that redirects to the website app.When sign-in button was clicked, I wanted to have a loading gif to show while the page is be…

HTML5 video previous - next and auto play

Im new to this site and I am new to HTML5 and Javascript aswell. Its not that I am a beginner, I kinda understand HTML5 and Javascript when I see it, I just cant write it proper myself. I have many vi…

Issue with angular accordion scope

I am having a directive called templates, the code for templates is like below.var templates = function($compile,$parse){ var directive = {restrict: EA,replace: true,link: link }; return directive;func…

Accessing properties of a variable object with JavaScript

I have a js object that looks like this:var object = {"divisions": {"ocd-division/country:us": {"name": "United States",}}};I want to access the property listed …

How to use multiple Http Requests in Angular 4

Im making a simple app with Angular 4 & an API who has several pages for their requests. For example I get the 10 first characters with this url : http://swapi.co/api/people/ And to get the next 1…