Render JSON file in express to be interpolated in PUG

Question

I'm making a website that displays my projects linked with their github repo.

I've omitted the Pug files because of plagarism issues. (It's a school project)

Now, I have to use Dynamic routing. Based on id (from JSON) i need to render a desired version of Pug project template to display individual project from the array list projects in the JSON file. Then be able to pass that data to pug templates by adding them as locals in the JS file.

My question is how do link the JSON file? or link the array objects?

I seriously have been trying to figure this out for hours to no result.

I'm sorry if this was a very obvious question.

project.pug

    h1 Title #{project_name}

    p
      | #{description}

    h6 Technologies

    ul
      each project in projects
        li= project.technologies

app.js

const express = require('express');
const json = require('./data.json');
const path = require('path');
const { query } = require('express');

const app = express();
const read = json();

//Not sure about this ????
const filepath = path.basename('Users/x/Downloads/sem 2/CSIS 3380 Web Programming JS/Session 4/Express Site/public');

app.set('view engine', 'pug');
app.use(express.static('public'));


// render "Home" page with locals set to data.projects
app.get('/index', (req, res) => {
    res.render('Home', {
        locals: {
            'projects': projects
        }
    });
});

app.get('/about', (req, res) => {
    res.render = ('About');
});

//Dynamic routes based on id of project adding locals to pass to pug
app.get('/projects/:id', function(req, res) {
    res.render('project', { projects: query.data });
});

app.listen(3000, () => {
    console.log("Server started on port 3000");

});

data.json

{
    "projects": [{
            "id": 0,
            "project_name": "Battleships",
            "description": "A game that allows you to guess battleships on a gamebaords and reports hits/misses.",
            "technologies": ["HTML", "JavaScript", "CSS"],
            "image_url": ["", "", ""]
        },
        {
            "id": 1,
            "project_name": "Random Quotes Flashcards",
            "description": "Flashcards of random famous qoutes from renowned personalities.",
            "technologies": ["HTML", "JavaScript", "CSS"],
            "image_url": ["", "", ""]
        },
        {
            "id": 2,
            "project_name": "BMI",
            "description": "A BMI calculator, computes BMI with weight and height inputs.",
            "technologies": ["HTML", "JavaScript", "CSS", "Node.js", "pug"],
            "image_url": ["", "", ""]
        }
    ]
}

Answer 1

You could use req.params.id to get the id and the array filter method to match the project with the provided ID.

app.js

app.get('/projects/:id', function(req, res) {
// 1) Get the ID from the url
const id = req.params.id;
// 2) Use the "filter" method to match the result with the ID
const result = data.projects.filter(el => el.id === id);
// 3) Pass only the project that match the ID
    res.render('project', { projects: result });
});

Then, you will have an array inside the object with property projects .

Example:
If I run "/projects/2" , this will be my result inside the result variable:

[{
  description: "A BMI calculator, computes BMI with weight and height inputs.",
  id: 2,
  image_url: ["", "", ""],
  project_name: "BMI",
  technologies: ["HTML", "JavaScript", "CSS", "Node.js", "pug"]
}]

And you should be fine to use the information inside your project.pug .