Search code examples
node.jsmongodbexpresshandlebars.jsexpress-handlebars

NodeJS crashed with three dots


I have a really weird problem with my nodejs project. The project is an online shop with express and handlebar and it has a mongo database connected. In the router section I have this code:

router.get('/item/:item', function (req, res, next) {
var actItem = {};
Item.find().findOne({ '_id': req.params.item }, function (err, item) {
    actItem.name = item.item_name;
    actItem.price = item.price;
    actItem.description = item.description;
    actItem.imageLink = item.imageLink;

});
res.render('pages/shop/item-view', { title: 'Express', item: actItem });

});

It looks for the item ID in the URL on the database and it returns the view passing the data to be displayed. It works just fine but then in the view i have this code:

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
    <div class="carousel-item active">
        <img class="d-block w-100" src="{{item.imageLink}}" alt="First slide">
    </div>
    <div class="carousel-item">
        <img class="d-block w-100" src="" alt="Second slide">
    </div>
    <div class="carousel-item">
        <img class="d-block w-100" src="" alt="Third slide">
    </div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
</a>

And it works just fine too! But here comes the problem. Whenever I add three dots in any src attribute, it crashed. Even weirder is that it crashed even if I edit the html document after render in chrome and add them, like this:

<img class="d-block w-100" src="..." alt="Second slide">

The error of the crash is this:

actItem.name = item.item_name;
                    ^
TypeError: Cannot read property 'item_name' of undefined

Any idea on how to fix this and why it happens?

SOLUTION

I managed to solve this problem by checking the item before doing anything.

if (item) {
  actItem.name = item.item_name;
  actItem.price = item.price;
  actItem.description = item.description;
  actItem.imageLink = item.imageLink;
}

It happens because when I use ... the browser makes the request /item/... to get the image, then the value of req.params.item becomes ... and in database there is no entry with _id = ... . So the item value well be undefined


Solution

  • findOne is an async function so call res.render inside it , and check if item is not null :

    router.get('/item/:item', function (req, res, next) {
    var actItem = {};
    
        Item.find().findOne({ '_id': req.params.item }, function (err, item) {
            if(item){
                actItem.name = item.item_name;
                actItem.price = item.price;
                actItem.description = item.description;
                actItem.imageLink = item.imageLink;
                res.render('pages/shop/item-view', { title: 'Express', item: actItem 
             }
             else{
                res.render('pages/shop/item-view', { title: 'Express', item: 'defaultValue'});
             }
    
        });
     });