Я определяю три массива в моем файле index.js, но мой файл index.ejs может идентифицировать только первый? - PullRequest
Новая
       11

Я определяю три массива в моем файле index.js, но мой файл index.ejs может идентифицировать только первый?

0 голосов
/ 21 ноября 2018

Я пытаюсь создать список дел с правилом 1-3-5, поэтому я создаю три HTML-формы и хочу сохранить их в трех разных массивах.Но похоже, что файл .ejs может получить доступ только к массиву задач, но не может идентифицировать задачу 3 и задачу 5.

Когда я запускаю код, браузер возвращает: задача 3 не определена.Я не могу понять, почему, пожалуйста, помогите!Спасибо!

index.js (контроллер) 

var express = require("express");
var bodyParser = require("body-parser");

var app = express();

app.use(bodyParser.urlencoded({ extended: true }));
app.set("view engine", "ejs");
//render css files
app.use(express.static("public"));

//placeholders for added task
var task = [];
var task3 = [];
var task5 = [];
//placeholders for removed task
var complete = [];

//post route for adding new task
app.post("/addtask", function(req, res) {
    var newTask = req.body.newtask;
    task.push(newTask);
    res.redirect("/");
});

app.post("/addtask3", function(req, res) {
    var newTask = req.body.newtask3;
    task3.push(newTask);
    res.redirect("/");
});

app.post("/addtask5", function(req, res) {
    var newTask = req.body.newtask5;
    task5.push(newTask);
    res.redirect("/");
});

app.post("/completetask", function(req, res) {
    var completeTask = req.body.check;
    //check for the "typeof" the different completed task, then add into the complete task
    if (typeof completeTask === "string") {
        complete.push(completeTask);
        //check if the completed task already exits in the task when checked, then remove it
        task.splice(task.indexOf(completeTask), 1);
    } else if (typeof completeTask === "object") {
        for (var i = 0; i < completeTask.length; i++) {
            complete.push(completeTask[i]);
            task.splice(task.indexOf(completeTask[i]), 1);
        }
    }
    res.redirect("/");
});

app.post("/removetask", function(req, res) {
    var removeTask = req.body.check;
    //check for the "typeof" the different completed task, then add into the complete task
    if (typeof removeTask === "string") {
        task.splice(task.indexOf(removeTask), 1);
    } else if (typeof removeTask === "object") {
        for (var i = 0; i < removeTask.length; i++) {
            task.splice(task.indexOf(removeTask[i]), 1);
        }
    }
    res.redirect("/");
});

//render the ejs and display added task, completed task
app.get("/", function(req, res) {
    res.render("index", { task: task, complete: complete });
});

//set app to listen on port 3000
app.listen(3000, function() {
    console.log("server is running on port 3000");
});

index.ejs (просмотрщик) 

<html>
<head>
<title> ToDo App </title>
    <link href="https://fonts.googleapis.com/css?family=Lato:100" rel="stylesheet">
    <link href="/styles.css" rel="stylesheet">
</head>

<body>
<div class="container">
<h1> ToDo List </h1>
<h2> 1 Big Thing </h2>
<form method="POST">
<p />
<input type="text" name="newtask" placeholder="add big task">
<button formaction="/addtask"> Add </button>
<button formaction="/completetask" type="submit" id="top"> Complete </button>
<button formaction="/removetask" type="submit" id="top"> Delete </button>
<% for( var i = 0; i < task.length; i++){ %>
    <li><input type="checkbox" name="check" value="<%= task[i] %>" /> <%= task[i] %> </li>
<% } %>

<h2> 3 Medium Things </h2>
<p />
<input type="text" name="newtask3" placeholder="add medium task">
<button formaction="/addtask3"> Add </button>
<button formaction="/completetask" type="submit" id="top"> Complete </button>
<button formaction="/removetask" type="submit" id="top"> Delete </button>
<% for( var i = 0; i < task3.length; i++){ %>
    <li><input type="checkbox" name="check" value="<%= task3[i] %>" /> <%= task3[i] %> </li>
<% } %>

<h2> 5 Small Things </h2>
<p />
<input type="text" name="newtask5" placeholder="add small task">
<button formaction="/addtask5"> Add </button>
<button formaction="/completetask" type="submit" id="top"> Complete </button>
<button formaction="/removetask" type="submit" id="top"> Delete </button>
</form>
<% for( var i = 0; i < task5.length; i++){ %>
    <li><input type="checkbox" name="check" value="<%= task5[i] %>" /> <%= task5[i] %> </li>
<% } %>

<h2> Completed task </h2>

 <% for(var i = 0; i < complete.length; i++){ %>
    <li><input type="checkbox" checked><%= complete[i] %> </li>
<% } %>

</div>

</body>
</html>

Ответы [ 2 ]

0 голосов
/ 21 ноября 2018

Поскольку при рендеринге страницы вы отправляете только задачу с сервера, вы не отправляете задачу 3 и задачу 5, вам необходимо отправить их тоже.

до того, как это было 

//render the ejs and display added task, completed task
app.get("/", function(req, res) {
    res.render("index", { task: task, complete: complete });
});

itдолжно быть что-то вроде ниже 

//render the ejs and display added task, completed task
app.get("/", function(req, res) {
    res.render("index", { task: task,task3:task3, task5:task5, complete: complete });

});

0 голосов
/ 21 ноября 2018

Ваша проблема с тем, что вы отправляете на ваш взгляд 

app.get("/", function(req, res) {
  res.render("index", { task: task, complete: complete });
});

Видите?Вы отображаете индекс представления, передавая ему два объекта: task и complete.Затем, по вашему мнению, вы пытаетесь получить доступ к task3, но вы никогда не отправляли его.Чтобы ваш код работал, вы должны изменить эту строку на 

app.get("/", function(req, res) {
  res.render("index", { task: task, task3: task3, task5: task5, complete: complete });
});

Или эту, если вы используете современную версию узла 

app.get("/", function(req, res) {
  res.render("index", { task, task3, task5, complete });
});
...