Flask: JS unable to locate JSON file

I successfully created an svg animation and saved its data as a JSON file (alongside a JS file).

The JavaScript code to render the animation is shown below:

var animation = bodymovin.loadAnimation({
    container: document.getElementById('anim'),
    renderer: 'svg',
    loop: false,
    autoplay: true,
    path: "data.json"
})

However, when I try to access the file, I encounter a 404 error for the "data.json" file.

  • I attempted to serve the files without using Flask, and it worked perfectly fine.
  • "data.json" exists in both the current directory (a static folder) and the main directory of my application.

The output from my terminal:

127.0.0.1 - - [08/Apr/2022 22:52:27] "GET /static/js/lottie.js HTTP/1.1" 304 -
127.0.0.1 - - [08/Apr/2022 22:52:27] "GET /static/js/script.js HTTP/1.1" 304 -
127.0.0.1 - - [08/Apr/2022 22:52:28] "GET /data.json HTTP/1.1" 404 -

Answer №1

By default, it's /static/data.json, unless you have modified the configuration.

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

I possess a pair of UI tabs. Whenever a button located outside the tab is clicked, I am required to activate a distinct tab

As a beginner in Javascript, I recently encountered an issue with a UI tab element that contains two tabs. My goal is to create a button that, when clicked, will scroll up and activate the second tab. <style> .tab-container { overflow-x: ...

Making a text body request in Postman

I've been attempting to send a body with the content-type: text/plain, but unfortunately, I'm having trouble retrieving it in my application. This is what I have: "days": [1, 2], "time": { "to":8, "from& ...

Issue with WTForms form submission: validation errors not displayed despite form not being properly submitted

I'm having issues trying to implement file uploads using flask-uploads. I've encountered some obstacles while working on it and I need some assistance. Below, I will display my flask view function along with the HTML code, in hopes that someone c ...

Type of Data for Material UI's Selection Component

In my code, I am utilizing Material UI's Select component, which functions as a drop-down menu. Here is an example of how I am using it: const [criteria, setCriteria] = useState(''); ... let ShowUsers = () => { console.log('Wor ...

When attempting to send an array value in JavaScript, it may mistakenly display as "[object Object]"

I queried the database to count the number of results and saved it as 'TotalItems'. mysql_crawl.query('SELECT COUNT(*) FROM `catalogsearch_fulltext` WHERE MATCH(data_index) AGAINST("'+n+'")', function(error, count) { var ...

Error encountered when uploading mp3 file to S3 node due to size limitation

Currently, I am utilizing Node to transmit mp3 files to Amazon S3. However, after uploading the file, it shows a size of 9.0 Bytes and when attempting to play the audio from the public URL, it does not work as expected. Here is my current code snippet: rou ...

Ways to switch out the background image using jQuery

I am currently using jQuery to dynamically change the background image of a web page. Right now, I have implemented two separate buttons that toggle between Image A and Image B. By default, Image A is displayed on the page. My goal is to enhance this func ...

Encountering an async issue with npm exiftool in JavaScript

I'm facing issues with npm exiftool usage. (https://www.npmjs.com/package/exiftool) I'm attempting to perform some tasks using it. Iterate through image files in a specific folder Retrieve 'xpKeywords' data of each image file Write th ...

Stacked column tooltip displaying an array of 3 values

I am working with a json code that looks like this: [[1385420403000,9.86,6.91],[1385506802000,11.89,6.57],[1385593203000,14.11,10.58],[1385679602000,9.1,8.9],[1385766003000,13.59,7.53],[1385852402000,10.68,6.69],[1385938803000,11.03,10.52],[1386025202000, ...

Eliminating redundant values from a JSON object that is nested within another

Currently, I am working on rendering a list of Labels from a local JSON file. However, I am facing the issue of duplicates and I want each label to appear only once. I attempted to use Array.filter() and other methods to achieve this line: "Categories": ob ...

What is the best way to have a button activate a file input when onChange in a React application?

Having an input field of file type that doesn't allow changing the value attribute and looks unattractive, I replaced it with a button. Now, I need the button to trigger the input file upon clicking. How can this be achieved in React? Edit: The butto ...

Combining React state value with an HTML tag would be a great way

I am facing an issue while trying to concatenate the previous value with new data fetched from an API using a loop. Instead of getting the desired output, I see something like this: [object Object][object Object],[object Object][object Object] Here is ...

"Connecting a checkbox and radio button to a button for page navigation using JavaScript - a step-by-step guide

How can I link a checkbox and a radio button with a button to open a page using JavaScript? For instance: Select a checkbox and a radio button, then click a button to open a page. This concept caters to everyone: Select a checkbox and a radio button, then ...

Tips for choosing all elements in a form that have a specific class assigned

I am attempting to target all fields in a form with a specific class name and then select all the remaining fields. This is my form: <form style="margin:20px 0" id="myform_2"> <p> Query Name : <input i ...

Using Vue's $emit method within a Promise

I am currently working on an image upload feature that is based on a Promise. Within the "then" callback, I am attempting to $emit an event named 'success'. Although my VueDevTools shows me that the success event has been triggered, the associate ...

Is there a way to utilize url_for in wtf prior to the app being initialized?

Is there a way to incorporate the url_for() function from Flask within a WTF form class before the application has initialized? My form class is structured as follows: class UserRegisterForm(FlaskForm): accept_terms = BooleanField( "I hav ...

Implementing dropdown filtering for nested ng-repeats in Angular application

I currently have the following data structure set up: vm.years = [{ year: number, proevents: [{year: number, division: string, level: string, place: string, names: string}], nonproevents: [{year: number, division: string, level: string, place: st ...

Creating an effective follow-following system in Node.js

I have built a Node.js application that features a basic follow system, allowing users to receive the latest articles from those they follow. The current implementation involves creating an array called followers, which stores the userIDs of all users fol ...

Angular 2 - Changes in component properties not reflected in view

I'm currently delving into Angular 2 and as far as I know, interpolated items in the view are supposed to automatically update when their corresponding variable changes in the model. However, in the following code snippet, I'm not observing this ...

When scrolling the page, the onscroll event is activated two times

While practicing a tutorial on modal windows, I came across an interesting issue. After triggering an "onscroll" event at the end of the page and closing the modal window, the event stopped firing. This made me curious as to why the author would include lo ...