时间戳

首页 > 解决方案 > 如何将数据从服务器代码呈现到 ejs 模板？

node.js - 如何将数据从服务器代码呈现到 ejs 模板？

问题描述

我是 node js 和 ejs 的新手。现在我要将数据从服务器代码传递到 ejs 模板。我在 mysql 上创建了 db，然后使用 sequelize 通过控制器获取数据。

// faq.ejs
 <li>
    <div class="title">js data</div>
        <ul>
           <% if (data) { %>
               <li><%= data[0].title %></li>  
           <% } %>

        </ul>
 </li>

// routes/index.js
const category = require('../controllers/controller');

router.get('/ko/faq', function(req, res, next) {
    res.render('ko/faq', { 
        data: category.getAll() // 
    });
});

// controller.js
exports.getAll = (req, res) => {
    Category.findAll()
    .then( async (data) => {
      var parentArr = [];
      var childArr = [];
      for(let i = 0; i < data.length; i++) {
        if(data[i].parent_id === null) {
          data[i]['dataValues']["children"] = [];
           parentArr.push(data[i]['dataValues']);
          //console.log(parentArr)
        } else {
           childArr.push(data[i]['dataValues']);
           // console.log(childArr)
        }}
      for(let i = 0; i < parentArr.length; i++) {
        for(let j = 0; j < childArr.length; j++) {
          if(parentArr[i].id === childArr[j].parent_id) {
           await parentArr[i].children.push(childArr[j]);  
          }
        }    
      }
        console.log(parentArr)
        res.render('ko/faq', { data: parentArr });
    })
    .catch(err => {
        res.status(500).send("Error -> " + err)
      })
    };

为了将数据制作成树形结构，我制作了该代码（这并不重要）。

如果我在 index.js 中的数据上放置一个字符串，它会在屏幕上很好地呈现。但是问题是parentArr在控制器中定义的不是来的。

当我路由到 localhost 上的 /ko/faq 页面时，出现错误。

Unhandled rejection TypeError: Cannot read property 'status' of undefined
    at /Users/daye.k/repo/dream-home/controllers/ko_cat.controller.js:60:13
    at tryCatcher (/Users/daye.k/repo/dream-home/node_modules/bluebird/js/release/util.js:16:23)
    at Promise._settlePromiseFromHandler (/Users/daye.k/repo/dream-home/node_modules/bluebird/js/release/promise.js:547:31)
    at Promise._settlePromise (/Users/daye.k/repo/dream-home/node_modules/bluebird/js/release/promise.js:604:18)
    at Promise._settlePromise0 (/Users/daye.k/repo/dream-home/node_modules/bluebird/js/release/promise.js:649:10)
    at Promise._settlePromises (/Users/daye.k/repo/dream-home/node_modules/bluebird/js/release/promise.js:725:18)
    at _drainQueueStep (/Users/daye.k/repo/dream-home/node_modules/bluebird/js/release/async.js:93:12)
    at _drainQueue (/Users/daye.k/repo/dream-home/node_modules/bluebird/js/release/async.js:86:9)
    at Async._drainQueues (/Users/daye.k/repo/dream-home/node_modules/bluebird/js/release/async.js:102:5)
    at Immediate.Async.drainQueues [as _onImmediate] (/Users/daye.k/repo/dream-home/node_modules/bluebird/js/release/async.js:15:14)
    at processImmediate (internal/timers.js:456:21)

我认为问题出在“异步”上，所以我放了等待/异步。但它也不能很好地工作。

帮助赞赏。

标签： node.jsasynchronoussequelize.jsejs

解决方案

你是对的，问题是 getAll 是异步的。您可以使用

  // in controller
  // routes/index.js
  const category = require('../controllers/controller');

  router.get('/ko/faq', function(req, res, next) {
      // res.render('ko/faq', { 
      //     data: category.getAll() // 
      // });
      // all response handling done in getAll()
      category.getAll(req, res);
  });






 // controller.js
    exports.getAll = (req, res) => {
    Category.findAll()
    .then( (data) => {
      var parentArr = [];
      var childArr = [];
      for(let i = 0; i < data.length; i++) {
        if(data[i].parent_id === null) {
          data[i]['dataValues']["children"] = [];
           parentArr.push(data[i]['dataValues']);
          //console.log(parentArr)
        } else {
           childArr.push(data[i]['dataValues']);
           // console.log(childArr)
        }}
      for(let i = 0; i < parentArr.length; i++) {
        for(let j = 0; j < childArr.length; j++) {
          if(parentArr[i].id === childArr[j].parent_id) {
           parentArr[i].children.push(childArr[j]);  
          }
        }    
      }
        console.log(parentArr)
        res.render('ko/faq', { data: parentArr });
    })
    .catch(err => {
        res.status(500).send("Error -> " + err)
      })
    };

推荐阅读