Отправьте POST и обработайте результат в Nodejs / EJS - PullRequest
Новая
       12

Отправьте POST и обработайте результат в Nodejs / EJS

0 голосов
/ 05 сентября 2018

У меня есть индексный сайт (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>

Когда выбран индекс, он публикует значение индекса в / date в app.js

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);
                        });
                    });
                });
            });

Как я могу просто передать массив "unique" обратно в мой index.ejs, чтобы обработать его в другой форме выбора? Что происходит сейчас (с res.send (уникальным)), так это то, что я получаю список в браузере со значениями массива: 

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 и что-то с этим сделать?

Спасибо.

1 Ответ

0 голосов
/ 06 сентября 2018

Вы можете использовать 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. Посмотрите этот репозиторий и различные примеры реализации одностраничного приложения.

Также, если вы не хотите заходить в одностраничное приложение, просто измените свой ответ 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 });
        });
    });
});
});
...