Convert string to list of dictionaries in Javascript in Django

Question

in my context there is a variable called "spots". I have a script where I print it in the document

<script >
    var spotss = "{{ spots }}";
    document.write(spotss)
</script>

The above code produces the following result:

[{u'rider_ability': u'Beginner, Intermediate, Expert', u'spot_distance': 2, u'water_type': u'Shallow, Chop, Small wave', u'water_quality': u'Clean', u'lat': 40.4026, u'lng': 14.9949, u'spot_name': u'Paestum'}, {u'rider_ability': u'Beginner, Intermediate, Expert', u'spot_distance': 2, u'water_type': u'Shallow, Chop, Small wave', u'water_quality': u'Clean', u'lat': 40.4271, u'lng': 14.9818, u'spot_name': u'Ponte di Ferro'}, {u'rider_ability': u'Beginner, Intermediate, Expert', u'spot_distance': 9, u'water_type': u'Shallow, Flat, Chop, Small wave', u'water_quality': u'Clean', u'lat': 40.343, u'lng': 14.9717, u'spot_name': u'Agropoli'}, {u'rider_ability': u'Beginner, Intermediate, Expert', u'spot_distance': 21, u'water_type': u'Chop, Small wave', u'water_quality': u'Clean', u'lat': 40.2315, u'lng': 14.9566, u'spot_name': u'Case del Conte'}, {u'rider_ability': u'Beginner, Intermediate, Expert', u'spot_distance': 26, u'water_type': u'Small wave', u'water_quality': u'Clean', u'lat': 40.1856, u'lng': 15.0239, u'spot_name': u'Acciaroli'}, {u'rider_ability': u'Intermediate, Expert', u'spot_distance': 28, u'water_type': u'Flat, Chop', u'water_quality': u'Crystal clear', u'lat': 40.1732, u'lng': 15.0846, u'spot_name': u'Pioppi'}, {u'rider_ability': u'Beginner, Intermediate, Expert', u'spot_distance': 31, u'water_type': u'Chop, Small wave', u'water_quality': u'Clean', u'lat': 40.1641, u'lng': 15.1423, u'spot_name': u'Marina di Casal Velino'}, {u'rider_ability': u'Expert', u'spot_distance': 35, u'water_type': u'Flat, Chop, Small wave', u'water_quality': u'Clean', u'lat': 40.6436, u'lng': 14.6984, u'spot_name': u'Cetara'}, {u'rider_ability': u'Intermediate, Expert', u'spot_distance': 35, u'water_type': u'Shallow, Flat, Chop, Small wave', u'water_quality': u'Clean', u'lat': 40.6775, u'lng': 14.7587, u'spot_name': u'Salerno'}, {u'rider_ability': u'Intermediate, Expert', u'spot_distance': 42, u'water_type': u'Chop, Small wave', u'water_quality': u'Crystal clear', u'lat': 40.6262, u'lng': 14.5883, u'spot_name': u'Spiaggia Duoglie'}]

Which is a list of dictionaries, probably as a "string".

Now my need is to iterate over this list of dictionaries into another script on the same html, and I also need to access dictionaries values while looping. How can I do?

Fcmam5 · Answer 1 · 2018-08-15T00:59:36.687

2

Use Django's safe filter :

<script >
    var spotss = "{{ spots | safe}}";
    document.write(spotss);
</script>

Or you may need:

<script >
    var spotsArray = {{ spots | safe}};
    spotsArray.forEach(function(spot) {
        console.log(spot)
    });
</script>

spotsArray contains a list of objects, you can iterate through that list with forEach

edited Aug 15 '18 at 00:59

answered Aug 15 '18 at 00:49

Fcmam5

4,888
1
16
33

thanks, but what if "spots" is a string and not an array? how can i convert it to a list of dictionaries first? – Lorenzo Liguori Aug 15 '18 at 17:07
Because I think my problem is that I have that spots = "[{dict1},{dict2},...]", but I need to convert it to spots = [{dict1},{dict2},...] in order to iterate with your function! – Lorenzo Liguori Aug 15 '18 at 17:26
Do you mean that `spots` in your views.py is a String? if so simply make your JS as the following `var spots = {{spots | safe}};` then you can loop over that variable as it's an array of objects. Or you can convert that string to a list on your `views.py` using with json.loads function `spots_list = json.loads(spots)`, [this answer](https://stackoverflow.com/a/19391807/5078746) may help you. – Fcmam5 Aug 15 '18 at 18:43

Convert string to list of dictionaries in Javascript in Django

1 Answers1