前端之家

  1. 首页
  2. 问答

如何读取JSON文件并将值添加到HTML页面 具有剔除的数据绑定模板

• 问答

编辑：

我只需要一种简单的方法来读取html页面中的json文件，就可以做到而无需使其变得复杂吗？我应该能够在html页面的任何地方获得关键参考，而没有任何限制。

END

我在heroku应用程序上托管了html页面，并且我正在尝试读取json文件并将json文件的值显示到html页面，我该怎么做？

这是我到目前为止尝试过的。

我的学生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>
kentkent33 回答：如何读取JSON文件并将值添加到HTML页面 具有剔除的数据绑定模板

有多种方法可以将本地JSON文件加载到您的网页中，但是只有少数几种首选的方法可以显示加载的数据。

加载数据后，明智的做法是使用数据绑定或模板来呈现数据。

具有剔除的数据绑定

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

,

有两种方法可以显示从服务器到客户端的数据：

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);
htmljavascriptnode.js
本文链接：https://www.f2er.com/3164035.html

大家都在问