Как визуализировать json объект из рез. json с express на текущей HTML странице - PullRequest
0 голосов
/ 12 февраля 2020

Я искал в Интернете решение моей проблемы в течение последнего дня или около того, но мне еще предстоит найти решение. Я новичок в фоновой разработке. Я надеюсь, что кто-то сможет помочь мне со следующим:

Я хочу отобразить часть моей текущей страницы HTML в зависимости от того, возвращается ли JSON из базы данных. При щелчке сотрудника в списке на той же странице должен быть добавлен дополнительный столбец с (проанализированной) JSON информацией.

Ниже показано, как далеко я продвинулся сам.

Мой HTML:

    <div class="container">
        <div class="row mt-5">
            <div class="col-sm">
                One of three columns
            </div>
            <div class="col-sm">
                <ul class="list-group">
                    <% employees.forEach(function(employee){ %>
                    <a href="/employees/<%= employee._id %>">
                        <li class="list-group-item"> <%= employee.firstname %>
                            <%= employee.lastname %></li>
                    </a>
                    <% }); %>
                </ul>
            </div>

            <div class="col-sm">
                <!-- I want to render a card with info for the selected employee when that employee in the list is clicked  -->
            </div>
        </div>
    </div>

Мой маршрут:

var express = require('express');
var router = express.Router();
var Employee = require('../models/employee');

// Show employees
router.get('/', function (req, res, next) {
    // get all employees from DB
    Employee.find({}, function (err, allEmployees) {

        res.render('employees/overview', { employees: allEmployees });

    })

});

// Show more info about one employee
router.get('/:id', function (req, res) {
    console.log(req.params.id);
    Employee.findById(req.params.id).exec(function (err, foundEmployee) {
        if (err || !foundEmployee) {
            console.log(err);
            res.redirect('back');
        } else {
            res.json(foundEmployee);
        }
    })
});

module.exports = router;

JSON, который я получаю (в браузере), когда нажимаю на сотрудника в list:

{
_id: "5e4423cff5a7810d1cce0e53",
firstname: "Johnny",
lastname: "Koch",
telnum: 881234567,
email: "j.koch@focus.com",
image: "https://images.unsplash.com/photo-1573007974656-b958089e9f7b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80",
position: "Business Analist",
__v: 0
}

Как вы видите, я могу получить правильный JSON объект на стороне клиента, но я застрял на том, куда go оттуда.

Любая помощь с благодарностью!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...