1

I have a server that consistently updates a JSON file. Tho the code I setup bellow (javascript) reads the JSON file and shows it to the client always refreshes the page.

I would like to know how I would be able to read my JSON file every time it's updated without refreshing the web page.

From what I looked up, it seems that I'll have to use AJAX to get this done. But couldn't find much else. Or should I make any update on my JSON file?

This is the index.html code I'm using to get the data from my archive.json file:

<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>

Thanks for any help!

Leonardo
  • 21
  • 1

3 Answers3

0

You can try this, i have explained everything in code comment

<script>

const REFRESH_INTERVAL = 5; // 5 seconds
var mainContainer = document.getElementById("myData");

async function appendData() {
    // make the request
    const response = await fetch('archive.json');
    const data = await response.json();    

    // check the data response
    if(data == undefined && data == null) return
    
    // manipulate DOM
    var mainContainer = document.getElementById("myData");
    mainContainer.innerHTML = '' // clear the content of the previous mainContainer
    for (var i = 0; i < data.velas.length; i++) {
        var div = document.createElement("div");
        div.innerHTML = 'Tempo: ' + data.velas[i].tempo;
        mainContainer.appendChild(div);
    }
}

setInterval(() => { // send a request to server each 5 seconds (REFRESH_INTERVAL) <- you can change it here
   appendData()
}, REFRESH_INTERVAL * 1000)

</script>
aldison
  • 57
  • 3
  • Thanks for the help, but I think the problem might be on my JSON archive... because still when it gets updated my html refreshes. – Leonardo Jun 22 '21 at 21:57
0

I hope I understood your question 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>
  • Thanks for the help, but I think the problem might be on my JSON archive... because still when it gets updated my html refreshes. – Leonardo Jun 22 '21 at 21:54
  • I have `fetch(url, { ... }` and `.then((response) => { return response.json(); })`. What should I do? Right now I need to refresh the page to get the new value, and I have no idea what to google for. I commented out this `// location.reload()`, because it reloads the page, and I have an animation that gets interrupted by the refresh, that's why I commented it out. – AnonymousUser Nov 24 '21 at 06:56
0

Just acknowledge my mistake of it refreshing not because of JSON nor AJAX codes... but because I was running it on a local server. So it would refresh anyway.

But adilson's respond to the topic with a timer completed what I needed: https://stackoverflow.com/a/68090848/16179486

Thanks for the help guys!

Leonardo
  • 21
  • 1