1. 首页
  2. 问题列表
  3. 将数据从JSON文件传递到html
提问者：小点点

将数据从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>

共1个答案

匿名用户

如果您知道您需要这个文件，那么您可以同步读取它，如:

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。

相关问题