Question

I’m thinking about embedding arbitrary JSON in the DOM like this:

<script type="application/json" id="stuff">
    {
        "unicorns": "awesome",
        "abc": [1, 2, 3]
    }
</script>

This is similar to the way one might store an arbitrary HTML template in the DOM for later use with a JavaScript template engine. In this case, we could later retrieve the JSON and parse it with:

var stuff = JSON.parse(document.getElementById('stuff').innerHTML);

This works, but is it the best way? Does this violate any best practice or standard?

Note: I’m not looking for alternatives to storing JSON in the DOM, I’ve already decided that’s the best solution for the particular problem I’m having. I’m just looking for the best way to do it.

Answer 1

I think your original method is the best. The HTML5 spec even addresses this use:

“When used to include data blocks (as opposed to scripts), the data
must be embedded inline, the format of the data must be given using
the type attribute, the src attribute must not be specified, and the
contents of the script element must conform to the requirements
defined for the format used.”

Read here: http://dev.w3.org/html5/spec/Overview.html#the-script-element

You’ve done exactly that. What is not to love? No character encoding as needed with attribute data. You can format it if you want. It’s expressive and the intended use is clear. It doesn’t feel like a hack (e.g. as using CSS to hide your “carrier” element does). It’s perfectly valid.