Geek Answers Handbook

Write an HTML string in JSON format

Is it possible to write an HTML string inside JSON?

Which I want to write as below in my JSON file:

[ { "id": "services.html", "img": "img/SolutionInnerbananer.jpg", "html": "<h2class="fg-white">AboutUs</h2><pclass="fg-white">developing and supporting complex IT solutions.Touchingmillions of lives world wide by bringing in innovative technology </p>" } ]
+16
source share
11 answers

You should avoid characters such as double quotes in the html string by adding " \ "

for example: <h2 class=\"fg-white\">

+26
source

You can, as soon as you exit HTML correctly. This page shows what needs to be done.

If you are using PHP, you can use json_encode ()

Hope this helps :)

+6
source

Just encode html using Base64 algorithm before adding html to JSON and decode html using Base64 when reading.

 byte[] utf8 = htmlMessage.getBytes("UTF8"); htmlMessage= new String(new Base64().encode(utf8)); byte[] dec = new Base64().decode(htmlMessage.getBytes()); htmlMessage = new String(dec , "UTF8");
+6
source

You can write an HTML string in JSON. You just need to avoid double quotes.

 [ { "id": "services.html", "img": "img/SolutionInnerbananer.jpg", "html": "<h2class=\"fg-white\">AboutUs</h2><pclass=\"fg-white\">CSMTechnologiesisapioneerinprovidingconsulting, developingandsupportingcomplexITsolutions.Touchingmillionsoflivesworldwidebybringingininnovativetechnology, CSMforayedintotheuntappedmarketslikee-GovernanceinIndiaandAfricancontinent.</p>" } ]
+3
source

One way is to replace double quotes in HTML with single quotes, but using double quotes has become the standard convention for attribute values ​​in HTML.

The best option is to avoid double quotes in json and other characters that need to be escaped.

You can get more details about escaping here: Where can I find a list of escape characters needed for my ajax JSON return type?

+1
source

You should also avoid slash, here is the correct JSON:

 [{ "id": "services.html", "img": "img/SolutionInnerbananer.jpg", "html": "<h2class=\"fg-white\">AboutUs<\/h2><pclass=\"fg-white\">developing and supporting complex IT solutions.Touchingmillions of lives world wide by bringing in innovative technology <\/p>" }]
+1
source

The easiest way is to put HTML inside single quotes. And the modified json object is as follows:

 [ { "id": "services.html", "img": "img/SolutionInnerbananer.jpg", "html": '<h2 class="fg-white">AboutUs</h2><p class="fg-white">developing and supporting complex IT solutions.Touchingmillions of lives world wide by bringing in innovative technology </p>' } ];

Fiddle

And the best way is esacape double quotes and other characters that need to be escaped. The modified json object is as follows:

 [ { "id": "services.html", "img": "img/SolutionInnerbananer.jpg", "html": "<h2 class=\"fg-white\">AboutUs</h2><p class=\"fg-white\">developing and supporting complex IT solutions.Touchingmillions of lives world wide by bringing in innovative technology </p>" } ];

Fiddle

0
source

You can make the identifier a parameter for the query selector. For PHP and compatible languages, an associative array is used (actually objects), and then json_encode.

 $temp=array('#id' =>array('href'=>'services.html') ,'img' =>array('src'=>"img/SolutionInnerbananer.jpg") ,'.html'=>'<h2 class="fg-white">AboutUs</h2><p class="fg-white">...</p>' ); echo json_encode($temp);

But HTML does not do this for you without any JS.

 {"#id":{"href":"services.html"},"img":{"src":"img\/SolutionInnerbananer.jpg"} ,".html":"<h2 class=\"fg-white\">AboutUs<\/h2><p class=\"fg-white\">...<\/p>"}
0
source

4 things you should do when putting HTML in JSON:

1) Avoid quotes used around HTML attributes, for example <img src=\"someimage.png\"/>

2) Avoid slashes in the final HTML tags. <div>Hello World!<\/div>. This is an ancient artifact of the old HTML specification that did not want HTML parsers to get confused when placing strings in <SCRIPT> . For some reason, today's browsers still like this.

3) This one was completely strange. You must include a space between the tag name and the slash on self-closing tags. I have no idea why this is, but in most modern browsers, if you try to use javascript to add <li> as a child of an unordered list that is formatted like this: <ul/> , it will not work. It is added to the DOM after the ul tag. But if the code looks like this: <ul/> (note the space before /), everything works fine. Very strange.

4) Be sure to encode any quotation marks that may be included in the (bad) HTML content. This is the only thing that really breaks JSON by accidentally ending the line early. Any " characters must be encoded as &quot; if it is assumed that they are included in the HTML content.

via

0
source

in json everything is a string between double quotes “so you need to escape” if this happens in value (only in direct write) use backslash

and everything in the json file wrapped in {} change your json to

 { [ { "id": "services.html", "img": "img/SolutionInnerbananer.jpg", "html": "<h2 class=\"fg-white\">AboutUs</h2><p class=\"fg-white\">developing and supporting complex IT solutions.Touching millions of lives world wide by bringing in innovative technology</p>" } ] }
0
source

Let's say I'm trying to render the HTML below.

let myHTML = "<p>Go to this <a href='https://google.com'>website </b></p>";

JSON.parse(JSON.stringify(myHTML)) This will give you an HTML element that you can set with innerHTML.

Like document.getElementById("demo").innerHTML = JSON.parse(JSON.stringify(myHTML));

People store their HTML as an object here . However, the method I suggested does the same thing without using an object.

0
source

More articles:


All Articles