在AJAX调用后（使用ExpressJS）在EJS模板中循环遍历数组的正确方法是什么？ [英] What is the proper way to loop through an array in an EJS template after an AJAX Call (using ExpressJS)?

问题描述

因此，我尝试使用 request 模块/程序包遍历从http调用使用的对象数组到内部API。到目前为止，我已经能够从API取回数据并在页面上显示完整的对象。我想在我的页面上显示它，并使用EJS模板系统遍历它。我知道我可以将AngularJS用于前端，但是我想看看我可以只使用服务器端。

So I am trying to loop through an array of objects that I got from an http call using to my internal API using the request module/package. So far, I am able to get my data back from the API and DISPLAY the full object on my page. I would like to display it on my page and loop through it using the EJS templating system. I know I can use AngularJS for frontend stuff, but I would like to see how far I can go with only server-side.

下面是我的代码：

server.js

// Prepend /api to my apiRoutes
app.use('/api', require('./app/api'));

api.js

var Report = require('./models/report');
var express  = require('express');
var apiRoutes = express.Router();

apiRoutes.route('/reports', isLoggedIn)  
     .get(function (req, res,next) {
          // use mongoose to get all reports in the database
          Report.find(function (err, reports) {
                 // if there is an error retrieving, send the error.
                 // nothing after res.send(err) will execute
                 if (err)
                    return res.send(err);
                    res.json(reports);
          });
    });

routes.js

var User = require('./models/user');
var request = require('request');
module.exports = function (app, passport) {

    app.get('/reports', isLoggedIn, function (req, res) {
        res.render('pages/new-report.ejs', {
            user: req.user,
            title:'New Report'
        });
    });


    request({
        uri:'http://localhost:2016/api/reports',
        method:'GET'
    }).on('data',function(data){
        console.log('decoded chunk:' + data)
    }).on('response',function(resp){
        resp.on('data', function(data){
            console.log('received:' + data.length + ' bytes of compressed data');
            app.get('/timeline', isLoggedIn, function (req, res) {
                res.render('pages/timeline', {
                    user: req.user,
                    title:'Timeline',
                    reports: data
                });
            });
        })
    }); 
}  

reports.ejs

因此，如果我仅输出整个 reports 对象，例如< p><％= reports％>< / p> 在我的页面上，一切正常，我得到这样的东西：

reports.ejs
So if I simply output the entire reports object like this <p><%= reports %></p> on my page, everything works fine and I get something like this:

[
  {
    "_id": "5775d396077082280df0fbb1",
    "author": "57582911a2761f9c77f15528",
    "dateTime": "30 June 2016 - 07:18 PM",
    "picture": "",
    "description": "",
    "location": [
      -122.46596999999997,
      37.784495
    ],
    "latitude": 37.784495,
    "longitude": -122.46596999999997,
    "address": "4529 California St, San Francisco, CA 94118, USA",
    "contact": "John Doe",
    "type": "Financial",
    "__v": 0,
    "updated_at": "2016-07-01T02:21:10.259Z",
    "created_at": "2016-07-01T02:21:10.237Z",
    "tags": [
      "tag1,tag2"
    ]
  }
]

但是，如果我尝试遍历如下所示的对象，则会得到 UNDEFINED 作为我的返回属性报告对象，显然会出现无限循环。

But if I try to loop through the object as seen below It get an UNDEFINED as a return property of my report object and I get an infinite loop apparently.

<ul class="timeline">
    <% reports.forEach(function(report) { %>
    <li class="timeline-yellow">
        <div class="timeline-time">
            <span class="date" style="text-align:left">
            <%= report.type %> </span>
            <span class="time" style="font-weight:700;font-size:25px;line-height:20px;text-align:left;">
            <%= report.dateTime %> </span>
        </div>
    </li>
    <% }) %>
</ul>

我尝试了循环的另一种形式，但仍然失败：

I have tried another variation of the loop but I am still unsuccessful:

<ul class="timeline">
    <% for (var i = 0; i < reports.length; i++) { %>
    <li class="timeline-yellow">
        <div class="timeline-time">
            <span class="date" style="text-align:left">
            <%= report[i].type %>
            4/10/13 </span>
            <span class="time" style="font-weight:700;font-size:25px;line-height:20px;text-align:left;">
            <%= report[i].dateTime %> </span>
        </div>
    </li>
    <% } %>
</ul>

推荐答案

的语法 ejs 中的循环很完美，但是迭代的数组名称为 reports ，并且您似乎使用了 report [i ] ，它需要更改为 reports [i] ，它应该可以工作。

The syntax for the for loop in ejs is perfect but the iterated array name is reports and you seem to use report[i] inside the iteration, which needs to be changed as reports[i], which should work.

报告.ejs

<ul class="timeline">
    <% for (var i = 0; i < reports.length; i++) { %>
    <li class="timeline-yellow">
        <div class="timeline-time">
            <span class="date" style="text-align:left">
            <%= reports[i].type %>
            4/10/13 </span>
            <span class="time" style="font-weight:700;font-size:25px;line-height:20px;text-align:left;">
            <%= reports[i].dateTime %> </span>
        </div>
    </li>
    <% } %>
</ul>

希望这会有所帮助。

这篇关于在AJAX调用后（使用ExpressJS）在EJS模板中循环遍历数组的正确方法是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！