Javascript 如何读取JSON文件并将值添加到HTML页面_Javascript_Html_Node.js

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

javascript html node.js

Javascript 如何读取JSON文件并将值添加到HTML页面,javascript,html,node.js,Javascript,Html,Node.js,编辑：我只需要一个简单的方法来读取html页面中的json文件，这能不能不让它变得复杂呢？我应该能够在html页面的任何地方无任何限制地使用键引用结束我有一个托管在heroku应用程序上的html页面，我正在尝试读取json文件，并在html页面上显示json文件的值，我该怎么做以下是我到目前为止所做的尝试我的学生JSON文件： { name: 'John Doe', car: 'BMW X5' } 我的HTML页面： <html> <header&

编辑：

我只需要一个简单的方法来读取html页面中的json文件，这能不能不让它变得复杂呢？我应该能够在html页面的任何地方无任何限制地使用键引用

结束

我有一个托管在heroku应用程序上的html页面，我正在尝试读取json文件，并在html页面上显示json文件的值，我该怎么做

以下是我到目前为止所做的尝试

我的学生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>

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

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文件加载到web页面中，但只有几种首选方法可以显示加载的数据

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

带敲除的数据绑定 //来自加载的数据 var学生={ 姓名：“约翰·多伊”，汽车：“宝马X5” }; var StudentViewModel=函数studentdata{ this.name=ko.observestudentdata.name； this.car=ko.observestudentdata.car； } ko.applybindingsnewstudentview模型学生；我的名字是：

我的车是：

你在控制台里看到了什么？您是否收到任何错误？我在chrome中没有看到任何控制台日志，只是您知道我在同一页面上有JS和html。我更新了代码。fs是浏览器中不可用的NodeJS API。改为使用fetch异步加载文件，然后使用其内容。fetch/path-to-file.json.thenr=>r.json.thendata=>{//在此处使用解析的json数据}感谢您展示了首选方式，我有个问题，js代码所在的x-Handlebar-template是什么？@NickKahn脚本包含在HTML的顶部。它只是许多模板库中的一个。在我的情况下，我有一个单独的json文件，您如何从该文件加载该数据？嘿，我发现的另一件事是，您必须在标记中包含它吗？如果答案是肯定的，那么这对我来说将不起作用，因为我应该能够引用HTML中的任何地方page@NickKahn这很复杂，我相信我们可以用更干净的方式来完成。