Как отобразить коллекцию mongoDB в html?

Question

Я новичок в mongoose и хотел бы отобразить документ (ы) mongoDB из коллекции "exColl" в файле с именем "example.ejs" в базовом списке HTML, однако я столкнулся с различными проблемами. Есть и другие сообщения на эту тему, но я остаюсь в тупике.

-У меня есть рабочий кусок кода, который выводит все документы из exColl.find ({}) с использованием res.json, очевидно, помещая их в формат json. Однако я не смог адаптировать этот код во что-то, что работает, например, с помощью res.render.

-Когда я определяю переменную в app.js и пытаюсь получить к ней доступ в example.ejs, переменная не найдена, поэтому даже если бы я мог сохранить результаты exColl.find ({}) в переменной, которую я не задал не вижу, как я смогу ввести его в HTML

Я не знаю, чего не знаю, что очень расстраивает. Если бы кто-то мог помочь заполнить мои концептуальные пробелы, это было бы фантастически.

--- Edit ---- Добавление фрагмента, который я пробовал

app.get("/example", function (req, res){
    exColl.find({})
    .exec(function (err, examples){
        if (err) {
            res.send("an error has occurred")
        } else res.render(examples: examples);
        });
    });

В файле .ejs

<p> <%= examples %> </p>

Answer 1

Похоже, ваша проблема в синтаксисе EJS, который вы должны просмотреть здесь: Документы EJS .Рассмотрим следующую структуру тестового проекта:

.
├── index.js
├── package.json
├── setup.js
└── views
    ├── index.ejs
    └── table.ejs

Я создаю тестовую базу данных с setup.js , так что у нас есть несколько фиктивных сообщений для отображения:

const mongoose = require("mongoose");

mongoose.connect("mongodb://localhost:8081/test", {
    useNewUrlParser: true
});

const Post = mongoose.model("Post", {
    title:String,
    body: String
});

const toMake = [
    {title: "hello", body: "world"},
    {title: "foo", body: "bar"},
    {title: "fizz", body: "buzz"},
    {title: "a", body: "b"}
];

Post.insertMany(toMake)
    .then(()=>{
        console.log("done");
        mongoose.connection.close();
    })
    .catch(err => console.error(err));

Я создаю шаблон EJS views / table.ejs для отображения моих сообщений в виде таблицы:

<table>
    <thead>
        <tr>
            <th>Title</th>
            <th>Body</th>
        </tr>
    </thead>
    <tbody>
        <% posts.forEach(post => { %>
            <tr>
                <td><%= post.title %></td>
                <td><%= post.body %></td>
            </tr>
        <% }) %>
    </tbody>
</table>

Затем я создаю шаблон EJS views / index.ejs чтобы использовать шаблон таблицы

<main>
    <h1>Posts</h1>
    <%- include("table", {posts}); %>
</main>

, я также заставляю сервер отвечать на запросы в index.js и запускать его с node index.js:

const express = require("express");
const mongoose = require("mongoose");

mongoose.connect("mongodb://localhost:8081/test", {
    useNewUrlParser: true
});

const app = express();

const Post = mongoose.model("Post", {
    title: String,
    body: String
});

app.set("view engine", "ejs");

app.get("/", async (req, res) => {
    const posts = await Post.find({});
    res.render("index", {posts});
});

app.listen(3000, () => console.log("Listening"));

И когда я curl localhost:3000 получаю визуализированный HTML:

<main>
    <h1>Posts</h1>
    <table>
        <thead>
            <tr>
                <th>Title</th>
                <th>Body</th>
            </tr>
        </thead>
        <tbody>

                <tr>
                    <td>hello</td>
                    <td>world</td>
                </tr>

                <tr>
                    <td>foo</td>
                    <td>bar</td>
                </tr>

                <tr>
                    <td>fizz</td>
                    <td>buzz</td>
                </tr>

                <tr>
                    <td>a</td>
                    <td>b</td>
                </tr>

        </tbody>
    </table>
</main>

---

Независимо от того, что мне нужно, я должен передать данные в функцию res.render() и заполнить область рендеринга всеми необходимыми данными.для рендеринга.

Однако я сделал table.ejs для повторного использования.Допустим, у меня есть еще одна страница, на которой я хочу показать некоторые сообщения в табличном виде.

У меня есть другой шаблон EJS: views / profile.ejs , который выглядитнапример:

<main>
    <h1>2 Posts</h1>
    <%- include("table", {posts: posts.slice(0, 2)}); %>
</main>

И я добавляю еще один маршрут к своему приложению в /sliced:

app.get("/sliced", async (req, res) => {
    const posts = await Post.find({});
    res.render("profile", {posts});
});

Всякий раз, когда я скручиваю localhost:3000/sliced, я получаю только первые 2 элемента в сообщенияхпоскольку я только заполнил область include срезом всех постов:

<main>
    <h1>2 Posts</h1>
    <table>
    <thead>
        <tr>
            <th>Title</th>
            <th>Body</th>
        </tr>
    </thead>
    <tbody>

            <tr>
                <td>hello</td>
                <td>world</td>
            </tr>

            <tr>
                <td>foo</td>
                <td>bar</td>
            </tr>

    </tbody>
</table>

</main>