Dynamically import value from file

Question

I need some help to dynamically load data in a template as a file change. Below is a sample of the data and code

I have a json file:

data = '[{"name" : "bob", "value" : "3.1"}, {"name" : "joe", "value" : "5.6"}]';

The value in this file change regularly (every 2-3 sec)

I have an HTML file

<head>
 <script type="text/javascript" src="data.json"></script>
 <script type="text/javascript" src="javascript.js"></script>
</head>
<body>
 <table>
  <tr>
    <td>0</td>
    <td>0</td>
   </tr>
  <tr>
    <td>0</td>
    <td>0</td>
   </tr>
 </table>
<body>
<script type="text/javascript">
 document.body.innerHTML = markup;
</script>

And javascript.js is:

var mydata = JSON.parse(data);

const markup = `
 <table>
  <tr>
    <td>${mydata[0].name}</td>
    <td>${mydata[0].value}</td>
   </tr>
  <tr>
    <td>${mydata[1].name}</td>
    <td>${mydata[1].value}</td>
   </tr>
 </table>
`;

So the first question is: how can I get the data dynamically loading in the template as the value change? jQuery? node.js? I need the most simple solution as I am not a newbie.

And secondly, the html code is a bit more complex in reality, but is there a relatively simple way to loop through the data rather than me having to write everything manually? like introducing a "foreach d in data" ?

Thanks for your help, much appreciated!

If I understood you correctly, setInterval() function and JSON.parse() on the every second, I think is the solution you are looking for. — 54ka, May 25 '20 at 04:33

54ka · Answer 1 · 2020-05-25T05:30:03.273

0

I hope I've been helpful

HTML:

<table id="myTable">
</table>

Javascript:

var x = document.getElementById("myTable");
setInterval(function(){ 
    // Here you get the file in the way that is most convenient for you
    // More info here: https://www.w3schools.com/js/js_json_parse.asp
    var data = '[{"name" : "bob", "value" : "3.1"}, {"name" : "joe", "value" : "5.6"}]';
    var obj = JSON.parse(data);
    // Clear the table
    x.innerHTML = '';
    // Adds new values
    for (var key in obj[0]) {
        if (obj[0].hasOwnProperty(key)) {
            x.innerHTML += '<tr><td>'+key+'</td><td>'+obj[0][key]+'</td></tr>'
        }
    }
}, 1000);

edited May 25 '20 at 05:30

answered May 25 '20 at 05:19

54ka

3,501
2
9
24

Thanks for your help. How can I load my file though? I looked at your link and the only suggestion is to serve it via http, but on my case the file is local. – nocrack May 25 '20 at 11:16
You can find the answer here [JSON Parse File Path](https://stackoverflow.com/questions/16991341/json-parse-file-path) But you will have this problem [CORS request not HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSRequestNotHttp?utm_source=devtools&utm_medium=firefox-cors-errors&utm_campaign=default) – 54ka May 25 '20 at 13:03
Thanks, I've done some research and did get this issue. It worked for a while and then stopped, very frustrating but I'm now using a python webserver to serve the page locally. I am encountering another issue though ``` – nocrack May 25 '20 at 22:44
How do I get the JSON out of this function ? It's not working. ``` function json(response) { return response.json() } function fetch_json() { fetch('http://localhost:8000/data.json', {mode: 'cors'}) .then(json) .then(function(data) { return JSON.stringify(data); }).catch(function(error) { console.log(error); }); } setInterval(x = fetch_json, 3000); ``` – nocrack May 25 '20 at 22:50

score 0 · Answer 2 · answered May 25 '20 at 05:26

1.Nodejs[Expressjs] [ server side ]
2.Fetch() and setInterval()[ client side ]

Assuming you have set up the the functions/code regarding the values changing in the initial json file.

What you can do is use nodejs and expressjs on the server side to send the data(maybe json format?) when pinged, and on the client side what you can do is create a function in js(maybe using fetch()) to ping that nodejs server every 'x' second's using setInterval() and retrieve the data parse it if it's json and change the data in table's.

Regarding the data in the tables, someone has already posted a solution for it.

Hope it helps!

I had a look at Express.js, it seems way too complicated for me, i'm not at that level :p I think I may have to stay away from node.js ^_^ Thanks for helping though — nocrack, May 25 '20 at 11:23

Dynamically import value from file

2 Answers2