Using a pug each loop through an array of objects

Question

So I am using NodeJs (with pug as its view engine). My intention is to create a table where an each loop on my pug code adds the data from the data.json file in rows on a table.

First let me show you my NodeJs code; I have the following on the app.js file (which is my primary entry point to my program)

var express = require('express');
var pple = require('data.json');
var app = express();

app.set('view engine', 'pug');


// Get the homepage
router.get('/', (req, res, next)=>{
    res.render('index', {pple:pple});
});

app.listen(4000, ()=>{
    console.log('Listening to port 4000');
});

Secondly, I have the following pug code on my index.pug file:

doctype html

html(lang='en')
  body
    table.table.table-striped
      tr
        th Name
        th Position
        th Address
        th Phone

      each n in pple
        tr
          td= n.name
          td= n.position
          td= n.address
          td= n.phone

and this gives me the following result: The table I get when I enter the code above

However, here is how my data.json file looks like:

[
    {
        "name": "Person1",
        "position": "Software Eng",
        "address": "Nairobi",
        "phone": "0712121212",
        "foods": {
            "likes": ["fish", "chips"],
            "dislikes": ["pork"]
        }
    },
    {
        "name": "Person2",
        "position": "Web Dev",
        "address": "Mombasa",
        "phone": "0711223344",
        "foods": {
            "likes": ["checken", "eggs"],
            "dislikes": ["bread"]
        }
    },
    {
        "name": "Person3",
        "position": "Marketer",
        "address": "Nakuru",
        "phone": "0711121314",
        "foods": {
            "likes": ["peas", "beans"],
            "dislikes": ["weed"]
        }
    }
]

and I would like to add extra columns stating the foods they like and dislike. As you can see, the foods they like are in two, hence I would like it to display fish and chips for person 1, chicken and eggs for person 2, and peas and beans for person 3; all these on a Likes column.

Please help me learn how to add all these in a Likes and Dislikes column. Thank you.

Answer 1

Pug evaluates inline JavaScript, so you can add JavaScript code to format your foods.likes and foods.dislikes. See https://pugjs.org/language/code.html

The following should do the trick, simply using Array.prototype.join() for combining the liked and disliked foods.

doctype html

html(lang='en')
  body
    table.table.table-striped
      tr
        th Name
        th Position
        th Address
        th Phone
        th Liked Foods
        th Disliked Foods

      each n in pple
        tr
          td= n.name
          td= n.position
          td= n.address
          td= n.phone
          td= n.food.likes.join(" and ")
          td= n.food.dislikes.join(" and ")

Answer 2

I prefer using bootstrap grid system, but you could try to add the column food, and under this column add two more columns.

Something like this:

doctype html

html(lang='en')
  body
    table.table.table-striped
      tr
        th Name
        th Position
        th Address
        th Phone
        th Food
           tr
             th Likes
             th Dislikes

      each n in pple
        tr
          td= n.name
          td= n.position
          td= n.address
          td= n.phone
          td 
            tr
              td= n.foods.likes
              td= n.foods.dislikes