Creating a multi-level menu in Jade/Pug involves nesting list items within list items to

Inside header.pug

block link
    -var selected='Home';
-var menu = [{'title':'Home','address':'/home/home.html','child':[]},{'title':'Shopping','address':'/shopping/shopping.html','child':[{'title':'TV','address':'/tv/tv.html'},{'title':'Smartphone','address':'/smartphone/smartphone.html'}]},{'title':'About','address':'/about/about.html','child':[]}]

#navbar
    +navbar(selected,menu)

In mixin.pug

//- Navbar mixin
mixin navbar(selected, menus)
            ul
                each menu in menus       
                    if selected === menu.title
                        li.active
                           a(href=menu.address, title=menu.address)= menu.title
                           if menu.child.length > 0
                                +navbar(selected, menu.child)
                    else
                        li
                           a(href=menu.address, title=menu.address)= menu.title
                           if menu.child.length > 0
                                +navbar(selected, menu.child)

Issue:

When compiling it into HTML, an error occurs, displayed in the console:

Cannot read property of undefined in the "if menu.child.length > 0" line

Update:

Added an image:

htmlcssnode.jspug

Answer №1

An issue arises with the data in menu.child when the function +navbar(selected, menu.child) is called. The objects within menu.child do not contain a property named child, which leads to an error being triggered when Pug attempts to determine the length of these undefined values.

  1. Include the child property within the objects in the array menu.child.

  2. Alternatively, consider making changes to your code to account for scenarios where menu.child may be undefined (assuming you intend to skip displaying objects without the child property):

    if typeof menu.child == typeof []
    if menu.child.length > 0
        +navbar(selected, menu.child)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Angular: limit components height to fit screen dimensions

Is there a way to adjust the max-height and max-width of all Angular components to fit the screen size without setting them to 100% from the html down to each component? I want to prevent nested components from exceeding the screen size. ...

htmlcssangular

Encountered an unexpected error while parsing JSON: The identifier "Tunnel" was not expected on a React Native application when attempting to send a request to the

Hey there, I've been facing an issue while trying to send requests from my React Native frontend to my Node.js backend API. The error seems to pop up randomly, making it quite frustrating to deal with. I've tested the API url using ngrok and it w ...

node.jsjsonreact-native

"Enhance your Design with Customized Text Box Coloring

I've made a change to the header's color, which consists of a logo and a title. Unfortunately, the text box where the title appears is picking up the background color of the body of the website instead of the background color of the header. ...

htmlcssheader

What is the best way to save any modifications done to an NPM package on my local machine?

After downloading a node module using NPM and adding it to my package.json, I found that I needed to make some changes to the code to fully meet my requirements. Typically, when working with Node and using git, I would ignore the node_modules directory an ...

node.jsgitnpm

Can 'fr' units be used in the `calc()` function of CSS?

In this particular scenario, the query arises whether the CSS calc() function extends its support to the fr unit as presented in the below example? .sample-grid { --main-fr: 60fr; grid-template-columns: var(--main-fr) 1rem calc(100 - var(--main-fr ...

htmlcsscss-grid

Having trouble getting a regular select list to work with angular-ui-select

Can anyone help me convert my normal select list code to the angular-ui-select directive code? This is my current HTML code: <select class="input-small tight-form-input" ng-model="panel.valueName" ng-options="f.value as f.text for f in bigValueOptions ...

angularjshtmlangular-ui-select

I am facing an issue with sending OAuth v1 parameters in a GET request using Axios in Node.js

Attempting to make a request to ADP using autho1.0a encountered some issues. While successful in postman, the same request failed when made through my application. View Postman screenshot Utilized npm module Similar query on stackoverflow Below is t ...

javascriptnode.jsoauthoauth-2.0axios

Can you explain the role of the %GetOptimizationStatus function within a JavaScript file executing in Node.js?

Currently, I am delving into an article that discusses optimization strategies and includes the following code snippet: //Function that contains the pattern to be inspected (using an `eval` statement) function exampleFunction() { return 3; eval(&a ...

javascriptnode.jsoptimization

Tips for sending an image and file simultaneously through a single form using AJAX

Issue Description: The form 'editform' contains 2 FILE inputs and multiple TEXT inputs. When submitted using AJAX, only one file value is being sent in the POST request. How can both files be sent together from a single form? Existing ...

phphtmljqueryajax

Running client-side JavaScript code on the server side of an application

Currently, I am in the process of developing a web application that includes a web-based code editor specifically for JavaScript. The main goal of this project is to enable users to run JS code on the client side of the application with the use of server-s ...

javascriptnode.jsreactjs

The CSS id selector is not being implemented on a component within a JSF page

I am encountering an issue with my CSS file that contains an ID selector outlined as: #globalFilter { margin-left: 995px; margin-top:-30px; width:320px; height:20px; font-size: 11px; } The component associated with the above-mentioned ID is: < ...

cssjsfjsf-2

Changing the host domain to a non-.com extension in Angular-cli while serving for development

While running an ng serve on my angular cli build, I am attempting to use a .ca domain as the host in order to address CORS and cookie issues during development. Interestingly, when using a .com domain, everything functions smoothly: Functioning with .com ...

node.jsangularnpmangular-cli

Reducing ObjectId length in node.js with mongoose

Currently, my URLs have a lengthy structure like this: http://www.sitename.com/watch?companyId=507f1f77bcf86cd799439011&employeeId=507f191e810c19729de860ea&someOtherId=..... Due to the rapid growth in length, I am contemplating the idea of shorte ...

javascriptnode.jsmongodbmongooseobjectid

What is the best way to horizontally align divs with CSS?

I have been using a combination of table and CSS to center divs on my page. Here is the code I'm currently using: <table width="69" border="0" align="center"> <tr> <td width="59"> <div style="position:relative;"> ...

css

Set up Renovate Bot to utilize a personalized NodeJS image options

Utilizing a self-hosted Renovate Bot instance within an air-gapped GitLab environment to manage NodeJS module updates has presented some challenges for me. Despite thoroughly reviewing the documentation, I'm unclear on how to configure the bot to prev ...

node.jsdockernpmgitlabrenovate

The JSfiddle code seems to be malfunctioning

I'm attempting to transfer elements from one listbox to another in HTML. I found the code below on a Stack Overflow link that redirected me to jsfiddle, where it works fine. However, it's not working here. Can someone help me figure out what&apos ...

javascriptjqueryhtmljsfiddle

Ways to adjust CSS styles according to the height of various device screens

Is there a way to adjust CSS/SCSS rules in applications like Angular based on the viewport height of various devices? When dealing with viewport width, we can use @media (max-width: ...) {}, but how can we address the height aspect? For instance, how wou ...

cssangularsassresponsive-designcompass-sass

How to send query parameters to MongoDB using Node.js with Express framework

Struggling to achieve the equivalent of a SQL LIKE search in MongoDB. Following this mapping sql to monog, but always getting an empty JSON result. Using a literal string works, but when passing a variable nothing happens. app.get("/questions/search/:qu ...

node.jsmongodbexpressnosql

How to toggle between displaying divs using JavaScript and Jquery

How can I use JavaScript to show or hide specific divs on page load and upon clicking different links? I want to display the "houseImages" div by default, while hiding the "landImages", "renovationImages", "UpcomingImages", and "voteForNext" divs. Then, w ...

javascriptjqueryhtmlhideshow

securely managing file access through lockfile.locksync in node.js

Currently, I am utilizing lockfile.locksync to secure a file in my node.js application. However, I am interested in understanding the inner workings of this utility in more detail. Despite multiple resources referring to it as a "very polite lock file util ...

javascriptnode.jsnpmlocking