Being able to automatically update my JSON file without needing to manually refresh the webpage is a feature I am interested in exploring

Question

Being able to automatically update my JSON file without needing to manually refresh the webpage is a feature I am interested in exploring

I have a server that automatically updates a JSON file. However, the JavaScript code I have implemented below reads the JSON file and displays it to the client, but it always refreshes the page.

I am looking for a solution on how to read my JSON file every time it gets updated without having to refresh the webpage.

After searching online, it appears that I may need to use AJAX to achieve this. However, I couldn't find much information beyond that. Do I need to make any updates to my JSON file itself?

Below is the snippet of index.html code that I am currently using to fetch data from archive.json:

<script>

fetch('archive.json')
    .then(function (response) {
        return response.json();
    })
    .then(function (data) {
        appendData(data);
    })
    .catch(function (err) {
        console.log('error: ' + err);
    });

function appendData(data) {
    console.log(data.velas.length);
    var mainContainer = document.getElementById("myData");
    for (var i = 0; i < data.velas.length; i++) {
        var div = document.createElement("div");
        div.innerHTML = 'Tempo: ' + data.velas[i].tempo;
        mainContainer.appendChild(div);
    }
}

</script>

Any assistance or guidance would be greatly appreciated!

javascript json ajax refresh

Answer 1

Answer №1

Give this code a shot, I've provided detailed explanations in the comments

<script>

const UPDATE_INTERVAL = 5; // Updates every 5 seconds
var mainContainer = document.getElementById("myData");

async function displayData() {
    // Make the API request
    const response = await fetch('archive.json');
    const data = await response.json();    

    // Check if there is valid data received
    if(data == undefined && data == null) return
    
    // Update the DOM
    var mainContainer = document.getElementById("myData");
    mainContainer.innerHTML = '' // Clear the existing content of the main container
    for (var i = 0; i < data.velas.length; i++) {
        var div = document.createElement("div");
        div.innerHTML = 'Time: ' + data.velas[i].tempo;
        mainContainer.appendChild(div);
    }
}

setInterval(() => { // Make an API call every 5 seconds (UPDATE_INTERVAL) <- You can adjust this value here
   displayData()
}, UPDATE_INTERVAL * 1000)

</script>

Answer 2

Give this code a shot, I've provided detailed explanations in the comments

<script>

const UPDATE_INTERVAL = 5; // Updates every 5 seconds
var mainContainer = document.getElementById("myData");

async function displayData() {
    // Make the API request
    const response = await fetch('archive.json');
    const data = await response.json();    

    // Check if there is valid data received
    if(data == undefined && data == null) return
    
    // Update the DOM
    var mainContainer = document.getElementById("myData");
    mainContainer.innerHTML = '' // Clear the existing content of the main container
    for (var i = 0; i < data.velas.length; i++) {
        var div = document.createElement("div");
        div.innerHTML = 'Time: ' + data.velas[i].tempo;
        mainContainer.appendChild(div);
    }
}

setInterval(() => { // Make an API call every 5 seconds (UPDATE_INTERVAL) <- You can adjust this value here
   displayData()
}, UPDATE_INTERVAL * 1000)

</script>

Answer 3

Answer №2

Hopefully, I have grasped your query correctly.

document.querySelector('button').addEventListener('click',()=>{
   var xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function () {
  if (this.readyState == 4 && this.status == 200) {
  document.querySelector('.get').innerHTML=`${JSON.parse(this.responseText).ip}`
  };
}
xhttp.open("GET", "https://ipapi.co/json/", true);
xhttp.send();


})

<button>Get</button>
<div class="get">
</div>

Answer 4

Hopefully, I have grasped your query correctly.

document.querySelector('button').addEventListener('click',()=>{
   var xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function () {
  if (this.readyState == 4 && this.status == 200) {
  document.querySelector('.get').innerHTML=`${JSON.parse(this.responseText).ip}`
  };
}
xhttp.open("GET", "https://ipapi.co/json/", true);
xhttp.send();


})

<button>Get</button>
<div class="get">
</div>

Answer 5

Answer №3

My error was not due to JSON or AJAX codes, but simply because I was running it on a local server causing it to refresh regardless.

However, Adilson's solution with a timer perfectly met my needs:

Appreciate the assistance everyone!

Answer 6

My error was not due to JSON or AJAX codes, but simply because I was running it on a local server causing it to refresh regardless.

However, Adilson's solution with a timer perfectly met my needs:

Appreciate the assistance everyone!

Being able to automatically update my JSON file without needing to manually refresh the webpage is a feature I am interested in exploring

Answer №1

Answer №2

Answer №3

Similar questions

Ways to swap out element within ViewContainerRef in Angular

Toggle between images in Vue.js when an image is clicked

An error occurred during the extraction of nested JSON data in a SQL query

The issue with the jQuery click event arises when utilizing the "Module Pattern"

JavaScript code to find all possible subarrays of an array containing n elements

The webservice encountered an issue while trying to interpret the JSON Request coming from a PHP file

Is the runTest.ts class in the vscode-test setup ever utilized in the project? Its purpose remains unclear even in the example project

Validation in Laravel appears to be ineffective when managing schedules

What are some methods to improve the performance of this jQuery-powered webpage?

Exploring the capabilities of the Google Books API

What is the best way to include a form within every row of an HTML datatables structure?

Is there a way to align two canvases perfectly on top of each other?

Avoid nesting ternary expressions when possible - consider alternative solutions

Minimize redundancy in the process of adding functions to a function queue

What is the best method to consistently convert a deeply nested object into a tabular format that can be easily reversed

Utilize jQuery's .append() function to dynamically insert content into your webpage

Access array information using AngularJS

Chrome console displaying error: "API request open method is not a function."

Exploring the world of web scraping using NodeJS and cheerIO

Translating a few lines of JavaScript into C#