Data inside of For Loop is not displayed until form is submitted twice

user_14581248 0
Viewed 63

I am very new to web programming. When I try to put up the information on the home route, it doesn't display on the initial submit. It displays when the submit button is pressed again.

ISSUE

For example, I look up "Apple" then submit, it doesn't display anything. However, if I were to submit next item (ie. "Melon"), then it displays "Apple" on the web page. Then, if I submit "Milk," it now displays "Melon."

I am not sure where to look to fix or how to fix it. Any advice will be great!

Below is my home route EJS file:

<table class="table">
    <thead class="thead-dark">
      <tr>
        <th scope="col">#</th>
        <th scope="col">QTY</th>
        <th scope="col">Item</th>
      </tr>
    </thead>
    <tbody>
      <% for (let i=0; i<trackers.length; i++) { %>
        <tr>
          <th scope = "row"> <%= i+1; %> </th>
          <td><%= trackers[i].qty; %> </td>
          <td><%= trackers[i].item; %> </td>
        </tr>
      <% }; %> 
    </tbody>
  </table>
<form action="/" method="post">
    <input type="text" name="itm">
    <input type="number" name="qty" value=10>
    <button type="submit">Find</button>
</form>

Below is from my js file

app.get("/", function(req, res){
    res.render("home",{trackers:trackers});
});

app.post("/", function(req, res){

item = req.body.itm;
qty = req.body.qty;
   
const body = {
   item: itm,
   qty: qty,
 };
    
trackers.push(body); 
res.redirect("/");

});

express ejs node.js
1 Answers

I tested and your code is true, but only you should change 'item' variable to 'itm' in this line item = req.body.itm;

this is code that i tested and it's ok :

app.js :

var createError = require("http-errors");
var express = require("express");
var path = require("path");
var bodyParser = require("body-parser");

var app = express();

app.set("views", path.join(__dirname, "views"));
app.set("view engine", "ejs");

app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.use(express.static(path.join(__dirname, "public")));

let trackers = [];

app.get("/", function (req, res) {
  res.render("home", { trackers: trackers });
});

app.post("/", function (req, res) {
  itm = req.body.itm;
  qty = req.body.qty;

  const body = {
    item: itm,
    qty: qty,
  };

  trackers.push(body);
  res.redirect("/");
});

app.listen(3000, () =>
  console.log("Listening on: http://lcoalhost" + ":" + 3000)
);

views/home.ejs :

<!DOCTYPE html>
<html>
  <body>
    <table class="table">
        <thead class="thead-dark">
          <tr>
            <th scope="col">#</th>
            <th scope="col">QTY</th>
            <th scope="col">Item</th>
          </tr>
        </thead>
        <tbody>
          <% for (let i=0; i<trackers.length; i++) { %>
            <tr>
              <th scope = "row"> <%= i+1; %> </th>
              <td><%= trackers[i].qty; %> </td>
              <td><%= trackers[i].item; %> </td>
            </tr>
          <% }; %> 
        </tbody>
      </table>
    <form action="/" method="post">
        <input type="text" name="itm">
        <input type="number" name="qty" value=10>
        <button type="submit">Find</button>
    </form>
  </body>
</html>

package.js :

{
  "name": "express-template-engine-ejs",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./app.js"
  },
  "dependencies": {
    "body-parser": "^1.19.0",
    "ejs": "~2.6.1",
    "express": "~4.16.1"
  }
}
user_85084110
Related