亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

從文件動態導入值

從文件動態導入值

三國紛爭 2022-09-02 16:56:17
我需要一些幫助來動態加載模板中的數據作為文件更改。以下是數據和代碼的示例我有一個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代碼在現實中有點復雜,但是有沒有一種相對簡單的方法來循環訪問數據,而不是我必須手動編寫所有內容?喜歡引入“數據中的前天”?感謝您的幫助,非常感謝!
查看完整描述

2 回答

?
嚕嚕噠

TA貢獻1784條經驗 獲得超7個贊

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

假設您已經設置了有關初始 json 文件中更改的值的函數/代碼。

你可以做的是在服務器端使用nodejs和expressjs在ping時發送數據(也許是json格式?),在客戶端,你可以做的是在js中創建一個函數(也許使用fetch())來ping該nodejs服務器每隔“x”秒使用setInterval()并檢索數據解析它,如果它是json并更改表中的數據。

關于表中的數據,有人已經發布了解決方案。


查看完整回答
反對 回復 2022-09-02
?
千巷貓影

TA貢獻1829條經驗 獲得超7個贊

我希望我有幫助


網頁:


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


查看完整回答
反對 回復 2022-09-02
  • 2 回答
  • 0 關注
  • 128 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號