Pugs are unable to interpret arrays unless they are actively scanning through each element

Question

Pugs are unable to interpret arrays unless they are actively scanning through each element

Currently, I am engaged in a small Web development project for a University course. The project involves using Express with Pug as the view engine. My goal is to iterate through an array of weather stations, creating a unique route for each one. Each route should lead to a details page where the specific value from the array is displayed.

var i = 0;
while(stations[i]!= null){
    app.get('/'+stations[i]["name"], (req, res) => {
        res.render("DetailsTemplate", {Station: stations[i]})
    });
    console.log(`detailsPageRunning on ` + '/' + stations[i]["name"] + ' '+ i);
    i++;
}

block content
    div(class="details")

        div(class="station")
            div(class="station-element")
                h2 #{Station.name}
                p
            div(class="station-element")
                h2 Weather
                p #{Station.readings.at(0).weather}
            div(class="station-element")
                h2 Temperature
                p #{Station.readings.at(0).temp} Degrees
            div(class="station-element")
                h2 Wind
                p #{Station.readings.at(0).wind} bft.
            div(class="station-element")
                h2 Air Pressure
                p #{Station.readings.at(0).airpressure} bpa

Currently, the routes are created as intended and the page renders fine when using the same array value for each iteration, such as Station: stations[0]. However, the issue arises when trying to dynamically assign different values to each route using Station: stations[i]. What adjustments need to be made for this to work properly?

I have experimented with other arrays to see if the problem lies within the array itself, but encountered the same issue.

javascript express pug

Answer 1

Answer №1

A demonstration of fulfilling the requirement using a route parameter is presented in the following code snippet. Another approach in a separate post involves utilizing an array of route paths.

server.js

const express = require('express');

const app = express();

// sample data
const stations = [
  { name: 's-one', readings: [{ wetter: 10, temp: 4, wind: 1, luftdruck: 5 }] },
  {
    name: 's-two',
    readings: [{ wetter: 12, temp: 14, wind: 13, luftdruck: 3 }],
  },
];

// utilizing a route parameter
app.get('/:stationname', (req, res, next) => {
  const routename = req.params.stationname;

  // finding station details based on the route parameter
  const station = stations.find((station) => station.name == routename);

  if (station) {
    // uncomment the below line when implementing render
    // res.render('DetailsTemplate', { Station: station });

    // sending data for testing purposes
    res.send(station);
  } else {
    // handle error for invalid requests
    next(new Error('Invalid station'));
  }
});

// Custom error handler
app.use((err, req, res, next) => {
  res.send(`Some Error : ${err.message} `);
});

app.listen(3000, () => console.log('Listening on port 3000'));

Starting the server:

node server.js

Valid route parameter test:

Request: curl http://localhost:3000/s-one
Response: {"name":"s-one","readings":[{"wetter":10,"temp":4,"wind":1,"luftdruck":5}]}%

Invalid route parameter test:

Request: curl http://localhost:3000/s-onex
Response: Some Error : Invalid station

Answer 2

A demonstration of fulfilling the requirement using a route parameter is presented in the following code snippet. Another approach in a separate post involves utilizing an array of route paths.

server.js

const express = require('express');

const app = express();

// sample data
const stations = [
  { name: 's-one', readings: [{ wetter: 10, temp: 4, wind: 1, luftdruck: 5 }] },
  {
    name: 's-two',
    readings: [{ wetter: 12, temp: 14, wind: 13, luftdruck: 3 }],
  },
];

// utilizing a route parameter
app.get('/:stationname', (req, res, next) => {
  const routename = req.params.stationname;

  // finding station details based on the route parameter
  const station = stations.find((station) => station.name == routename);

  if (station) {
    // uncomment the below line when implementing render
    // res.render('DetailsTemplate', { Station: station });

    // sending data for testing purposes
    res.send(station);
  } else {
    // handle error for invalid requests
    next(new Error('Invalid station'));
  }
});

// Custom error handler
app.use((err, req, res, next) => {
  res.send(`Some Error : ${err.message} `);
});

app.listen(3000, () => console.log('Listening on port 3000'));

Starting the server:

node server.js

Valid route parameter test:

Request: curl http://localhost:3000/s-one
Response: {"name":"s-one","readings":[{"wetter":10,"temp":4,"wind":1,"luftdruck":5}]}%

Invalid route parameter test:

Request: curl http://localhost:3000/s-onex
Response: Some Error : Invalid station

Answer 3

Answer №2

