Write HTML string in JSON

Question

Is it possible to write an HTML string inside JSON   Which I want to write like below in my JSON file                    id    services html            img    img SolutionInnerbananer jpg            html     lt h2class  fg-white  gt AboutUs lt  h2 gt  lt pclass  fg-white  gt developing and supporting complex IT solutions Touchingmillions of lives world wide by bringing in innovative technology  lt  p gt

User · Answer

in json everything is string between double quote ", so you need escape " if it happen in value (only in direct writing) use backslash \

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

_x000D_

{_x000D_
  [_x000D_
    {_x000D_
      "id": "services.html",_x000D_
      "img": "img/SolutionInnerbananer.jpg",_x000D_
      "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>"_x000D_
    }_x000D_
  ]_x000D_
}

_x000D_

User · Answer

You could make the identifier a param for a query selector  For PHP and compatible languages use an associative array  in effect an objects  and then json encode    temp array   id     gt array  href   gt  services html                img     gt array  src   gt  img SolutionInnerbananer jpg                 html   gt   lt h2 class  fg-white  gt AboutUs lt  h2 gt  lt p class  fg-white  gt     lt  p gt                 echo json encode  temp       But HTML don t do it for you without some JS      id    href   services html    img    src   img  SolutionInnerbananer jpg       html    lt h2 class   fg-white   gt AboutUs lt   h2 gt  lt p class   fg-white   gt     lt   p gt

User · Answer

You should escape the forward slash too  here is the correct JSON       id    services html    img    img SolutionInnerbananer jpg    html     lt h2class   fg-white   gt AboutUs lt   h2 gt  lt pclass   fg-white   gt developing and supporting complex IT solutions Touchingmillions of lives world wide by bringing in innovative technology  lt   p gt

User · Answer

Lets say I m trying to render the below HTML   let myHTML     lt p gt Go to this  lt a href  https   google com  gt website  lt  b gt  lt  p gt     JSON parse JSON stringify myHTML   This would give you a HTML element which you can set using innerHTML   Like this document getElementById  demo   innerHTML   JSON parse JSON stringify myHTML      People are storing their HTML as an object here  However the method I suggested does the same without having to use an Object

User · Answer

The easiest way is to put the HTML inside of single quotes  And the modified json object is as follows                    id    services html            img    img SolutionInnerbananer jpg            html     lt h2 class  fg-white  gt AboutUs lt  h2 gt  lt p class  fg-white  gt developing and supporting complex IT solutions Touchingmillions of lives world wide by bringing in innovative technology  lt  p gt              Fiddle   And the best way is to esacape the 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     lt h2 class   fg-white   gt AboutUs lt  h2 gt  lt p class   fg-white   gt developing and supporting complex IT solutions Touchingmillions of lives world wide by bringing in innovative technology  lt  p gt              Fiddle

User · Answer

4 Things You Must Do When Putting HTML in JSON        1  Escape quotation marks used around HTML attributes like so  lt img   src   someimage png     gt       2  Escape the forward slash in HTML end tags   lt div gt Hello   World  lt   div gt   This is an ancient artifact of an old HTML spec that   didn t want HTML parsers to get confused when putting strings in a    lt SCRIPT gt  tag  For some reason  today   s browsers still like it       3  This one was totally bizarre  You should include a space between   the tag name and the slash on self-closing tags  I have no idea why   this is  but on MOST modern browsers  if you try using javascript to   append a  lt li gt  tag as a child of an unordered list that is formatted   like so   lt ul  gt   it won t work  It gets added to the DOM after the ul   tag  But  if the code looks like this   lt ul   gt   notice the space   before the     everything works fine  Very strange indeed       4  Be sure to encode any quotation marks that might be included in    bad  HTML content  This is the only thing that would really break the   JSON by accidentally terminating the string early  Any   characters   should be encoded as  amp quot  if it is meant to be included as HTML   content    via

User · Answer

You can  once you escape the HTML correctly  This page shows what needs to be done    If using PHP  you could use json encode    Hope this helps

User · Answer

Just encode html using Base64 algorithm before adding html to the JSON and decode html using Base64 when you read   byte   utf8   htmlMessage getBytes  UTF8    htmlMessage  new String new Base64   encode utf8      byte   dec   new Base64   decode htmlMessage getBytes     htmlMessage   new String dec    UTF8

User · Answer

You should escape the characters like double quotes in the html string by adding       eg   lt h2 class   fg-white   gt

User · Answer

One way is to replace the double quotes in the HTML with single quotes but using double quotes has become the standard convention for attribute values in HTML   The better option is to escape the double quotes in json and other characters that need to be escaped   You can get some more details about escaping here  Where can I find a list of escape characters required for my JSON ajax return type

User · Answer

It is possible to write an HTML string in JSON   You just need to escape your double-quotes                    id    services html            img    img SolutionInnerbananer jpg            html     lt h2class   fg-white   gt AboutUs lt  h2 gt  lt pclass   fg-white   gt CSMTechnologiesisapioneerinprovidingconsulting          developingandsupportingcomplexITsolutions Touchingmillionsoflivesworldwidebybringingininnovativetechnology          CSMforayedintotheuntappedmarketslikee-GovernanceinIndiaandAfricancontinent  lt  p gt

[javascript] Write HTML string in JSON

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to json