Guide on looping through an array of objects and displaying the key and value pairs using pug

I'm having trouble displaying errors from an incomplete form. In my array of objects, I want to iterate through and retrieve the errors, but it seems the list is currently empty. Upon debugging, it appears that the errors variable contains

[
  {
    email: "Enter a valid email in the format <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bcded3c5fcd9c4ddcd6d0cdc1d6dddd85d8d4d6">[email protected]</a>",
  },
  {
    username: "Please enter a valid username",
  },
] 
 

pug file

 .auth-head
     h2 Sign Up Now.
     p Begin by setting up your account
       ul  
       each error in errors
         each val,key in error 
           li= val

How I'm passing this information to the pug file

  res.render("signup",{errors:req.flash('validationFailure')});

EDIT. I have made changes to the format of the errors being returned as a single object in the array @Barmar

updated pug file

.auth-head
   h2 Sign Up Now.
   p Begin by setting up your account
   ul  
   each val,key in errors
     li= val

Updated errors object.

[
  {
    email: "Enter a valid email in the format <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="41232e38012439202c312d246f222e2c">[email protected]</a>",
    username: "Please enter a valid username",
  },
]

Answer №1

A great way to iterate over an object's properties is by using a standard for...in loop within an unbuffered code block.

To achieve your desired outcome using the provided data, you can utilize the following pug code:

.auth-head
  h2 Join Us Now.
  p Start by creating your account
  ul  
    each error in errors
      - for (const property in error)
        li= error[property]

If you have modified data to work with, the following pug code will assist you in reaching your goal:

.auth-head
  h2 Join Us Now.
  p Start by creating your account
  ul  
    - for (const property in errors[0])
      li= errors[property]
        

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

Receiving a `combined` error when updating Meteor isopacket - sourcemapConsumer.destroy function is not recognized

Whenever I attempt to update or create a project using Meteor version 1.9 and above, I encounter the following error: Errors prevented isopacket load: While loading isopacket `combined`: C:\Users\USER\AppData\Local\.meteor\p ...

Error: Unable to locate module 'child_process' in the context of NextJS + Nightmare

Encountering an issue while trying to compile a basic example using Next JS + Nightmare Scraper. Upon attempting to access the page, I am faced with the following error message, and the page fails to load. PS C:\Users\lucas\Documents\Pr ...

SignalR's postback interrupts the functionality of jQuery actions

On my screen, I have a widget that updates data and changes its class based on server-side interactions. It also responds to mouse clicks. To notify multiple clients of updates simultaneously, I'm using SignalR. The problem arises when I wrap everythi ...

AWS Lambda serverless deployment of Angular Universal is failing to detect javascript files in the dist/browser directory

After following the steps in this tutorial for deploying to a lambda function, I encountered some issues. When testing it using serverless offline, I kept getting 404 errors for each compiled JS file. However, once I deployed it, the errors changed to 403. ...

The Vue.js v-on:mouseover function is not functioning properly in displaying the menu

When I hover over a LI tag, I want to display a menu. I have successfully implemented it using a simple variable with the following code: @mouseover="hoverFormsControls=true" @mouseleave="hoverFormsControls=false" However, when I attempted to use an arr ...

Changing a value to display with exactly 2 decimal places using jQuery

Similar Question: JavaScript: how to format a number with exactly two decimals Having successfully added values into a div with a total using some script, I attempt to convert those values into decimal numbers by dividing them by 100 to mimic currency ...

Mastering the Art of Integrating API and JSON!

I've developed a bot using botkit and the Zendesk API to retrieve information. There's a function in my bot that prompts the user for a search term, searches for relevant information using the Zendesk API, and displays the result. I'm faci ...

Error: The variable "weather" is not defined while using React with the weatherbit API

I'm currently developing a React application that utilizes the Weatherbit API. However, I have encountered an issue with the weather object when calling my data array. Below is the code snippet where the problem occurs: import React from "react&q ...

The copying of array values is not supported by Chromium

While utilizing Webworker to process an array of pixels from Canvas and then assign it back, I encountered a strange behavior. Firefox works flawlessly in this scenario, however, Chromium seems to insert an empty pixel array into the Canvas. Upon further ...

Displaying the second div once the first div has loaded, then concealing the first div

Current Approach: There are two divs occupying the same space, with div1 set to display:block and div2 set to display:none When a tab is clicked, jQuery hides one div over a period of 2000ms and reveals the other div. Challenge: The goal is for the ...

Generating dynamic dropdown menus in PHP

I'm currently working on a project that involves creating dynamic drop down lists in PHP using JavaScript. I've managed to fetch the value from the first dropdown list and display the corresponding values in the second list. However, the second l ...

Guide on transferring control from a successful jQuery event to an HTML form

I am currently using the following jQuery code to validate user details. $.ajax({ type: "POST", url: "Login", data:'uname='+encodeURIComponent(uname)+'&'+'pass='+encodeURIComponent(pass), ...

PHP script is not successfully receiving the Ajax post request that is

As a newcomer to the world of php and ajax, I am facing a challenge in passing a variable from jquery to a php page loaded within a modal window. My php script fetches table information for multiple users. Next to each user's name, there is an edit b ...

Running `npm install npm` results in encountering gyp ERR and npm ERR

Why am I encountering this peculiar error message when executing sudo npm install npm? This issue seems to crop up occasionally with other modules as well! Error: > <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d4a7b7a6ad ...

Utilizing Async/await for Efficient Handling of Multiple MongoDB Queries in Express

My CRUD app is running smoothly, but I encountered a problem where the results of two queries were not displaying on the page until after a manual refresh. Upon investigating, I realized that this issue stems from Node's asynchronous nature. I have be ...

The regex pattern did not match the line of code in the Node.js script

I need help finding a regex pattern that can identify any line of code containing just one reference to a core module. Here is an example: const coreModuleMatches = /'^[var|const]{0,1}[a-z\$\_]{1,}=require([\'|"][assert|fs|path][ ...

animation of several rows in a table with ng-animate is not feasible

I'm working on highlighting items when they appear in a table. There might be multiple items appearing simultaneously, but it seems like ng-animate is not handling this situation correctly. In the provided example below, you can observe that the div ...

Tips on incorporating a color picker in HTML using jQuery

Looking to implement an HTML color picker with the help of JQuery. Wondering if there is a simpler method to do this without relying on external JQuery libraries? Experimented with <input type="color"> but encountered issues that prevented it from ...

Combine two pieces of data from a JSON object using Angular's ng-repeat

Trying to organize data from a separate array into one section of a table. The first JSON named "names" : [ { "name": "AAAAAA", "down": "False" }, { "name": "BBBBBB", "down": "Tru ...

Creating a user-friendly interface for the admin to easily upload photos by implementing a php/bootstrap/js code within the panel

I'm currently in the process of creating an online website as part of my thesis project. I've been researching this specific code, but unfortunately, I haven't been able to find a solution. In the admin section of the site, I need to enable ...