jade iteration through dataset object from mongodb database

Question

i'm building a bookstore app with expressjs and using mongodb to store data i have a database of books i want to display to my index.jade but i keep running into an infinite loop

extends layout

block content
    .content
        each book in books
            .book
                img(src="/images/dumbk.png", width="150px", height="200px")
                h4.book-title #{book.title}
                h6.book-dtls Price: #{book.price} SDG
                p.book-desc #{book.description}
                a.btn.btn-primary.view(href="/books/details/1") View Book

and this is my index.js

var express = require('express');
var router = express.Router();

var Book = require('../models/bookModel');

/* GET home page. */
router.get('/', /*ensureAuthenticated, */function(req, res, next) {
    Book.find({}, function (err, books) {
        if (err) {console.log(err);}
        var model = {books: books}

       console.log(model);
       res.render('index', /*{books: books},*/ { title: 'Members' });
     });
});

after logging model it logged all the books in my database but it does not render them and keeps running an infinite loop when i tried to log a book title by using book.title in the jade file

-console.log(book.title)
result was undefined

so am sure that the error is in the loop and the formatting

when i log the model the output is

[ { _id: the id, title: "book title", author: "author", price: "10", description: "a book description", stock: "5", cover: "dumbk.png" } ]

Zlatko · Answer 1 · 2018-02-24T12:49:44.623

0

You cannot use console.log in the jade file because this is supposed to be a client side script. Your "books" object is back at the server, your console.log will be executed later when the client does it. Try this instead (although there are better ways):

extends layout

block content
    each book in books
        .book
            img(src="/images/dumbk.png", width="150px", height="200px")
            h4.book-title #{book.title}
            h6.book-dtls Price: #{book.price} SDG
            p.book-desc #{book.description}
            a.btn.btn-primary.view(href="/books/details/1") View Book
    script.
        const books = JSON.parse("!{JSON.stringify(books)}");
        console.log(books[0] && books[0].title);

Update: according to your comments, you didn't even want this, just to get your Jade file to render books. To do that, you should pass the books array to renderer options:

res.render('index', { title: 'Members', books });

edited Feb 24 '18 at 12:49

answered Feb 23 '18 at 12:58

Zlatko

18,936
14
70
123

do i use this formula to display them too ? because my problem isn't logging them its desplaying them – Baraa Araki Feb 23 '18 at 13:02
Well, no. This is just one way to pass your data (`books` variable in this case) to the frontend _JavaScript_. If your book.title is not rendering in that `h4.book-title`, then it's a different matter. Is that your problem? – Zlatko Feb 23 '18 at 13:04
it gave an error "cannot read property "length" of undefined" – Baraa Araki Feb 23 '18 at 13:05
yes my problem is that the preoberties in my database are not rendering in my frontend – Baraa Araki Feb 23 '18 at 13:06
Why do you have the books param commented then? Try this node code: `res.render('index', { title: 'Members', books });` – Zlatko Feb 23 '18 at 13:08
1

Thank you so very much you have saved a life :) – Baraa Araki Feb 24 '18 at 03:49

jade iteration through dataset object from mongodb database

1 Answers1