Cfrgtkky

So I'm loading the JSON file movies.json so I can get its data. The data is submitted via a POST request which I can confirm automatically updates it just fine. Anyways, when I set the values as a Javascript Array, it doesn't automatically update on the page. The console output shows the previous JSON, for example. To resolve this, I am required to manually go to the json file in my browser, and refresh the page. And then when I refresh the page where I wish to show my json values, it works. Can anyone help me figure this out? I'm fairly new to Javascript.

$(document).ready(function) {

    $.getJSON("{{ url_for('static', filename='movies.json') }}", function(json){

        var data = ;

        $.each(json, function (index, value) {

            data.push(value); // Puts the JSON values into an array

        });



        console.log(data) // Logs the Array

        var output = document.getElementById('movie'); // Sets output to the movie div

        output.innerHTML = data[0]; // Sets the value to the title of the movie

    });

});

This outputs, for example, "Avengers: Infinity war", which can also be seen in my JSON file. But if I send another post request for say, "Batman and Robin", it still outputs "Avengers: Infinity war", while my actual JSON file accurately says "Batman and Robin"

So I solved the problem. I found that my JSON file was being cached, and that clearing my cache fixed the problem. So I looked around and found this very informative article.

So I had to add a unique ID to my json file every time it is searched for. My updated code looks like this:

$.getJSON("{{ url_for('static', filename='movies.json') }}?id={{ movie_id }}", function(json) {