从Django“安全”传递JSON到Javascript将添加JSON.parse方法无法解析的字符

Question

I am using the Django framework and I try to pass a list of JSON to my javascript.

Here is how I proceeded:

On the server-side (Python/Django):

context['my_json_list'] = [{'aaa': 'rst', 'bbb': 'uvw'}, {'ccc': 'xyz'}]
return context

On the client-side (html/javascript):

In the HTML:

<script type="text/javascript">
  app.init("{{my_json_list|safe}}");

In the JS:

var app = (function ($) {
  return {
    init: function (my_json_list) {
      console.log(my_json_list);
      my_json_list = JSON.parse(my_json_list);
    }
  }
}

The console.log() prints out:

[{'aaa': 'rst', 'bbb': etc...

which does not seem "parsable" by JSON.parse since I get the following error:

angular.js:11413 SyntaxError: Unexpected token & in JSON at position 2

Is it the proper way of doing what I want, if yes how to solve the parsing part on the JS-side? If no, what is the right way of doing what I want to achieve?

Answer 1

JSON.parse(my_json_list);

The JSON.parse() method parses a JSON string, constructing the JavaScript value or object described by the string.

You didnt pass a string or valid Json so the method failed.

Thats not valid json. You should check out jsonlint.com to make sure youre passing valid json. The issue here is that its reading the single quote ' is the code for '. You should use double quotes in your json.

Example valid Json

{
    "my_list": [{
        "aaa": "rst",
        "bbb": "uvw"
    }, {
        "ccc": "xyz"
    }]
}

JSON

Property names must be double-quoted strings; trailing commas are forbidden.