时间戳

首页 > 解决方案 > 从文件中动态导入值

javascript - 从文件中动态导入值

问题描述

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

我有一个 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？节点.js？我需要最简单的解决方案，因为我不是新手。

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

感谢您的帮助，非常感谢！

标签： javascripthtmljquerynode.js

解决方案

我希望我有帮助

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

推荐阅读