title: What is the proper way to loop through an array in an EJS template after an AJAX Call (using ExpressJS)?
body: <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>