pass an array from pug (jade) to jquery script

Question

I have a array fields which contain a list of strings:

var fields = ['foo', 'bar', 'zed'];

I pass it to pug from express like this:

app.get('/some_route', function(req, res) {

    res.render('some_view', { fields: fields });

});

Now I want to use that array inside jquery script, I already try:

<script>
    $( document ).ready(function() {
        var fields = #{fields};
        // return: var fields = foo,bar,zed;
    });
</script>

and:

<script>
    $( document ).ready(function() {
        var fields = JSON.parse(#{fields});
        // return: var fields = JSON.parse(foo,bar,zed);
    });
</script>

thanks

Ry- · Accepted Answer · 2017-10-12 11:46:44Z

5

JSON-encode it an put it in an attribute somewhere, like on the <script> itself:

script(id='field-source', data-fields=JSON.stringify(fields)).
    $(document).ready(function () {
        var fields = JSON.parse($('#field-source').data('fields'));
    });

It’s possible to put it directly into the script with some careful escaping¹ (JSON-encoding is not enough!), but not worth the effort when attributes already work so reliably.

_{¹ You start by JSON-encoding, then make it safe for the JavaScript context by replacing U+2028 and U+2029 with \u202[89], then make it safe for the HTML context by replacing < with \x3c. Replacing only </ is not enough, as <!-- can also mess with parsing in certain contrivable ways.}

edited Oct 12, 2017 at 11:46

answered Oct 12, 2017 at 11:40

Ry-♦

226k56 gold badges496 silver badges504 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

YouneL Over a year ago

based on your answer this should work too: ` var fields = JSON.parse(#{JSON.stringify(customerFields)}) ` ?

YouneL Over a year ago

I get this work by only add : ` var fields = !{JSON.stringify(customerFields)} `

Ry- Over a year ago

@younel: That’s exactly what I said not to do. It’s an HTML injection (“XSS”) vulnerability.

Collectives™ on Stack Overflow

pass an array from pug (jade) to jquery script

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related