Is there a standard for embedding JSON in HTML?

前端 未结 4 1039
借酒劲吻你
借酒劲吻你 2021-01-31 19:37

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.

<
相关标签:
4条回答
  • 2021-01-31 20:15

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

    0 讨论(0)
  • 2021-01-31 20:23

    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 :-)

    0 讨论(0)
  • 2021-01-31 20:29

    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.

    <c:set var="jsonpVarName">jsnpData<%= java.lang.Math.round(java.lang.Math.random() * 1000000) %></c:set>    
    

    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.

    <script class="data" data-var="${jsonpVarName}" type="text/javascript">
        window.${jsonpVarName} = ${ctrl.json};
    </script>
    

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

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

    Example with context

    HTML

    <div class="myWidget">
        <button class="fetchData">Fetch Data</button>
    
    
        <c:set var="jsonpVarName">jsnpData<%= java.lang.Math.round(java.lang.Math.random() * 1000000) %></c:set>
    
        <script class="data" data-var="${jsonpVarName}" type="text/javascript">
            window.${jsonpVarName} = ${ctrl.json};
        </script>
    
    </div> 
    

    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.

    0 讨论(0)
  • 2021-01-31 20:36

    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:

    <script id="data" type="application/json">
        {
            "foo" : "bar"
        }
    </script> 
    

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

    0 讨论(0)
提交回复
热议问题