【问题标题】:Node.js rendering variables in JadeJade 中的 Node.js 渲染变量
【发布时间】:2015-11-19 00:53:15
【问题描述】:

我想查看我视图中的所有 URL,但我收到 #{data.id} Cannot read property 'id' of undefined 错误。

我想创建一个循环并查看我拥有的所有视频。

app.js

app.get('/you', function(req,res) {
    youtube.where('id', '<', '5689').fetchAll().then(function(data) {
        res.render('youtube', {
            mi : data
        });
    });
});

这是给定 ID 的示例输出(我将 res.render 更改为 res.send 以测试我的查询,所以它可以工作)

[
    {
        "id": 442,
        "channel_name": "channelNameredacted",
        "video_url": "videoURlRedacted",
        "video_title": "redacted",
        "status": 1,
        "date": "redacted"
    }
]

youtube.jade

假设我想输出视频 ID。

html
  head
  body
    each data in mi
      #{data.id}

【问题讨论】:

  • 我可以看到该视图发生此错误的唯一方法是youtube 提供的data 在集合中包含undefined 元素-[ { id: 442 }, undefined ]。如果在each下面加上条件if data,那么是否成功?
  • 旁注:在行首使用#{...} 会呈现一个动态命名的元素——&lt;442&gt;&lt;/442&gt;。我猜这可能不是你想要的。要将data.id 呈现为文本,请在其前面添加一个元素或a pipe - div #{data.id}| #{data.id}
  • 感谢您的建议,这很有帮助。

标签: node.js express pug


【解决方案1】:

这对我有用 -

var jade = require('jade'),
  fs = require('fs');

var data = {
  mi: [
    {
      "id": 442,
      "channel_name": "channelNameredacted",
      "video_url": "videoURlRedacted",
      "video_title": "redacted",
      "status": 1,
      "date": "redacted"
    }
  ]
};

fs.readFile('youtube.jade', 'utf-8', function(error, source){
  var html = jade.render(source, data);
  console.log(html)
});

youtube.jade

html
  head
  body
    ul
      each data in mi
        li= data.id

输出

<html><head></head><body><ul><li>442</li></ul></body></html>

【讨论】:

    【解决方案2】:

    我是这样解决的。

    app.get('/ind', function(req,res) {
        youtube.where('id', '<', '100').fetchAll().then(function(data) {
            data = data.toJSON();
            res.render('youtube', {
                mi : data
            });
        });
    });
    

    youtube.jade

    html
      head
      body
        ul
          for m in mi
            li #{m.id}
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2014-06-01
      • 2012-06-26
      • 1970-01-01
      • 1970-01-01
      • 2011-09-05
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多