How can I pass Python list to Javascript in HTML level [duplicate]

Question

I'm trying to pass Python list to use it as Javascript array in HTML file, but when I check the passed Python list in Javascript level, the console log says it's string.

I'm trying to do that in Django environment.

Django views.py

def get_context_data(self, **kwargs):
    context = super().get_context_data(**kwargs)
    context['names'] = list(
        Store.objects.values_list('businessName', flat=True))

    return context

index.html

<span data-names="{{ names }}">...</span>
<script>
    console.log(type($('span').attr('data-names')));
</script>

The console says it's string type. Did I miss any middle step there?

console.log result

['Michael Kors', 'Luca + Grae', 'Rebecca Minkoff', 'Aritzia', 'Nest Boutique', 'Ruby Claire Boutique', 'Bella Ella Boutique', 'Called to Surf', 'Adidas', 'Lime Lush', 'Farfetch', 'AGACI', 'The Mint Julep Boutique', 'Free People', 'Current Boutique', 'Hazel and Olive', 'DownEast Basics', 'Roolee', 'J.Crew']

If python is putting out a JSON array here then wrapping it in JSON.parse might work to get you a JS object. — Benjamin Brettsworth
– Benjamin Brettsworth, Commented Nov 7, 2018 at 23:19
MDN Docs at the bottom of this section is says that all data-* attributes are strings. — pmkro
– pmkro, Commented Nov 7, 2018 at 23:21

pmkro · Accepted Answer · 2018-11-07 23:57:49Z

1

According to the MDN Docs all data-* attributes are saved as strings. To get a proper JSON type object you will need to use JSON.parse

<span data-names="{{ names }}">...</span>
<script>
    const data = JSON.parse($('span').attr('data-names'));
    console.log(data);
</script>

According to this question you can pass JSON from django (version >= 1.7) like

from django.http import JsonResponse
return JsonResponse({'foo':'bar'})

edited Nov 7, 2018 at 23:57

answered Nov 7, 2018 at 23:26

pmkro

2,5482 gold badges19 silver badges25 bronze badges

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

3 Comments

Jay P. Over a year ago

I tried JSON.parse, but it throws Uncaught SyntaxError: Unexpected token ' in JSON at position 1 at JSON.parse (<anonymous>), so I tried JSON.parse(JSON.stringify(...)), but it still returns string.

Jay P. Over a year ago

I put the console.log result in the original post. Can you check that?

pmkro Over a year ago

I don't know django but here is another question about returning JSON from django.

Ykh · Accepted Answer · 2018-11-08 00:18:57Z

1

<script>
    var names = {{ names|safe }}
</script>

safe tag is one option.

answered Nov 8, 2018 at 0:18

Ykh

7,7071 gold badge24 silver badges32 bronze badges

1 Comment

Jay P. Over a year ago

It seems like Javascript doens't read {{ names|safe }}.

Collectives™ on Stack Overflow

How can I pass Python list to Javascript in HTML level [duplicate]

2 Answers 2

3 Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Linked

Related