Retrieve a file from the static folder using template tags within JavaScript code

I have developed an application that generates a file location when a submit button is clicked.

json_path = os.path.join('json', request.POST['submit'], '.json' )

This code creates the file location within the \static\json\ directory.

I am including this information in a dictionary to be sent to the template.

render_dict = {
        'json_path':json_path,
    }

In my JavaScript code, I need to specify the location of the JSON file like so:

<script>

map.addSource('locationData', {
                    type: 'geojson',
                    data: "This is where the json file's location should go"
                    });

</script>

Does anyone know if it's possible to achieve this using template tagging?

Answer №1

After some trial and error, I was able to achieve this using a workaround. However, I would be grateful for any better suggestions.

  1. Instead of sending a string in render_dict, I sent a list -

    render_dict = { 'json_path':[json_path], }

  2. Within the javascript code, I utilized the following approach -

    map.addSource('locationData', { type: 'geojson',

    {% autoescape on %} data: "{{json_path|safe|escape|cut:"'"|cut:"["|cut:"]"}}" {% endautoescape %}

                });
    

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to reveal a div upon pressing the enter key in two separate textareas

Is there a way to detect when the enter key is pressed in two textareas? I have successfully implemented this for one textarea, but need assistance with extending it to multiple textareas. This is the code I currently have: $('#test1').keyu ...

Assigning objects in Vue.js methods

I am working on a Vue component where I need to select a specific value from an array of objects and then copy certain fields from that value into Vue data. <div class="container"> <h4>Add Item</h4> <form @submit.prevent="ad ...

Struggling with making the Angular directive compatible with ng-container

Below is the code snippet where the ng-if condition is not behaving as anticipated If the value of displayGroup is D, it should display the first and second blocks. Can you spot any error in my logic? <div *ngIf="(bookTravelInfo.displayGroup | upp ...

Strategies for inserting JSON data into an XY array in React-vis

Exploring graphing functionalities in react-vis and seeking advice on the optimal method to transfer data from a JSON file to state for easy access when creating graphs. Below is an example of the JSON data I am working with: [ { "day": "1", ...

Tips on how to interact with a dynamically generated element in a web page using Selenium and JavaScript

I am attempting to develop a bot that can automatically create accounts for me. However, I am facing an issue where I am unable to interact with the element where I need to input my login credentials. The element I am trying to access is generated dynamic ...

Shuffling 4 div elements horizontally using Javascript and JQuery

I have a row of 4 div elements (cards) that I want to mix up every time the page is refreshed. How can I achieve this? Currently, I am using the following code: var random = Math.floor(Math.random() * $(".card").length); $(".card") .hide() ...

What is the best way to provide a state to a specific path in react-router?

Is there a way to include appState in my react router path? I am using react-redux but I'm unsure of the best method for passing props to my react-router path. I attempted to use withRouter but encountered issues. My goal is simply to pass props fro ...

Discovering the content of an internal Database or Table in TYPO3 and showcasing it using JavaScript, JQuery, or AJAX

As a newcomer to TYPO3, I must admit that it's quite intricate, but I'm making progress. All I'm looking for is a simple method to extract content from an internal TYPO3 Database Table that I've set up and send it over to JavaScript/JQ ...

Creating an Interactive and Engaging 3D Experience on Facebook with the Power of Javascript API

Looking for suggestions on a 3D API in JavaScript that can be used to create immersive applications on Facebook. Is there something similar to this one: ? Appreciate any insights. ...

Deletion of widget in React application

Just delving into the world of React and found a great repo to get me started: https://github.com/Hashnode/mern-starter I noticed that when running this project as is, there's a widget that pops up which looks like this: https://i.sstatic.net/P6RSB. ...

Tips on updating content at a specific time without the need to refresh the page

I'm working on a digital signage script that needs to be time scheduled. I was able to accomplish this using JavaScript and refreshing the page every 15 minutes. However, my question is, how can I track the time and update the content at specific hour ...

Eliminate empty values from an array in a Django Rest Framework output

I have a query that is similar to this particular one. I am currently utilizing django-rest-framework to construct an API, utilizing ModelSerializer to fetch data from a model. This model contains Arrays (utilizing the PostgreSQL ArrayField). models.py ...

What are some ways to dynamically find and import JavaScript files while the code is running?

Currently, I am developing a node.js-based server that manages various devices. The server informs connected clients about its capabilities by utilizing separate JS files that define objects with inheritance through util.inherits(). The issue I am facing ...

Incorporating a dynamic URL within a script tag with AngularJs

I am currently integrating a payment gateway into my Single Page Application (SPA) using AngularJS. The issue I'm facing is that the payment gateway requires me to include a script with a specific ID for the payment process to work correctly. This i ...

Creating a collapsing drop down menu with CSS

I utilized a code snippet that I found on the following website: Modifications were made to the code as shown below: <div class="col-md-12"> ... </div> However, after rearranging the form tag, the drop-down menu collapse ...

Retrieve MySQL data and insert it into a new table row using jQuery

I am relatively new to using jquery and AJAX and I am unsure if AJAX would be beneficial in this particular scenario. I came across a similar question that seems to be related to what I am looking for. Add new row to table using jQuery on enter key button ...

Utilizing Vue's Vue.set method on an object containing numerous nested objects

I'm currently experimenting with Vue.set() to update a state object in Vue 2. This is the structure of the object: state: { entries: [ // entry 1 fields: { someProperties : '' // I want to add ano ...

Unable to retrieve API data on local server port 5000. Utilizing a database sourced from a CSV file. Unexpected undefined promise response

I have been struggling for the past few days with a persistent issue. Seeking assistance. Currently working on a project involving a CSV database and creating my own API. It is a small React App Fullstack MERN setup. The specific challenge I am facing is ...

How to merge two Dictionary/Querysets in Django with identical values

I have two different model querysets and I am trying to merge them based on matching values. Can you please provide suggestions on how to achieve this? Any help would be highly appreciated. after = list(chain(q1, q2)) after = q1 | q2 My ...

What is the process for triggering a 404 status code within the Serializer Validate function in Django REST framework?

In my serializer, I have implemented a validate() function. By default, Serializer Errors return a status code of 400, but I want it to return 404 instead. Here is what I tried: class MySerializer(serializers.ModelSerializer): class Meta: m ...