What is the proper way to loop through an array in an EJS template after an AJAX Call (using ExpressJS)?
<p>I am trying to loop through an array of objects that I got from an http call using to my internal API using the <code>request</code> 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.</p>
<p>Below is my code:</p>
<p><strong>server.js</strong></p>
<pre><code>// Prepend /api to my apiRoutes
app.use('/api', require('./app/api'));
</code></pre>
<p><strong>api.js</strong></p>
<pre><code>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);
          });
    });
</code></pre>
<p><strong>routes.js</strong></p>
<pre><code>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
                });
            });
        })
    }); 
}  
</code></pre>
<p><strong>reports.ejs</strong><br />
So if I simply output the entire <code>reports</code> object like this <code>&lt;p&gt;&lt;%= reports %&gt;&lt;/p&gt; </code> on my page, everything works fine and I get something like this:</p>
<pre><code>[
  {
    &quot;_id&quot;: &quot;5775d396077082280df0fbb1&quot;,
    &quot;author&quot;: &quot;57582911a2761f9c77f15528&quot;,
    &quot;dateTime&quot;: &quot;30 June 2016 - 07:18 PM&quot;,
    &quot;picture&quot;: &quot;&quot;,
    &quot;description&quot;: &quot;&quot;,
    &quot;location&quot;: [
      -122.46596999999997,
      37.784495
    ],
    &quot;latitude&quot;: 37.784495,
    &quot;longitude&quot;: -122.46596999999997,
    &quot;address&quot;: &quot;4529 California St, San Francisco, CA 94118, USA&quot;,
    &quot;contact&quot;: &quot;John Doe&quot;,
    &quot;type&quot;: &quot;Financial&quot;,
    &quot;__v&quot;: 0,
    &quot;updated_at&quot;: &quot;2016-07-01T02:21:10.259Z&quot;,
    &quot;created_at&quot;: &quot;2016-07-01T02:21:10.237Z&quot;,
    &quot;tags&quot;: [
      &quot;tag1,tag2&quot;
    ]
  }
]
</code></pre>
<p>But if I try to loop through the object as seen below It get an <strong>UNDEFINED</strong> as a return property of my <strong>report</strong> object and I get an infinite loop apparently.</p>
<pre><code>&lt;ul class=&quot;timeline&quot;&gt;
    &lt;% reports.forEach(function(report) { %&gt;
    &lt;li class=&quot;timeline-yellow&quot;&gt;
        &lt;div class=&quot;timeline-time&quot;&gt;
            &lt;span class=&quot;date&quot; style=&quot;text-align:left&quot;&gt;
            &lt;%= report.type %&gt; &lt;/span&gt;
            &lt;span class=&quot;time&quot; style=&quot;font-weight:700;font-size:25px;line-height:20px;text-align:left;&quot;&gt;
            &lt;%= report.dateTime %&gt; &lt;/span&gt;
        &lt;/div&gt;
    &lt;/li&gt;
    &lt;% }) %&gt;
&lt;/ul&gt;
</code></pre>
<p>I have tried another variation of the loop but I am still unsuccessful:</p>
<pre><code>&lt;ul class=&quot;timeline&quot;&gt;
    &lt;% for (var i = 0; i &lt; reports.length; i++) { %&gt;
    &lt;li class=&quot;timeline-yellow&quot;&gt;
        &lt;div class=&quot;timeline-time&quot;&gt;
            &lt;span class=&quot;date&quot; style=&quot;text-align:left&quot;&gt;
            &lt;%= report[i].type %&gt;
            4/10/13 &lt;/span&gt;
            &lt;span class=&quot;time&quot; style=&quot;font-weight:700;font-size:25px;line-height:20px;text-align:left;&quot;&gt;
            &lt;%= report[i].dateTime %&gt; &lt;/span&gt;
        &lt;/div&gt;
    &lt;/li&gt;
    &lt;% } %&gt;
&lt;/ul&gt;
</code></pre>