How to display a Python list of strings that contains HTML and JavaScript in a template with JS

Question

I have a python list that contains a list of strings. Those strings contain HTML and JavaScript. Right now, I am using sentences = json.dumps(l) in Django view, then in the template I use {{sentences|safe}}, it works for some strings, but it breaks on the strings that contain lots of HTML and JavaScript. How do I fix this problem?

Thank you for your help.

I tried JSON.parse(sentences), {{sentences|escapejs}}, {{escape|safe}}

# in django view
sentences = json.dumps(l)
return render(request, 'detail.html', {
    'sentences': sentences
  })

// in template, attempt to pass the jsonified python list to js array
var random = {{sentences|safe}};


SyntaxError: "" literal not terminated before end of script 73:78:35396
SyntaxError: unexpected token: identifier
73:78:12
SyntaxError: unexpected token: identifier
73:78:4
SyntaxError: unexpected token: identifier
73:78:20
SyntaxError: unexpected token: identifier
73:78:20

Lord Elrond · Accepted Answer · 2019-09-10 18:33:43Z

1

The third argument of render is context, which is a dictionary of variables that you want to access on your template.

In your code, you are setting context={}, which means sentences isn't being passed to your view. Try doing this instead:

sentences = json.dumps(l)
context = { 
    'sentences': sentences
}
return render(request, 'detail.html', context)

Now you should be able to access sentences on your template:

<script type="text/javascript">
var someVar = {{ sentences | safe }} #don't use "random" since that is a keyword
</script>

Note that I included <script> tags around the someVar declaration. Your code would render as plaintext otherwise.

answered Sep 10, 2019 at 18:33

Lord Elrond

16.5k8 gold badges54 silver badges92 bronze badges

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

9 Comments

atomixx Over a year ago

Sentences are correctly being passed from the view to the template, and the assignment is enclosed by a script tag. It works for many different types of sentences, except the ones that contain HTML and JavaScript in them. For those sentences, there is an error.

Lord Elrond Over a year ago

@atomixx can you show me the result of print(sentences) in your view?

Lord Elrond Over a year ago

@atomixx, also I assume sentences is user generated input? From my understanding, the purpose of |safe is to clean the data of any potential html/javascript that was maliciously inserted by a user, which is not what you want in this case.

atomixx Over a year ago

If I don't use |safe (i.e. {{sentence}}), then I get the following error: SyntaxError: expected expression, got '&'

atomixx Over a year ago

Here is the result of print(sentences) in the view: ["<html>", "<head>", " <title>Multiplication Table</title>", " <script type=\"text/javascript\">", " var rows = prompt(\"How many rows for your multiplication table?", "\");", " var cols = prompt(\"How many columns for your multiplication table?", "\");", " if(rows == \"\" || rows == null)", " \t\t rows = 10;", " if(cols== \"\" || cols== null)", " \t\t cols = 10;", " createTable(rows, cols);", " function createTable(rows, cols)", " {", " var j=1;"]

|

Collectives™ on Stack Overflow

How to display a Python list of strings that contains HTML and JavaScript in a template with JS

1 Answer 1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related