Use data-* attributes [1], or print it in a script tag with a text/anything type:

    <script type="text/json" id="mydata">
        { data: "..." }
    </script>

    var data = JSON.parse($('mydata').textContent)

[1] https://developer.mozilla.org/en-US/docs/HTML/Global_attribu...

If you put it in a script tag you need to ensure you escape </script>. Though, it is probably safer to escape <, >, and & just to be sure.

The </script> issue is why JSON and Javascript both allow you to escape the slash character with a backslash.

So just going <\/script> is enough.

We use this technique https://www.quora.com/JavaScript/What-is-the-best-way-to-pas...

Can you give it directly to the JS working on that data by setting a var (var x = <%= @data.to_json %>;) or passing it in as a parameter to an initializing function call (APP.init(<%= @data.to_json %>);)? Edit: 1. I hope it's not user generated data. 2. The output in this case wouldn't need to be JSON syntax, it could be object literal notation, saving space on all those double quotes but I doubt you have a helper method available for that.

you can put anything inside class attribute

<div id="data" class="{json: 'x'}"/>

you can mix actual classes with JSON, just put JSON at the end:

<div class="header inline {json: 'x'}"/>

CSS selectors will work just fine