How to retrieve Django list as array in Javascript

Question

I'm sending django list from view.py to my javascript. But when I receive the list in javscript, it only return me as string. I tried to print the type of the variable but it show me false which mean its not array list. So how can I retrieve the list as array in Javascript?

View.py

    mergedCompare = [item_listAssigned[f'subject{i}'] + ': ' + item_listAssigned[f'serial{i}'] for i in range(1, len(item_listAssigned) // 2 + 1)]
            global context
            context = {
                'mergedCompare': mergedCompare
            }

mergedCompare = ['EMP004: BPCE-RNHC-25G8', 'EMP003: 8FIW-9JRB-NY4J', 'EMP005: 7QF2-6HI9-XKZZ', 'EMP002: SG8P-YQKG-ZV3C', 'EMP001: PBF7-WZHT-WPZR']

JavaScript:

        var assignedDevices = "{{mergedCompare|safe}}"
        const list = assignedDevices;
        console.log(Array.isArray(list)) //false , not array

willeM_ Van Onsem · Accepted Answer · 2021-11-12 10:33:54Z

1

You can render the JSON content as a JavaScript script with the |json_script template filter [Django-doc]. Then you can load the JSON blobk with JSON.parse(…):

{{ mergedCompare|json_script:"mergedCompare" }}

<script>
var assignedDevices = JSON.parse(document.getElementById('mergedCompare').textContent);
const list = assignedDevices;
console.log(Array.isArray(list))
</script>

answered Nov 12, 2021 at 10:33

willeM_ Van Onsem

482k33 gold badges483 silver badges624 bronze badges

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

Comments

Charnel · Accepted Answer · 2021-11-12 10:38:48Z

1

Another few approaches in addition to previous answer:

using safe filter

# your view code
...
return render(request, 'some.html', context = {"my_list": ["item1", "item2"]})

# your template code
{{ my_list|safe }}.forEach  // array

dump to/from JSON

import json

# your view code
...
mylist = json.dumps(mylistraw)
return render(request, 'some.html', context = {"my_list": mylist})

# your template code
var mylist = JSON.parse("{{mylist}}")

answered Nov 12, 2021 at 10:38

Charnel

4,4422 gold badges18 silver badges28 bronze badges

Collectives™ on Stack Overflow

How to retrieve Django list as array in Javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related