json - 如何从 JSON 文件中获取价值并在网站上显示
问题描述
我正在尝试创建一个 Node.JS 网站。我想从 json 文件中检索数据以正确显示在网站上。我该怎么做。我是 Node.JS 的新手,不明白我在哪里编写脚本。
{
"id": "dfd9722a-3ca3-48e7-af2b-633e33d626b5",
"clientId": "4ef8da99-07ee-4f40-8ea5-be13f4592a62",
"source": "D346618B-2C9F-4765-940A-B9369BD67114",
"destination": "",
"priority": "MEDIUM",
"reliability": "BEST_EFFORT",
"eventTime": 1535036080788,
"eventTimeAsString": "2018-08-23T14:54:40Z",
"sender": "",
"type": "DATA",
"properties": {},
"direction": "FROM_DEVICE",
"receivedTime": 1535036083635,
"receivedTimeAsString": "2018-08-23T14:54:43Z",
"payload": {
"format": "urn:oracle:hospitality:lock:attributes",
"data": {
"locked": false,
"Source_FirstName":"John",
"Source_LastName":"Dunbar"
}
}
}
我试图让John (source_firstname) Dunbar (source_lastname) 出现在我的网站上。我正在使用 Node.JS、express 和车把(作为我的模板引擎)。
<div id="body-container">
<div id="header">
<div id="logo-content">
<div id="logo"></div>
</div>
<div id="welcome">
<p>Welcome {{!-- <-- Here goes JSON values }} to Node Park</p>
</div>
</div>
{{!-- end of header --}}
这是我的 Node.JS 代码
const express = require('express');
const path = require('path');
const hbs = require('express-handlebars');
// Init App
const app = express();
// Load View Engine
app.engine('hbs', hbs({extname: 'hbs', defaultLayout: 'layout',
layoutsDir: __dirname + '/views/layouts/'}));
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'hbs');
app.use(express.static(__dirname+'/public'));
// Home Route
app.get('/', function(req, res){
res.render('index', {
title: 'Node.JS',
hotel: 'NODEMON'
});
});
// Start Server
app.listen(5000, function(){
console.log('Port 5000 open for business.');
});
解决方案
您可以在您的服务中要求该json
文件。
//If the json file is in the same root
const json = require("./data.json");
app.get('/', function(req, res){
res.render('index', {
title: 'Node.JS',
hotel: 'NODEMON',
firtsName : json.payload.data.Source_FirstName,
lastName : json.payload.data.Source_LastName
});
});
并访问html 中的firtsName
andlastName
<div id="body-container">
<div id="header">
<div id="logo-content">
<div id="logo"></div>
</div>
<div id="welcome">
<p>Welcome {{ firtsName }} {{ lastName }} to Node Park</p>
</div>
</div>
{{!-- end of header --}}
推荐阅读
- python - 我试图在函数中返回一个随机生成的数字,这样我就可以用它做一些数学运算
- sql - 图形或关系数据库更适合这种树结构?
- azure - 通过 Azure 逻辑应用中的循环传递文件路径
- arrayfire - Arrayfire:如何通过另一个数组的元素对数组进行采样?
- assembly - 用该行的功能注释复制循环的每一行
- javascript - 如何在 ReactJS 的三元运算符中使用 OR 条件
- visual-studio - 是否可以使用 Visual Studio 进行 MS Dynamics 365 性能测试?
- google-sheets - 如何将条件格式应用于命名范围?
- amazon-web-services - 无法从 aws 组织中删除用户
- java - ArrayAdapter 无法正常工作,仅显示 1 项