Mongoose response not parsing correctly

Question

I am relatively new to mongoose and have tried looking around for an answer but nothing so far seems to be working.

I am querying my mongoDB (hosted on mlab) and just want to pass an object literal to the front end template (using hoganjs for templating alongside express for routing).

When I do pass it over though, the response is not an object literal and even when I do JSON.parse on the response, it still doesnt work.

I need it to be an array filled with object literals of the items in the collection so that on the front end, I can loop through the returned items.

How can I get this to work like that though? I looked at the docs and some stack overflow posts but as I say, nothing working thusly.

Here is my current code:

index.js (route):

DB connection:

mongoose.connect("CONNECTION URL IS HERE, JUST REMOVED SINCE I AM POSTING THIS SNIPPET ONLINE");

var db = mongoose.connection;
db.on('error', console.error.bind(console, 'connection error:'));
db.once('open', function() {
  var timelineItemsSchema = mongoose.Schema({
    postedTime: String,
    postedPlace: String,
    postedContent: String,
    postedTitle: String,
  });

  var timelineItems = mongoose.model('timelime_items', timelineItemsSchema);

  timelineItem = new timelineItems({
    "postedTime": "21/03/2016 13:44",
    "postedPlace": "facebook",
    "postedContent": "blah blah blah?",
    "postedTitle": "Post Two"
  });

  timelineItem.save(function(err, item) {
    if (err) return console.error(err);
    console.log("item saved!")
  });

  timelineItems.find(function(err, items) {
    if (err) return console.error(err);
    dbResponseItems = items;
  })
});

Passing to the front end:

res.render('index', {
  page_title: "Timeline",
  author: "",
  nav_links: link_info,
  dbResponse: dbResponseItems
});

And the front end expects the following to be executed:

(function() {
  let $timeline = $("ul.timeline"),
    jsonResponse = {{dbResponse}}; //Array of the object literals to be looped should go here


  //and I should be able to loop it here, I know this loop works because I had a "dummy" array of object literals during prototyping, now I need an actual one to come back from the db filled with the object literals
  for (let i = 0; i < jsonResponse.length; i++) {
    let postedTime = jsonResponse[i].postedTime,
      postedPlace = jsonResponse[i].postedPlace,
      postedContent = jsonResponse[i].postedContent,
      postedTitle = jsonResponse[i].postedTitle,
      templateOne = `<li>
   <div class="timeline-badge"><i class="glyphicon glyphicon-plus"></i></div>
   <div class="timeline-panel">
    <div class="timeline-heading">
     <h4 class="timeline-title">${postedTitle}</h4>
     <p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> ${postedTime} via ${postedPlace}</small></p>
    </div>
    <div class="timeline-body">
     <p>
  ${postedContent}    
 </p>
    </div>
   </div>
  </li>`,
      templateTwo = `<li class="timeline-inverted">
   <div class="timeline-badge"><i class="glyphicon glyphicon-minus"></i></div>
   <div class="timeline-panel">
    <div class="timeline-heading">
     <h4 class="timeline-title">
  ${postedTitle}
</h4>
<p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> ${postedTime} via ${postedPlace}</small></p>
    </div>
    <div class="timeline-body">
     <p>
  ${postedContent}    
 </p>
    </div>
   </div>
  </li>`;

    if (i % 2 === 0) { // index is even
      $timeline.append(templateOne);
    } else { //index is odd
      $timeline.append(templateTwo);
    }
  }
})();

Any ideas?

If you need any more info, just ask in the comments section, no doubt it is probably something that I have misunderstood but I am lost after 30 - 40 minutes of trying to find a solution!

Answer 1

I advice you to check on server side what contains dbResponseItems which should be a global variable. To be sure you pass something reliable to your front end template