如何从 JSON 文件中获取价值并在网站上显示答案

【问题标题】：How to get value from JSON File and display on Website如何从 JSON 文件中获取价值并在网站上显示
【发布时间】：2019-02-05 12:48:09
【问题描述】：

我正在尝试创建一个 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 node.js express handlebars.js

【解决方案1】：

您可以在您的服务中要求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和lastName

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

【讨论】：

由于某种原因，它返回“TypeError: Cannot read property 'data' of undefined”，知道为什么吗？
检查输出@FreshOceans
我发现了问题，我的 json 数据在一个数组中。我删除了 []，它现在可以工作了。或者我可以添加 json[0].payload.data.Source_LastName。谢谢！！
请勿发文字图片(meta.stackoverflow.com/questions/285551/…)
知道了@Nic3500

【解决方案2】：

const json = require('./your.json');

// Home Route
app.get('/', function(req, res){
  res.render('index', {
    title: 'Redwood Welcome',
    hotel: 'Redwood Hotel',
    source_firstname: json.source_firstname,
    source_lastname: json.source_lastname,
  });
});

<div id="welcome">
        <p>Welcome {{source_firstname}} {{source_lastname}} to Node Park</p>
    </div>

【讨论】：