将 Mongodb 查询数据传递给 Pug 的更好方法答案

【问题标题】：Better way of passing Mongodb query data to Pug将 Mongodb 查询数据传递给 Pug 的更好方法
【发布时间】：2020-10-10 02:26:52
【问题描述】：

我正在寻找一种在 webdev 应用程序中将数据传递到我的 index.js 文件的更好方法。注意我真的只有大约一个月的 webdev 经验，所以这可能是由于缺乏经验。这是我的软件流程：

我在呈现页面之前在路由处理程序中查询数据。然后我将这些数据传递给呈现的页面（注意我需要隐藏一些键值。但是聚合有效）。

exports.getPlotView = async(req, res, next) =>{ //获取要查询的模块，存储为var.testModel const qParse = new PlotQueryParse(req.query).parseObj(); // console.log(qParse) // const testblockName = qParse.testblock+"Name" ; // const limitName = qParse.limitname;

 const aggregationObj = {$match:
                             {'jobId':qParse.jobId, '<key2>':<val2>, "<key>":"<val>"}
                         }

 const data = await qParse.testModel.aggregate([aggregationObj]);
 console.log(data[0])
 const dataString = JSON.stringify(data[0]);
 //parse the url to make the query
 res.status(200).render('testPlotView', {
     pageHeader: "Test",
     subHead: "Test summary",
     IPn: "IPn",
     inData:dataString
 });

}

数据被传递给 pug 模板。模板将其用作隐藏元素

 extends base
 block content
     div.hide_data #{inData}

     div#dataviz

现在在我的 index.js 脚本（监听事件）中，数据从页面加载，然后存储用于后期处理。我想直接访问变量而不是隐藏它然后访问 DOM 元素。

window.addEventListener('load', function(){ 如果（window.location.href.includes（'testplotdata'））{ console.log('它是我的马里奥') //如果我们在测试绘图数据页面中，让我们绘图 var jsonObject = JSON.parse(document.querySelector('.hide_data').innerHTML); console.log(jsonObject['testData'])
```
 //post processing code ....

 }
```
})

再次，我想要一种方法来获取我的查询数据，而不是将其保存为 DOM 元素，然后在我的外部事件侦听器脚本中访问它。

谢谢！

【问题讨论】：

var myData 不包含 pug 预填充的所有数据吗？那为什么不能直接在你的JS脚本中访问呢？
@SonNguyen 嗨儿子。我在原始帖子中犯了一个错误。我已经编辑过了。我正在使用外部脚本来处理变量。有没有办法在我的外部处理脚本中直接访问通过渲染传入的值？
我发布了答案，因此您可以看到完全格式化的代码

标签： javascript mongodb express mongoose pug

【解决方案1】：

不要将数据存储在 HTML 中，而是将内联脚本添加到模板中以将其存储在全局变量中。所以将div.hide_data #{inData}替换为：

script.
   var inData = !{inData};   // inData passed by backend must be a string
                             // representing a valid JS object (JSON will do)

现在您只需在外部脚本中将 inData 作为现成的原生对象访问（您需要确保在上述脚本之后加载，将其放在 <body> 的末尾即可）

// No need: var jsonObject = JSON.parse(document.querySelector('.hide_data').innerHTML);
console.log(inData);    // Go ahead with the data

【讨论】：