Question

我有一个索引站点（EJS），它可以将数组读取为选择形式。

index.ejs

<html>
  <head>
  </head>
 <body>
    <center>        
        <form action="/dates" method="POST">
            <b>INDEX:</b>
                <select id="index" name="index" onchange="this.form.submit()">
                    <option id="0"> Please choose Index </option>
                    <% collectionnames.map(item=> { %>
                    <option id="<%= item._id%>"> <%= item %> </option>
                    <% }) %>
                    </select>
                <br>
        </form>
 </body>
</html>

选择索引后，它将索引值发布到app.js中的/ dates

app.js

var express = require('express');
var MongoClient = require('mongodb').MongoClient;
var app = express();
var bodyParser = require('body-parser');

    app.set('view engine', 'ejs');
    app.use(bodyParser.urlencoded({ extended: false }));
    app.use( bodyParser.json() );
    app.use(express.static('public'));

app.get('/', function(req, res) {
var collectionnames = [];
MongoClient.connect('mongodb://localhost:27017', { useNewUrlParser: true   }, function (err, client) {
        if (err) {
            console.log("Error");
        } else {
            console.log("Connected to MongoDB to get collections...");
        }
var db = client.db('my-mongodb');
    db.listCollections().toArray(function (err,collections) {
            collections.forEach(function(collection){       
                    var elem = new Object();
                    if (collection.name !== "system.indexes"){
                    //console.log(collection.name);
                    elem = collection.name;
                    collectionnames.push(elem);
                    };
                });
                console.log("got collections...")
                res.render('index.ejs' , { collectionnames: collectionnames } );
            });
        });
    });


            app.post('/dates', function (req, res) {
                  const postBody = req.body;
                  index = postBody.index;
                  var dates = [];
                    MongoClient.connect('mongodb://localhost:27017', { useNewUrlParser: true }, function (err, client) {
                        if (err) {
                            console.log("Error");
                        } else {
                            console.log("Connected to fetch results");
                        }
                        var db = client.db('my-mongodb');
                        db.collection (postBody.index, function(err, values){
                            values.find().sort({VALUETIME:+1}).toArray( function (err,results){
                                results.forEach(function(result){       
                                    dates.push(result.VALUEDATE);
                                    //console.log(elem)
                                });
                                console.log("got results...")
                                function onlyUnique(value, index, self) { 
                                    return self.indexOf(value) === index;
                                }
                                var unique = dates.filter( onlyUnique );
                                console.log(unique);
                                res.send(unique);
                        });
                    });
                });
            });

如何将数组“唯一”传递回index.ejs以另一种选择形式进行处理？现在发生的事情（使用res.send（unique））是我在浏览器中收到一个数组值列表：

0   "2018-09-01"
1   "2018-09-02"
2   "2018-09-05"
3   "2018-09-03"
4   "2018-09-04"
5   "2018-08-31"

更具体：如何将数组/值检索回我的index.ejs并对其进行处理？

谢谢。

Answer 1

您可以在for上使用collectionnames循环，例如：

//Assuming your `collectionnames = ['2018-09-01', '2018-09-02', '2018-09-03', '2018-09-04']`

<select id="selectId">
    <option value="">Select</option>
    <% if (collectionnames.length) { %>
        <% for (var i = 0; i < collectionnames.length; i++) { %>
            <option value="<%=collectionnames[i]%>"><%=collectionnames[i] %> </option>
        <% } %>
    <% } %>
</select>

编辑：如何将数据发送回同一ejs页？

要使用相同的ejs页，您需要使用单页应用程序方法。对于单页，您需要使用Ajax调用而不是form-submit来提交数据。查看this repository以及有关如何实现单页应用程序的各种示例。

此外，如果您不想进入单页应用程序，只需更改您的api响应，即可使用新数据呈现同一页面：

app.post('/dates', function (req, res) {
    const postBody = req.body;
    index = postBody.index;
    var dates = [];
    MongoClient.connect('mongodb://localhost:27017', { useNewUrlParser: true }, function (err, client) {
        if (err) {
            console.log("Error");
        } else {
            console.log("Connected to fetch results");
        }
        var db = client.db('my-mongodb');
        db.collection (postBody.index, function(err, values){
            values.find().sort({VALUETIME:+1}).toArray( function (err,results){
                results.forEach(function(result){       
                    dates.push(result.VALUEDATE);
                    //console.log(elem)
                });
                console.log("got results...")
                function onlyUnique(value, index, self) { 
                    return self.indexOf(value) === index;
                }
                var unique = dates.filter( onlyUnique );
                console.log(unique);

                // Change here
                res.render('index.ejs' , { collectionnames: unique });
        });
    });
});
});

提交POST并在Nodejs / EJS中处理结果

1 个答案: