Is there a standard for embedding JSON in HTML?

Is there a standard for embedding JSON in HTML?

I would like to embed JSON in HTML. The most elegant solution I have found makes use of the script-tag and the mime media type application/json.

Is this the standard way of embedding JSON? If not, are there any risks with the above solution?

Reasons for using inline JSON (instead of a JSON-P service):

• Small amounts of JSON-data
• Less HTTP-requests
• Preference for inline-JSON to data in HTML-attributes

[UPDATE] Reason for embedding json.

I have a gallery widget for a website with very high traffic. The gallery can consist of a 100 images or more. I am only showing one image at a time and the rest of the images will be lazy loaded. However the information (image src) to all images will be rendered in the html on page load. There are various ways to render the image information in the html. Instead of using JSON I could also use html data attributes as shown below:

Will result in:

The disadvantage with the above solution is the extra markup. I would rather use JSON and a Javascript-Templating engine such as doT.js.

Answer by mahmoud for Is there a standard for embedding JSON in HTML?

try http://json2html.com/ that's a good way to Transform JSON to HTML.

Answer by Gman for Is there a standard for embedding JSON in HTML?

Didn't ever hear of any standards like that, but Knockout.js uses this type of syntax to embed HTML templates into page (and prevent them from rendering). So, I guess it's okay.

Also, JSON is actually a javascript, but you can't write

Because Javascript parser will try to parse a code block { } instead of an object literal, and throw the syntax error.

But what you can do is add something like document.imageData = before the literal.

This way you'll get already parsed and validated data that is immediately available to all javascript code at document.imageData. (Javascript code accessing this variable should be either below the embedded data, or run after the page is loaded.)

Answer by Bergi for Is there a standard for embedding JSON in HTML?

Reasons for using inline JSON (instead of a JSON-P service)

You can inline JSON-P as well. OK, you just call that method "inline script", but it has the advantages of both :-)

Answer by TJ. for Is there a standard for embedding JSON in HTML?

I am answering my own question since I have had to find a solution. My solution is based on what Bergi suggested using inline JSONP. It is a better solution than finding an answer to my actual question since no manual JSON-parsing is required.

The JSON-data (and HTML) is generated with Java Server Pages (JSP).

Step 1

A custom variable name is created using JSP. It will be used as the javascript global variable to which the json data will be assigned to. The name is randomly generated to prevent naming conflicts on the same page.

jsnpData<%= java.lang.Math.round(java.lang.Math.random() * 1000000) %>      

Step 2 The script tag has a cssClassname to identify it by and a data-var-attribute, so that the custom variable name can be determined. ${ctrl.json}is JSP and prints out JSON. Unlike JSONP which uses a callback-Function, a global variable is used. So far I have not experienced any drawbacks.

Step 3 Accessing the data (using jQuery) is as easy as:

var data = window[$('script.data').data('var')];  

Example with context

HTML

                jsnpData<%= java.lang.Math.round(java.lang.Math.random() * 1000000) %>            
   

Javascript

$('button.fetchData', '.myWidget').click(function (e) {        var data = window[$('script.data', '.myWidget').data('var')];        });  

I'm using inline JSONP to load JSON-data which is required on page load. It isn't a lot of data and it's one HTTP-Request less.

Answer by Domi for Is there a standard for embedding JSON in HTML?

What you suggest is absolutely correct. The type attributes of the script tag must be a valid MIME descriptor. According to the official JSON RFC section 6 "IANA Considerations":

The MIME media type for JSON text is application/json.
Type name: application
Subtype name: json

So your HTML is valid:

And, no, there are no additional risks involved in doing this.

Answer by Link TheProgrammer for Is there a standard for embedding JSON in HTML?

You could always just plain and simple provide an embedded script containing var data containing the JSON data if you wish:

---

Alternatively, you could use xhtml and define your own json tag.

Fatal error: Call to a member function getElementsByTagName() on a non-object in D:\XAMPP INSTALLASTION\xampp\htdocs\endunpratama9i\www-stackoverflow-info-proses.php on line 72