如何将 JSON 数据从 pug 发送到 javascript答案

【问题标题】：How send JSON data from pug to javascript如何将 JSON 数据从 pug 发送到 javascript
【发布时间】：2018-03-22 16:09:45
【问题描述】：

我以这种方式将一个 JSON 对象从我的 mangoDB 发送到 html 页面：

router.get('/index', function (req, res, next) {
    GenoverseInstance.find({name: req.query.name}, function (err, instance) {
        if (err) {
            res.send(err);
            throw err;
        } else if (instance.length) {
            console.log('Object loaded');
            // object of the user
            console.log(instance[0]);
            res.render('index', {object: instance[0]});
        }
    });

});

我可以像这样在 html 中使用它：

.containerCustom
  .head
    h1
      | #{object.name}

但我不能在我的 html 页面中包含的 javascript 中使用它：脚本。

alert(object.name);

这怎么可能？

谢谢

【问题讨论】：

我没用过mangoDB，但听起来很好吃
从 HTML 到 JavaScript？！不知道你的意思。
创建一个单独的路由，只返回 json，然后使用客户端 javascript 获取它。
浏览器的控制台有什么要说的吗？
有一个很好的解释你在问什么here。

标签： javascript node.js html

【解决方案1】：

object 仅在您的 Pug 模板中定义，用于生成 HTML，然后发送到浏览器。生成 HTML 后，这个object 被消耗并消失。与页面的JS代码无关。

如果您希望这些数据在 JS 代码中可用，那么：从生成的页面，向您的服务器发出另一个 (Ajax) 请求，请求同样的数据。

【讨论】：

【解决方案2】：

这是因为您的响应保存在本地范围内，并且您没有将该响应传递到您可以从外部访问它的全局范围。我只为你制作 1 个 sn-p。检查一下，我希望这对你有帮助。另外，如果您不了解范围，我建议您阅读一些文章，例如 w3school 或 this。另外，如果您不知道什么是异步请求，也请阅读它们。

/* ############################### */

// So if you want to access response from your request you must save them or pass them
// This is one way to have access to your response outside by saving to global variable

// Creating variable where we will hold our response from request

// Global scope start here
var data = '';

function getResponse(res) {
  // Here is opened Local scope where u have no access from outside

  // and now here u have the response from your request
  console.log('function data', res);
  
  // you can do stuff here with that response
  data = res;
}

setTimeout(function() {
  var response = [1,2,3];
  // Now here we will save response to our data so we can access it from global scope
  // But remember that is async request
  data = response;
  
  console.log("local scope response ", response);

}, 1000);


setTimeout(function() {

  console.log("global scope data", data); // here data hold ur response data from your async request

}, 1100);



/* ############################### */
// This is another way to have access to your response outside by passing it to function
function getResponse(res) {
  // and now here u have the response from your request
  console.log('function data', res);
  
  // you can do stuff here with that response
  data = res;
}

setTimeout(function() {
  var response = [1,2,3];

  // other way pass response to your function and do what u want with that data
  getResponse(response);
  
  console.log("bracked scope response ", response);
}, 1000);

【讨论】：

【解决方案3】：

如 cmets 所示，此链接非常有用 reference，感谢 @IsaacGodinez。可以使用这行代码来获取整个对象：

var data = !{JSON.stringify(object).replace(/<\//g, '<\\/')};

或者如果你只想要对象的一个元素：

var name = "#{object}";

【讨论】：