Your code has established a foundation, and the code below further elaborates certain aspects of it. Take a look to see if it adds value. The code utilizes an array of route paths, with an alternative method that utilizes a route parameter, discussed separately.

server.js

const express = require('express');

const app = express();

// sample data
const stations = [
  { name: 's-one', readings: [{ wetter: 10, temp: 4, wind: 1, luftdruck: 5 }] },
  {
    name: 's-two',
    readings: [{ wetter: 12, temp: 14, wind: 13, luftdruck: 3 }],
  },
];

// array of route paths e.g. [/s-one, /s-two]
const routepaths = stations.map((i) => '/' + i.name);

// route paths in array
app.get(routepaths, (req, res, next) => {
  // finding station with respect to the given request
  const station = stations[routepaths.findIndex((i) => i == req.url)];

  if (station) {
    // call render here as this
    //res.render('DetailsTemplate', { Station: station });

    // this send is just for testing this sample code
    res.send(station);
  }
});

// This a catch-all middleware
// it is required in case an invalid request is made
app.use((req, res, next) => {
  res.status(404).send('Route not found');
});

// this is the custom error handler
app.use((err, req, res, next) => {
  res.status(500).send(`Some error : ${err.message}`);
});

app.listen(3000, () => console.log('Listening at port 3000'));

Starting the server

node server.js

Testing a valid request:

   Request:  curl http://localhost:3000/s-one
   Response: {"name":"s-one","readings":[{"wetter":10,"temp":4,"wind":1,"luftdruck":5}]}

Testing an invalid request:

   Request: curl http://localhost:3000/s-onex
   Response: Route not found

Answer 4

Your code has established a foundation, and the code below further elaborates certain aspects of it. Take a look to see if it adds value. The code utilizes an array of route paths, with an alternative method that utilizes a route parameter, discussed separately.

server.js

const express = require('express');

const app = express();

// sample data
const stations = [
  { name: 's-one', readings: [{ wetter: 10, temp: 4, wind: 1, luftdruck: 5 }] },
  {
    name: 's-two',
    readings: [{ wetter: 12, temp: 14, wind: 13, luftdruck: 3 }],
  },
];

// array of route paths e.g. [/s-one, /s-two]
const routepaths = stations.map((i) => '/' + i.name);

// route paths in array
app.get(routepaths, (req, res, next) => {
  // finding station with respect to the given request
  const station = stations[routepaths.findIndex((i) => i == req.url)];

  if (station) {
    // call render here as this
    //res.render('DetailsTemplate', { Station: station });

    // this send is just for testing this sample code
    res.send(station);
  }
});

// This a catch-all middleware
// it is required in case an invalid request is made
app.use((req, res, next) => {
  res.status(404).send('Route not found');
});

// this is the custom error handler
app.use((err, req, res, next) => {
  res.status(500).send(`Some error : ${err.message}`);
});

app.listen(3000, () => console.log('Listening at port 3000'));

Starting the server

node server.js

Testing a valid request:

   Request:  curl http://localhost:3000/s-one
   Response: {"name":"s-one","readings":[{"wetter":10,"temp":4,"wind":1,"luftdruck":5}]}

Testing an invalid request:

   Request: curl http://localhost:3000/s-onex
   Response: Route not found

Pugs are unable to interpret arrays unless they are actively scanning through each element

Answer №1

Answer №2

Similar questions

Steps for displaying a post's image when hovering over its link in WordPress

Are you ready to create a Modal Factory?

Creating a JSON tree using MongoDB data in a Node.js environment

Unable to provide any input while utilizing npm prompts

revealing a particular field in jQuery during the validation process

Tips for extracting a specific attribute from an array of objects using both react and JavaScript while considering various conditions

Properly handling the use of single and double quotation marks in variable declarations within a JavaScript file

Removing double double quotes for Javascript

Upon clicking, the Bootstrap dropdown button fails to open up

I am facing difficulties in inserting information into the MongoDB database

Bootstrap: Display a single product on the Carousel Product Slider for the smallest view

Implementing context menus on the Material-UI DataGrid is a straightforward process that can enhance the user experience

"Utilize axios in React to interpret and handle error bodies captured through parsing as a ReadableStream

How to place an element in a specific location within the DOM using JavaScript

Utilizing JavaScript within my WordPress site

Adding a new value to an array of objects without altering the existing values in ReactJS and NextJS

Having trouble initializing and retrieving an array from the controller in AngularJS

Ways to adjust the position of a DIV based on its index value

Error always appears when using addMethod in jQuery validator

Identifying when a system window covers an iframe