如何读取 JSON 文件并将值添加到 HTML 页面答案

【问题标题】：How to read JSON file and add the values to HTML page如何读取 JSON 文件并将值添加到 HTML 页面
【发布时间】：2020-03-01 04:16:18
【问题描述】：

编辑：

我只需要一个简单的方法来读取html页面中的json文件，能不让这个复杂吗？我应该能够在 html 页面的任何地方都没有任何限制地拥有关键引用。

结束

我有托管在 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>

【问题讨论】：

您在控制台中看到了什么？您收到任何错误吗？
我在 chrome 中没有看到任何控制台日志，只是你知道我在同一页面上有 JS 和 html。
我更新了代码。
fs 是浏览器中不可用的 NodeJS API。使用fetch 异步加载文件，然后使用其内容。 fetch("/path-to-file.json").then(r => r.json()).then(data => { // use the parsed json data here })

标签： javascript html node.js

【解决方案1】：

有多种方法可以将本地 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>

【讨论】：

感谢您展示首选方式，我有疑问，x-handlebars-template 是什么js 代码所在的位置？
@NickKahn 该脚本包含在 HTML 的顶部。它只是众多模板库之一。
在我的情况下，我有一个单独的 json 文件，您将如何从文件中加载该数据？
嘿，我发现的另一件事是，你必须在<head> 标签内有这个<script id="student-template" type="text/x-handlebars-template"> 吗？如果答案是肯定的，那么这对我不起作用，因为我应该能够引用 HTML 页面中的任何地方
@NickKahn 在正文中，最好靠近结尾。

【解决方案2】：

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

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

【讨论】：

这很复杂，我相信我们可以用更干净的方式完成。