LaVOZs

The World’s Largest Online Community for Developers

'; javascript - Create route from list item - LavOzs.Com

I create a list of fruits and I want to be able to click on a fruit in the list and open a new route with the fruits description. I am not sure how to set up the route to this 'productDescription.ejs' file.

app.js:

const express = require('express'),
    mongoose = require('mongoose'),
    logger = require('morgan'),
    bodyParser = require('body-parser');

let app = express();

app.set('view engine', 'ejs');
app.use(logger('dev'));
app.use(bodyParser.urlencoded({ extended: true}));

var products = [
    {
        name: 'Apple',
        description: 'Apple, (Malus domestica), fruit of the domesticated tree Malus domestica (family Rosaceae), one of the most widely cultivated tree fruits. The apple is a pome (fleshy) fruit, in which the ripened ovary and surrounding tissue both become fleshy and edible.'
    },
    {
        name: 'Apricots',
        description: 'An apricot is a fruit, or the tree that bears the fruit, of several species in the genus Prunus (stone fruits).'
    },
    {
        name: 'Avocado',
        description: 'Avocado, Persea americana, is an evergreen tree in the family Lauraceae which grown for its nutritious fruit.'
    },
    {
        name: 'Banana',
        description: 'A banana is a curved, yellow fruit with a thick skin and soft sweet flesh.'
    }
]

///////////ROUTES
//Home Page with list of products
app.get('/', function (req, res) {
    res.render('productList', {products:products});
});

//Page with the item description
app.get('/:products', function (req, res) {
    //THIS IS WHERE I NEED HELP
});

//LocalHost:3000 Port
app.listen(3000);

productList.ejs:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <title>Fruits</title>
</head>
<body>
  <ul class="list-group list-group-flush">
    <% products.forEach((prod) => { %>
      <li class="list-group-item"><a href=<%= products.name%>> <%= prod.name %> </a></li>
    <% }) %>
  </ul>
</body>
</html>

productDescription.ejs(What I want to show when a item is clicked on):

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <title>Fruits</title>
</head>
<body>
    <h1><%= products.name %></h1>
    <p><%= products.description %></p>
</body>
</html>

What the first page looks like with list items: enter image description here

You can place this in your code, and it should work

const productsParam = req.params.products;

const product = products.find(pro => pro.name === productsParam)

res.render('productDescription', {products:product});

Another way to do it, and which is more in standard is to use the index of the array as an id. and use that to get the value from the array

Note: to make it more conventional you could remove the s from the second routers products(change all occurrences). make it product instead.

Related
Create GUID / UUID in JavaScript?
Event binding on dynamically created elements?
How do I remove a property from a JavaScript object?
How to insert an item into an array at a specific index (JavaScript)?
Creating multiline strings in JavaScript
Get selected value in dropdown list using JavaScript
Get selected text from a drop-down list (select box) using jQuery
What is JSONP, and why was it created?
How can I remove a specific item from an array?
How do I return the response from an asynchronous call?