时间戳

首页 > 解决方案 > 将数据从 JSON 文件传递​​到 html

javascript - 将数据从 JSON 文件传递​​到 html

问题描述

我编写了以下 Server.js 代码

var http = require('http'); // Import Node.js core module

var GreensKiosk = require('./GreensKiosk');
var server = http.createServer(function (req, res) { // create web server
// Set CORS headers
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Request-Method', '*');
res.setHeader('Access-Control-Allow-Methods', 'OPTIONS, GET');
res.setHeader('Access-Control-Allow-Headers', '*');

if (req.method === 'OPTIONS') {
    res.writeHead(200);
    res.end();
    return;
}

if (req.url == '/') { // check the URL of the current request
    // set response header
    res.writeHead(200, { 'Content-Type': 'text/html' });
    // set response content
    res.write('<html><body><p>Greens Kiosk API.</p></body></html>');
    res.end();
}
else if (req.url == "/products") { // check the URL of the current request
    res.writeHead(200, { 'Content-Type': 'application/json' });
    res.write(JSON.stringify(GreensKiosk.getItems()));
    res.end();
}
else if (req.url == "/products/fruits") {
    res.writeHead(200, { 'Content-Type': 'application/json' });
    res.write(JSON.stringify(GreensKiosk.getItems('fruits')));
    res.end();
}
else if (req.url == '/products/vegetables') {
    res.writeHead(200, { 'Content-Type': 'application/json' });
    res.write(JSON.stringify(GreensKiosk.getItems('vegetables')));
}
});
 server.listen(3000);

我有另一个 GreensKiosk.js 文件，其中包含类似这样的项目数组

let products = [
{
 name: 'Mangoes',
 category: 'fruits'
},
{
 name: 'Apples',
 category: 'fruits'
},
{
 name: 'Bananas',
 category: 'fruits'
},
{
 name: 'Oranges',
 category: 'fruits'
},
{
 name: 'Grapes',
 category: 'fruits'
},
{
 name: 'Kales',
 category: 'vegetables'
},
{
 name: 'Onions',
 category: 'vegetables'
},
{
 name: 'Tomatoes',
 category: 'vegetables'
},
{
 name: 'Cabbages',
 category: 'vegetables'
}
]

我想根据 Server.js 上规定的 URL 将项目解析为 HTML 文件，我正在研究列表性质的 html。以这种方式，为每组列表显示项目。

我是 Node js 的新手，我真的很想对此有一些见解

    <ul id="fruList">
        <!--fruits here-->
    </ul>
    <h3>vegetables</h3>
    <ul id="vegList">
        <!--vegetables here-->
    </ul>

标签： javascriptnode.js

解决方案

如果你知道你将需要这个文件，那么你可以同步读取它，如下所示：

var items = require('./items.json');

如果您需要很多不同的列表，并且您并不总是需要此列表，则需要将数据分离到单独的 rest api 中。但是让我们假设您不需要单独的 rest api。如果要异步执行，请使用 fs 和 fs.readFile。顺便说一句，文件中的数据不是 json，它只是一个普通的 ol js 对象。在 json 中，属性名称将带有双引号。要将您的 json 数据转换为 js 对象，请使用 var arrItems = JSON.parse(items)。要按类型分隔项目，请使用：

var fruits = arrItems.filter(i => i.category === 'fruits');

您可能想研究像 mustache 这样的模板库，它可以帮助您将数组转换为 html。

推荐阅读