Активизация категории (Express, e js) - PullRequest
Новая
       7

Активизация категории (Express, e js)

0 голосов
/ 24 апреля 2020

Привет, ребята, я все еще новичок в Node Express и все самое интересное в веб-разработке. Я пытаюсь сделать категорию активной (выделено), используя bootstrap. Вот 3 фрагмента кода.

Express или Node: 

app.get("/menu/:name", function (req, res) {
    var categoryValue;
    var urlValue;

    if (req.params.name == "preporuceno") {
        categoryValue = 1;
    } else if (req.params.name == "pizza") {
        categoryValue = 2;

    } else if (req.params.name == "tjestenina") {
        categoryValue = 3;

    } else if (req.params.name == "hamburger") {
        categoryValue = 4;

    } else if (req.params.name == "pica") {
        categoryValue = 5;

    }

    Menu.find({
        category: categoryValue
    }, function (err, foundMeals) {
        if (err) {
            console.log(err);
        } else {
            console.log(foundMeals);
            res.render("menu", {
                menu: foundMeals
            });
        }
    })

});

часть E JS: 

 <div class="col-md-3 m-0 p-0 border rounded" id="navcol">
            <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
                <a class="nav-link <% if(menu.category == '1'){%> active <%}%> " id="v-pills-home-tab" data-toggle="pill" href="/menu/preporuceno" role="tab"
                    aria-controls="v-pills-home" aria-selected="true">Preporučeno</a>
                <a class="nav-link <% if(menu.category == 2){%> active <%}%> " id="v-pills-home-tab" data-toggle="pill" href="/menu/pizza" role="tab"
                    aria-controls="v-pills-home" aria-selected="true">Pizze</a>
                <a class="nav-link " id="v-pills-profile-tab" data-toggle="pill" href="/menu/tjestenina" role="tab"
                    aria-controls="v-pills-profile" aria-selected="false">Tjestenina</a>
                <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="/menu/hamburger" role="tab"
                    aria-controls="v-pills-messages" aria-selected="false">Hamburgeri</a>
                <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="/menu/pica" role="tab"
                    aria-controls="v-pills-settings" aria-selected="false">Pića</a>
            </div>
<% menu.forEach(function(menu){ %>
        <div class="col-lg-4 col-md-6 col-12 p-2 m-0 d-inline-block">
            <div class="card" style="width: 22rem; ">
                <img class="card-img-top img-fluid" src="<%= menu.pictureUrl %>" alt="Card image cap">
                <div class="card-body">
                    <div style="height: 9rem;">
                        <h5 class="card-title"><%= menu.meal %></h5>
                        <div style="height: 4rem;">
                            <p class="card-text"><%= menu.description %></p>
                        </div>
                        <div style="height: 4rem;">
                            <p class="card-text"><strong><%=menu.price %>,00 Kn</strong></p>
                        </div>
                    </div>

Так что плохо объясню, что я успешно отображать блюда внутри forEach l oop, и когда я выбираю категорию блюд (см. выше), моя база данных находит блюда, указанные для этой категории. Теперь я пытаюсь сделать категорию активной, если пользователь находится в этой категории, и я не уверен, что делаю неправильно, поскольку считаю, что данные не передаются, если их нет в функции forEach.

В MongoDB это выглядит так: 

_id: 5ea293edd21a134150f50338,
    category: '1',
    pictureUrl: 'https://recepttura.com/wp-content/uploads/2019/04/grah-s-kobasicom-pasulj-recept-thumbnail-recepttura.jpg',
    meal: 'Grah varivo',
    description: 'Grah varivo, kobasica, salata, kruh',
    price: '30',
    __v: 0

Заранее спасибо!

...