I am getting error while converting html to pug in express js

Question

I am new to node.js. I am getting this error

TypeError: /home/agile/projects/nodekb/views/index.pug:6
4| h1 #{title}
5| ul
> 6| each article, i in articles
7| li= article.title

Cannot read property 'length' of undefined at eval (eval at wrap (/home/agile/projects/nodekb/node_modules/pug-runtime/wrap.js:6:10), :28:32) at eval (eval at wrap (/home/agile/projects/nodekb/node_modules/pug-runtime/wrap.js:6:10), :47:4) at template (eval at wrap (/home/agile/projects/nodekb/node_modules/pug-runtime/wrap.js:6:10), :58:136) at Object.exports.renderFile (/home/agile/projects/nodekb/node_modules/pug/lib/index.js:427:38) at Object.exports.renderFile (/home/agile/projects/nodekb/node_modules/pug/lib/index.js:417:21) at View.exports.__express [as engine] (/home/agile/projects/nodekb/node_modules/pug/lib/index.js:464:11) at View.render (/home/agile/projects/nodekb/node_modules/express/lib/view.js:135:8) at tryRender (/home/agile/projects/nodekb/node_modules/express/lib/application.js:640:10) at Function.render (/home/agile/projects/nodekb/node_modules/express/lib/application.js:592:3) at ServerResponse.render (/home/agile/projects/nodekb/node_modules/express/lib/response.js:1008:7)

here is my code, views/index.pug

extends layout

block content
  h1 #{title}
  ul
    each article, i in articles
      li= article.title

app.js

const express = require('express');
const path = require('path');

//init app
const app = express();

//load  view engine
app.set('views', path.join(__dirname, 'views'));
app.set('view engine','pug');

//home route
app.get('/', function(req,res){
    let articles =[
        {
            id:1,
            title: 'Article 1',
            author: 'Bhakti Thakkar',
            body: 'This is article one'
        },
        {
            id:2,
            title: 'Article 2',
            author: 'Jeel Thakkar',
            body: 'This is article two'
        },
        {
            id:1,
            title: 'Article 3',
            author: 'Sonal Thakkar',
            body: 'This is article three'
        }
    ];
    res.render('index',{
        title:'Articles'
    });
});


//add route
app.get("/articles/add",function(req,res){
    res.render('add_article',{
        title:'Add Articles'
    })
});

//start server
app.listen(3000, function(){
    console.log('Server started on port 3000...');
});

views/layout.pug

doctype html
html
    head
        title Knowledgebase
    body   
        block content
        br
        hr
        footer
            p Copyright © 2018

Answer 1

Your issue is that you forgot to include the articles data in the res.render method.

To solve your issue, just change this code :

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

To this one :

res.render('index',{
    title:'Articles',
    articles // Equivalent to `articles: articles`
});

This will provide the articles variable data to the templating engine.