如何讀取 JSON 文件並將值添加到 HTML 頁面

Question

編輯：

我只需要一種簡單的方法來讀取 html 頁面中的 json 文件，是否可以不使這個復雜化？ 我應該能夠在 html 頁面中的任何地方獲得關鍵參考，沒有任何限制。

結尾

I have html page that hosted on the heroku app and I'm trying to read the json file and display the values of json file to the html page, how would I do that?

這是我到目前為止所嘗試的。

我的學生 JSON 文件：

{ 
  name: 'John Doe',
  car: 'BMW X5' 
}

我的 HTML 頁面：

<html>
  <header>

    const fs = require('fs');

    let rawdata = fs.readFileSync('student.json');
    let student = JSON.parse(rawdata);
    console.log(student);
    console.log('my Name: ' + student.name);
    console.log('my Name: ' + student.car);

  </header>
  <body>
    <h1>My Name is: <%=name%> </h1>
    <p>My Car is: <%=car%></p>
  </body>
</html>

Answer 1

有多種方法可以將本地 JSON 文件加載到 web 頁面中，但只有幾種首選方法可以顯示加載的數據。

加載數據后，明智的做法是利用數據綁定或模板來呈現數據。

敲除數據綁定

 // Data from load var student = { name: 'John Doe', car: 'BMW X5' }; var StudentViewModel = function(studentData) { this.name = ko.observable(studentData.name); this.car = ko.observable(studentData.car); } ko.applyBindings(new StudentViewModel(student));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> <h1>My Name is: <span data-bind="text: name"></span></h1> <p>My Car is: <span data-bind="text: car"></span></p>

模板

 // Data from load var student = { name: 'John Doe', car: 'BMW X5' }; window.addEventListener('DOMContentLoaded', (event) => { let templateHtml = document.getElementById('student-template').innerHTML; let StudentTemplate = Handlebars.compile(templateHtml); document.body.insertAdjacentHTML('beforeend', StudentTemplate(student)); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.4.2/handlebars.min.js"></script> <script id="student-template" type="text/x-handlebars-template"> <h1>My Name is: {{name}}</span></h1> <p>My Car is: {{car}}</span></p> </script>

Answer 2

您必須添加腳本標簽。

<html>
  <header>
    <script>
      const fs = require('fs');

      let rawdata = fs.readFileSync('student.json');
      let student = JSON.parse(rawdata);
      console.log(student);
      console.log('my Name: ' + student.name);
      console.log('my Name: ' + student.car);
      document.getElementById("print-name").innerHTML = `My Name is: ${student.name}`;
      document.getElementById("print-car").innerHTML = `My Name is: ${student.car}`;
    </script>

  </header>
  <body>
    <h1 id="print-name"></h1>
    <p id="print-car"></p>
  </body>
</html>

Answer 3

有兩種方法可以將數據從服務器顯示到客戶端：

1) 您可以更改您的客戶端 JS 代碼以發出 http 請求以獲取 JSON，然后動態更新 HTML。 優點：簡單，缺點：附加 http 請求。

2) 或者您可以在服務器上編輯 HTML。 優點：避免了 http 請求，缺點：稍微復雜一些。

服務器節點代碼：

const http = require('http');

const myJson = require('student.json', 'utf-8');
let myHtml = require('fs').readFileSync('index.html', 'utf-8');

myHtml = myHtml.replace(/<%=(\w*)%>/, (_, key) => myJson[key]);

http.createServer((req, res) => {
    res.writeHead(200, {'Content-Type': 'text/html'});
    res.end(myHtml);
}).listen(8080);

如何讀取 JSON 文件並將值添加到 HTML 頁面

問題描述

2 個解決方案

解決方案1
0 2019-11-04 21:11:35

敲除數據綁定

模板

解決方案2
-1 2019-11-04 20:23:41

解決方案3
-2 2019-11-04 20:27:53

如何讀取 JSON 文件並將值添加到 HTML 頁面

問題描述

2 個解決方案

解決方案1 0 2019-11-04 21:11:35

敲除數據綁定

模板

解決方案2 -1 2019-11-04 20:23:41

解決方案3 -2 2019-11-04 20:27:53

解決方案1
0 2019-11-04 21:11:35

解決方案2
-1 2019-11-04 20:23:41

解決方案3
-2 2019-11-04 20:27:53