如何使用Express和MySQL將SQL查詢結果插入帕格模板？

Question

我正在編寫一個簡單的Web應用程序，該應用程序最初將在登錄頁面時顯示公交路線編號和名稱列表。我用Express和Pug使用MySQL。這裏是服務器端的代碼與來自console.log前幾個結果一起：

const express = require('express'); 
const pug = require('pug'); 
const bodyParser = require('body-parser'); 
const path = require('path'); 
const mysql = require('mysql'); 

require('dotenv').config(); 

const app = express(); 

app.set('views', path.join(__dirname, './views')); 
app.set('view engine', 'pug'); 
app.use(express.static(path.join(__dirname, 'public'))); 

const connection = mysql.createConnection({ 
    host: 'localhost', 
    user: 'coolio', 
    password: process.env.DB_PASS, 
    database: 'routes' 
}); 

app.get('/', function(req, res) { 
    const routesQuery = "SELECT route, route_name FROM routes"; 
    let routeObj = {}; 
    connection.query(routesQuery, function(err, results) { 
    if (err) throw err; 
    for (let i = 0; i < results.length; i++) { 
     routeObj.route = results[i].route; 
     routeObj.routeName = results[i].route_name; 
     console.log(routeObj); 
    } 
    }); 
}); 

app.listen(3000, function() { 
    console.log("Listening.."); 
}); 


Listening.. 
{ route: 1, routeName: 'Metric/South Congress' } 
{ route: 2, routeName: 'Rosewood' } 
{ route: 3, routeName: 'Burnet/Manchaca' } 
{ route: 4, routeName: 'Montopolis' } 
{ route: 5, routeName: 'Woodrow/South 5th' } 
{ route: 6, routeName: 'East 12th' } 

到目前爲止，我一直無法弄清楚如何獲得的結果console.log顯示加載時在頁面上顯示。

把res.render('index', routeObj);其中console.log引發關於標題的多個錯誤（Error: Can't set headers after they are sent.）。但是我無法訪問for循環之外的對象信息;試圖使用routeObj對象呈現我的索引頁面只是顯示一個空白頁面。

這裏是哈巴狗HTML：

html 
    head 
    link(rel='stylesheet', type='text/css', href='stylesheets/normalize.css') 
    link(rel='stylesheet', type='text/css', href='stylesheets/style.css') 
    body 
    div.container 
     div#test 
     p=routeObj 

我似乎更接近時，我包括res.render('index', {routeObj});的換loop--頁上，然後至少顯示[object Object]後。

如何獲取我的console.log中顯示的數據以顯示在我的模板中？

Answer 1

這是因爲帕格調用Object的toString()功能：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/toString

它返回[object Object]。

的選項有：

1. 覆蓋或實現自己的toString()函數輸出你想要什麼。
2. 訪問routeObj對象上的特定屬性。
實施例的

2：

const routeObj = { 
    name: 'foo' 
} 

... 

html 
    head 
    link(rel='stylesheet', type='text/css', href='stylesheets/normalize.css') 
    link(rel='stylesheet', type='text/css', href='stylesheets/style.css') 
    body 
    div.container 
     div#test 
     p=routeObj.name 

Answer 2

您需要循環使用for x in y或哈巴狗文件

在這裏的任何其它循環方法的結果是一個例子

app.get('/details', function(req, res) { 

connection.query('SELECT * From `employees`', function (error, results, fields) { 
if (error) throw error; 
console.log('The solution is: ', results); 

    res.render('details', { 
    title: 'Details - Pug ExpressJS NodeJS Tutorial', 
    employees: results 
    }); 

}); 

}); 

在帕格文件中

for employee in employees 
    tr.odd(role='row') 
     td #{employee.name} 
     td #{employee.position} 
     td #{employee.office} 
     td.dt-body-right.sorting_1 #{employee.age}