如何读取 JSON 文件并将值添加到 HTML 页面
[英]How to read JSON file and add the values to HTML page
问题描述
EDIT:
编辑：
I just need a simple way to read the json file in the html page, can it be possible without making this complicated?我只需要一种简单的方法来读取 html 页面中的 json 文件，是否可以不使这个复杂化？ I should be able to have key reference anywhere in the html page without any limitations.我应该能够在 html 页面中的任何地方获得关键参考，没有任何限制。
END结尾
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? 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?
Here is what I have tried so far.这是我到目前为止所尝试的。
My student JSON file:我的学生 JSON 文件：
{
name: 'John Doe',
car: 'BMW X5'
}
My HTML page:我的 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>
2 个解决方案
解决方案1
0 2019-11-04 21:11:35
There are various ways to load a local JSON file into your web page, but only a few preferred ways to present your loaded data.有多种方法可以将本地 JSON 文件加载到 web 页面中，但只有几种首选方法可以显示加载的数据。
- Fetching local JSON获取本地 JSON
- Load local JSON file into variable将本地 JSON 文件加载到变量中
- How to read an external local JSON file in JavaScript?如何在 JavaScript 中读取外部本地 JSON 文件？
Once you load your data, it is wise to either utilize data-binding or templates to present your data.加载数据后，明智的做法是利用数据绑定或模板来呈现数据。
Data-binding with knockout敲除数据绑定
// 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>
Templates模板
// 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>
解决方案2
-1 2019-11-04 20:23:41
You have to add script tags.您必须添加脚本标签。
<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>
解决方案3
-2 2019-11-04 20:27:53
There are 2 approaches to displaying data from a server to the client:有两种方法可以将数据从服务器显示到客户端：
1) You can change your client JS code to make an http request to fetch the JSON and then dynamically update the HTML. 1) 您可以更改您的客户端 JS 代码以发出 http 请求以获取 JSON，然后动态更新 HTML。 Pro: simple, Con: additional http request.优点：简单，缺点：附加 http 请求。
2) Or you can edit the HTML on the server. 2) 或者您可以在服务器上编辑 HTML。 Pro: avoids http request, Con: slightly more complex.优点：避免了 http 请求，缺点：稍微复杂一些。
Server Node code:服务器节点代码：
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);
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.