Question

我需要一些帮助，以在文件更改时动态加载模板中的数据。以下是数据和代码的示例

我有一个json文件：

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

此文件中的值定期更改（每2-3秒）

我有一个HTML文件

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

而javascript.js是：

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

第一个问题是：随着值的变化，如何才能将数据动态加载到模板中？ jQuery的？ node.js？我不是新手，所以需要最简单的解决方案。

其次，实际上html代码要复杂一些，但是有没有一种相对简单的方法来遍历数据，而不是我必须手动编写所有内容？像引入“数据中的foreach”？

非常感谢您的帮助！

Answer 1

希望我能对您有所帮助

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

Answer 2

1.Nodejs [Expressjs] [服务器端]
2.Fetch（）和setInterval（）[客户端]

假设您已经设置了有关初始json文件中的值更改的函数/代码。

您可以做的是在ping操作时在服务器端使用nodejs和expressjs发送数据（也许是json格式？），而在客户端，您可以做的是在js中创建一个函数（也许使用fetch（））使用setInterval（）每隔“ x”秒对该nodejs服务器执行ping操作，并检索解析为json的数据并更改表中的数据。

关于表中的数据，有人已经发布了解决方案。

希望有帮助！

从文件动态导入值

2 个答案: