node js + express + jade iterate array

Question

What I'm trying to do is iterate over an array in a jade layout. The layout file is lessons.jade:

   each lesson in myLessons
            ul.nav.pull-center: li.dropdown.nav.text-center
              .btn.btn-default.dropdown-toggle.btn-lg.btn-block(data-toggle="dropdown" aria-expanded="false")= lesson.day
              ul.dropdown-menu.col-xs-12
                each lessonName in myLessons
                  li: a(href='/lessons/details')= lessonName.name
                  li.divider

My view controller file is lessons.js:

var renderLessonPage = function (req, res, responseBody) {
    var message;
    if (!(responseBody)) {
    message = "Lessons API Error!";
  } else {
    if (responseBody.length < 0) {
      message = "No lessons found!";
    }
  }
  res.render('lessons', {
    title: 'Lesson page',
    pageHeader: {
      title: 'Just a page'
    },
    myLessons: responseBody,
    message: message
  });
};



module.exports.lessons = function(req, res) {
  var requestOptions, path;
  path = '/api/locations/' + req.params.locationid + '/lessons/';
  requestOptions = {
    url: apiOptions.server + path,
    method: "GET",
    json: {}
  };
  request(
      requestOptions,
      function (err, response, body) {
        renderLessonPage(req, res , body );
      }
  );

};

My API controller file contains:

var sendJsonResponse = function (res, status, content) {
  res.status(status);
  res.json(content);
};

module.exports.lessons = function (req, res) {
  loc
      .findById(req.params.locationid)
      .populate('lessons')
      .exec(function (err, location) {
        if (!location) {
          sendJsonResponse(res, 404, {
            "message": "No lessons found!"
          });
        } else {
          response = {
            location: {
              lessons: location.lessons
             // id: req.params.locationid
            }
          };
          sendJsonResponse(res, 200, response);
        }
      })
};

If I fire up Chrome and browse to the location accessed by the API, I see the following json result:

{
  "location": {
    "lessons": [
      {
        "_id": "56d5d947bdb5c3d92ace848c",
        "name": "Henk",
        "startTime": "13:00",
        "endTime": "14:00",
        "day": "Tuesday",
        "__v": 0
      },
      {
        "_id": "56d5d9dfea5cbcf42a20f87e",
        "name": "skaaak",
        "startTime": "12:00",
        "endTime": "18:00",
        "day": "Monday",
        "__v": 0
      }
    ]
  }
}

If I enable console.log in my jade layout template via - console.log and catch the lesson in myLessons , the exact same thing is outputted in the console. But I just can't use values from the array in my jade layout.

I get one dropdown menu only instead of two, the text isn't populated on the dropdown button, and there are two empty items in the pull down menu.

I tried many things, but most resulted in undefined or properties which couldn't be read.

Answer 1

When you sent result for your request

response = {
    location: {
      lessons: location.lessons
     // id: req.params.locationid
    }
};
  sendJsonResponse(res, 200, response);

response is object, not array. So when renderLessonPage function render (option myLessons: responseBody ) is object.

You can replace your code as below:

response = {
    location: {
      lessons: location.lessons
     // id: req.params.locationid
    }
};
sendJsonResponse(res, 200, response.location.lessons);