What steps can be taken to ensure that the JavaScript fetch() function is consistently accessing and updating the new data that is being added to the

I'm facing an issue with my JSON data file that I want to display on the screen. I have a function with a fetch() request that executes every time I click a button. Initially, it works perfectly by fetching the data and displaying it correctly. However, when new content is added to the JSON file and I click the button again in the same session, the data remains the same as the first time. I've verified that the code after the fetch() function runs (such as console.log(data.length);). Despite researching the Fetch API extensively, I haven't found a solution to this problem. I came across a thread mentioning that the fetch() function only runs once, which seems to align with my issue.

function fetchJSON() {

    fetch("static/json/pool_values.json")
        .then(response => response.json())
        .then(data => {
            console.log(data.length);

Answer №1

Looks like your cache might be causing trouble. No worries, just tweak your request with this option.

fetch("static/data/pool_data.json", {cache: 'no-cache'})
        .then(res => res.json())
        .then(info => {
            console.log(info.length);

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

ContractResolver is not considered during post request

One of my abstract types has multiple derived types, with a custom attribute [JsonConverter(typeof(BasicJsonConverter))] applied to it. The BasicJsonConverter overrides the Create method from the AbstractJsonConverter class (based on inspiration from here) ...

What is the best way to add content in JavaScript?

Just diving into the world of JavaScript, HTML, and web development tools here. var labels = {{ labels|tojson|safe }}; After using console.log to check the content of labels with console.log(JSON.stringify(labels));, I got this output: [ {"id":"1", ...

Error in form action when generated through an ajax partial in Ruby

I am facing an issue with a form that is loaded via an ajax partial. The problem arises when the form loads through ajax as it targets the wrong controller/url instead of the intended one. Despite my efforts to set the target controller correctly, it keeps ...

Incorporate various Vue.js components into the main parent component

I am currently utilizing Vue.js to create a user interface for my HTML5 game. I have a scenario where I want to define UI containers that essentially group other UI components and position them on the screen. Here's an example of what I'd like to ...

Unable to scroll to the top of the page with JavaScript

I tried the code below but it didn't quite do the trick. Can someone assist me with refreshing the page to the top every time it loads? window.addEventListener('load', function(){ window.scrollTo(0,0) }) window.onload = (event) => { ...

Is there a way to access the refScrollView.current value in a React Native application?

Working on a project with react-native I am trying to retrieve my scroll position by using a ScrollView component. However, when I execute my code and print console.log(refScrollView.current) it returns `null` How can I access the value of refScrollVie ...

Using a union type annotation when passing into knex will result in the return of an unspecified

Knex version: 2.5.1 Database + version: postgres15 When passing a union typescript definition into knex as a type annotation, it returns the type any. However, by using type assertion as UserRecord, we can obtain the correct UserRecord type. It is my un ...

Does an invisible property value exist?

Instead of: if ( ! $('#XX').is(':visible) ) Is there a property named invisible? I tested that one out, but it seems to not work. Appreciate the help! ...

Tips on using Bootstrap 4 containers within a container-fluid and ensuring text stays within a container at all times

What is the best way to incorporate a Bootstrap 4 container within a container-fluid? how can we ensure that text is always contained within the blue section? ...

Enhancing URLs with jQuery/AJAX: A Comprehensive Guide to Adding Parameters

Whenever I try to use the get method on an HTML form, the submitted data automatically appears in the URL. You can see what I mean here. Interestingly, when attempting to achieve the same result with JQuery and AJAX using the get method, the data doesn&apo ...

It appears that the jQuery $.get and $.post methods are not functioning as expected

Hey everyone, I'm facing an issue with two PHP session variables that I need to clear on click. I've attempted using both $.get and $.post AJAX methods to trigger an external PHP script that should reset the values of these session variables. How ...

displaying an image that has been uploaded inside a div element

Is it possible to display the uploaded image within a red box? Here is the code snippet: http://codepen.io/anon/pen/ZWXmpd <div class="upload-image"> <div class="upload-image-preview"></div> <input type="file" name="file" val ...

Optimal method for storing and retrieving JSON data in Laravel using a database

Attempting to save JSON data into a database and retrieve it. I successfully saved the following: {name: "John", age: 31, city: "New York"} It stored correctly in the database and displayed properly when checked. {name: "John&q ...

Creating a group object based on ID using react-native and JavaScript - a step-by-step guide

I have an array of objects that I need to reorganize so that each object with the same guid is grouped together. For instance, given this array; [ {"guid":"3a03a0a3-ddad-4607-9464-9d139d9989bf","comment":"text&quo ...

Converting XML data into a JSON format that is compatible with loading into BigQuery

While learning Python at work, I have managed to successfully load XML data into BigQuery, but I'm not entirely confident in my approach. My process involves calling an API that returns an XML structure, which I parse using ElementTree and tree.iter( ...

What is the best way to dynamically load content as it enters the viewport using JavaScript or jQuery?

I have implemented a stunning animation to the h1 element using a function, but now I want the animation to trigger only when the h1 element enters the viewport as the user scrolls down. Currently, the animation occurs as soon as the page is loaded, even ...

Maximizing Angular and Require's Potential with r.js

I'm facing some challenges while setting up r.js with require in my Angular application. As I am new to AMD, solving this issue might be a simple task for someone experienced. However, I need to maintain the current directory structure as it allows me ...

Ignore undefined values when parsing JSON with jQuery

I am working with an API that sends back a large JSON response using AJAX. To display this data on my webpage, I use `parse.JSON` and loop through it with jQuery's `$.each` method to append the results to a DOM element. However, I have encountered iss ...

Transitioning from ng-repeat filter to Typescript

As I migrate my project from AngularJS to modern Angular 8, one of the steps is converting JavaScript code to TypeScript. During this process, I encountered a challenging issue with the `ng-repeat` filter feature. Initially, my HTML template looked like t ...

Converting object keys to arrays using jq

My goal is to transform a CSV file where the headers represent keys and the values in each column form a list. Here's an example of the CSV data: mpg cyl disp hp drat wt qsec vs am gear carb Mazda RX4 21 6 ...