Output JSON into markup with Sightly

logic.js

use(function () {
    var myObj = {
        foo: "bar",
        arr: [1,2,3,4,5,6,7,8,9,10]
    };

    return {
        json: JSON.stringify(myObj)
    };
});

template.html

<div data-sly-use.logic="logic.js"
     data-json="${logic.json}">
    ...
</div>

I often see inline script elements used to output JSON, but a more elegant way of doing this is to use a data attribute instead. Also, instead of using the template language to create properly formatted JSON, using a JSON API instead is more meaningful and also much safer.

The code above can be executed with the REPL live Sightly evaluation environment:
https://github.com/Adobe-Marketing-Cloud/aem-sightly-repl