Рендеринг JSON файла в express для интерполяции в PUG - PullRequest
Новая
       66

Рендеринг JSON файла в express для интерполяции в PUG

0 голосов
/ 18 июня 2020

Я делаю веб-сайт, на котором отображаются мои проекты, связанные с их репозиторием на github.

Я пропустил файлы Pug из-за проблем с плагаизмом. (Это школьный проект)

Теперь мне нужно использовать маршрутизацию Dynami c. На основе идентификатора (от JSON) мне нужно отобразить желаемую версию шаблона проекта Pug, чтобы отобразить отдельный проект из проектов списка массивов в файле JSON. Затем вы сможете передать эти данные в шаблоны мопсов, добавив их как локальные в файл JS.

Мой вопрос: как связать файл JSON? или связать объекты массива?

Я серьезно пытался понять это часами, но безрезультатно.

Прошу прощения, если это был очевидный вопрос.

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");

});

данные. 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": ["", "", ""]
        }
    ]
}

1 Ответ

0 голосов
/ 18 июня 2020

Вы можете использовать req.params.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 });
});

Тогда у вас будет массив внутри объекта со свойством projects .

Пример:
Если я запустил "/ projects / 2" , это будет мой результат внутри переменной result : 

[{
  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"]
}]

И вы должны будете нормально использовать информацию внутри вашего project.pug .

...