Django - How to load javascript variable from another file to template

Question

How can I load some variable from another js document inside a template, and then modify this variable inside a script tag in my template?

For example:

js file

let myObject = {color: red}

Django template

{% extends 'app/general/base.html' %}
{% load crispy_forms_tags %}
{% load widget_tweaks %}
{% load static %}

{% block content %}
    <h1 id="color"></h1>

    <script>
        document.getElementById('color').innerHTML = myObject.color //I need some way of loading myObject here, and be able to retrieve and edit data from it
    </script>
{% endblock %}

Irfan wani · Accepted Answer · 2021-06-25 15:05:44Z

1

That is simple.

<script src="path_to_your_file.js"></script>
<script>        
    console.log(myObject);
</script>

Where path_to_your_file.js is the path to the file where the myObject is present

answered Jun 25, 2021 at 15:05

Irfan wani

5,2222 gold badges32 silver badges49 bronze badges

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

5 Comments

Irfan wani Over a year ago

I just console logged the object here just to show how to do that. You can now do whatever you want with that object

Isaac Reinaldo Over a year ago

That is not working. link

Isaac Reinaldo Over a year ago

chartObject is an object inside the file 'chart-area-demo.js'

Isaac Reinaldo Over a year ago

The problem was that my cache was not clear. I had to do a ctrl + F5 to be able to apply the changes.

Irfan wani Over a year ago

This is the way how we plugin the external js into our templates.

Collectives™ on Stack Overflow

Django - How to load javascript variable from another file to template

1 Answer 1

5 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Related