时间戳

首页 > 解决方案 > 'for each' 没有在 PUG 中打印出列表 - 请解释一下？

javascript - 'for each' 没有在 PUG 中打印出列表 - 请解释一下？

问题描述

我正在尝试遍历通过的数组

res.render('index', { 'listItems': list_items });

哈巴狗

  div#toDoList
    .col-1
      h2#user_name_heading=userName
      h2#user_date_signup_heading=userDate
      h2 Today's To-do List
      form#toDoList_form(method="POST" action="/")
        input(type='text' id="list_item" name='list_item' autofocus required placeholder="task")
        button(type='submit') ADD
    div.col-2
      .toDoListWrap
        ul
          script.
            each list in listItems 
              li=list

index.js

var express = require('express');
var router = express.Router();

let users = [];
let list_items = ['jajajajaa'];



function addNewUser(data) {
  try {
    users.push(
      {
        "fname":data.fname,
        "list_name": data.list_name,
        "list_date": data.list_date
      }  
    );  
  } catch(e) {
    console.log("Failed to add user ", e);
      throw e;
  }

}


/* GET home page. */

router.get('/', function(req, res, next) {

  res.render('index', { title: 'Express' });
});

router.post('/', function(req, res, next) {
  // check post valued are true
  if(req.body.fname && req.body.list_name && req.body.list_date) {
    try {
       addNewUser(req.body);
       console.log(res.headersSent);
       res.json({
         "message":"Successfully signed up!",
         "userName": req.body.fname,
         "userDate": req.body.list_date
        });
    } catch(e){
     // signup failed
      res.json(res.status(status).json(obj), "Sign up failed...");
    }
   }

   if(req.body.user && req.body.list_item) {
    list_items.push(req.body.list_item);
    console.log(list_items);

    // res.json({ "list_items":list_items});
    res.render('index', { 'listItems': list_items });
   }
});

module.exports = router;

console.log 在 index.js 中打印以下内容，证明 list_items 中有元素：

[ 'jajajajaa', 'f,ksha' ]

浏览器记录此错误：

SyntaxError：意外令牌：标识符

标签： javascriptpug

解决方案

你的问题是script.标签。这告诉 pug<script></script>在页面中输出一个标签，然后在它下面输出原始内容。

只需取出script.标签，模板中只需要这个：

each list in listItems 
  li= list

这将按预期循环并<li>为 listItems 中的每个条目创建元素。

您发布的代码将输出以下内容：

<script>
  each list in listItems 
    li=list
</script>

当然，您的浏览器无法理解 pug 代码，该文本作为 JavaScript 无效。

我了解通过解决此问题，您会收到一个新错误。

这是一个复制您的模板的代码笔，对我来说效果很好。这是哈巴狗代码：

- var listItems = [ 'jajajajaa', 'f,ksha' ];

ul
  each list in listItems 
    li= list

现在让我们使用脚本标签来解决这个次要问题。在您的模板中添加此代码，以便将 listItems 的值输出到浏览器控制台：

script.
  console.log(!{JSON.stringify(listItems)});

该!{}序列输出一个无缓冲的代码表达式。stringify 将在服务器上呈现为有效的 JavaScript 值，并将测试 listItems 的值，因为它出现在 pug 模板中。

推荐阅读