0

I have a question regarding a issue that got me stuck with a personal project, I have a script that reads a .json file (or it is supposed to) every second and displays the data in to a HTML file. The problem is that when the .json file is modified(changed values every x seconds) the web page displays still the old first read values....

This is the code that i`m using :

<html lang="en">
<head>
    <meta charset="utf-8">
</head>
    
    <p id="1"></p>
    
<script readtype="text/javascript" src="test.json"></script>   
<script>
    function update_values() {
        var mydata = JSON.parse(JSON.stringify(data));
        var test = mydata;
        console.log(mydata);
        document.getElementById("1").innerHTML = test;
    }
  
    update_values();    
    setInterval(update_values, 1000);
</script>
</html>

and this is the content of the .json fille:

data = ["value1", "value5", "value3"]

Can you please help me with a hint how can make it to do what it`s supposed to do?

tiberiusz
  • 41
  • 6
  • What is supposed to be inside the p element? If I understand it correctly you have an array with values, so do you want to concatenate the values or what do you want to do with them? – Andres Paul Dec 07 '20 at 10:00
  • Yes, an array, they will be later on presented in the html page but as i specified i need them to reflect the values from the .json file(relatime) as that file will be updated with new values every 1 seconds. – tiberiusz Dec 07 '20 at 10:07

1 Answers1

-1

Try this:

<html lang="en">
    <head>
      <meta charset="utf-8" />
    </head>

    <p id="1"></p>

    <script readtype="text/javascript" src="test.json"></script>
    <script>
      function update_values() {
        {
          var mydata = JSON.parse(readTextFile("test.json"));
          var test = mydata;
          document.getElementById("1").innerHTML = test;
        }
      }

      function readTextFile(file) {
        var rawFile = new XMLHttpRequest();
        rawFile.open("GET", file, false);
        rawFile.onreadystatechange = function() {
          if (rawFile.readyState === 4) {
            if (rawFile.status === 200 || rawFile.status == 0) {
              var allText = rawFile.responseText;
            }
          }
        };
        rawFile.send(null);
        return rawFile.responseText;
      }

    update_values();
    setInterval(update_values, 1000);
  </script>
</html>

This code reads test.json every second by XMLHttpRequest.

Function readTextFile() I know from How to read a local text file?

FireFragment
  • 596
  • 1
  • 4
  • 15
  • Thank You a lot for the suggestion but now i ran in to the problem related to the CORS.."from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https." I tried even to start a localhost php server to access the file that way but still no luck... – tiberiusz Dec 07 '20 at 11:04
  • Try to have sound on the same server, where you have the page. If you are trying it with localhost, the sound has to be on localhost (or on web) too. – FireFragment Dec 07 '20 at 12:08
  • Tried both localhost and server Chrome and Firefox and it fails same regards to the CORS... – tiberiusz Dec 07 '20 at 16:39
  • PS. Sorry, in my first comment on this post I made mistake: I wrote _sound_ instead of _JSON file_ – FireFragment Dec 08 '20 at 09:29