为什么 JSON.parse() 在我的代码中不起作用？

Question

I am using Django and trying to get data using javascript directly. Here are some codes. In the idx_map.html, the JS part looks like this:

 var act = '{{ activities_json }}';

    document.getElementById("json").innerHTML = act[0];

    var obj = JSON.parse(act);

    document.getElementById("demo").innerHTML = 1;

I am trying to find the bug so I put some codes to output lines to the page. The problem is the JSON.parse() line. If I comment that line, I can see [ and 1 in my HTML page, which means no bugs yet. But if I uncomment the JSON.parse() line, I cannot see 1 anymore, indicating the JSON.parse() code has some error. But I did not find anything wrong. Could someone help me with that?

In the views.py, I serialize the object into a json file. The codes are:

def map(request):
activities_json = serializers.serialize("json", Activities.objects.all())
context = {
    "activities": Activities.objects.all(),
    "activities_json": activities_json,
}
return render(request, "CS_Activities/idx_map.html", context)

So the act should look like this (as a string?):

[
    {"model": "CS_Activities.activities", "pk": 1, "fields": {"act_name": "gun shot", "location": "York Universitty", "loc_lat": 43.76776, "loc_long": -79.50297, "time": "2018-11-05T20:25:08Z", "description": "a people dead"}}, {"model": "CS_Activities.activities", "pk": 2, "fields": {"act_name": "another gun shot", "location": "York Village", "loc_lat": 43.76, "loc_long": -79.5, "time": "2018-11-05T22:35:06Z", "description": "A person shot dead while walking"}}
]

Updates: In the idx_map.html, if I just replace the var act as the long string, there would be no errors. So I think the problem in my case is how to retrieve the data from the Django database as a json file format.

Answer 1

You need to use safe which marks the string (or JSON in this case) as not requiring further HTML escaping prior to output.

var act = '{{ activities_json|safe }}';

This part of the code:

document.getElementById("json").innerHTML = act[0];

just gets the first element of the string, which is [.

This part of the code

var obj = JSON.parse(act);

returns error, because you didn't use safe previously and quote (") is output as &quote; in the template which is invalid. I guess you want something like this:

var act = '{{ activities_json|safe }}';
var lat = 43.767760;
var lng = -79.502970;
var latLng = {lat: lat, lng: lng};       

var obj = JSON.parse(act);
document.getElementById("json").innerHTML = obj[0];

Now obj[0] will return first JSON element, but I'm not sure what you want to do with it.