Question

我是Node / JS / Ajax以及所有其他东西的新角。我有一个发送数组响应的应用程序。我想在我的html中从该数组中填充一个选择。这是我到目前为止所拥有的：

app.js

app.get('/', function(req, res) {
    res.sendFile('/public/html/index.html');
});

app.get('/collectionnames', 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('mydb');
        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...")
                console.log(collectionnames);
                res.send(collectionnames);
            });
        });
    });

我的index.html

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/css/style.css">
 </head<
<body onload="getCollections()">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="javascript/test.js"></script>
 </body>
</html>

我的test.js

function getCollections() {
    $.ajax({
    type: "GET",
    url: '/collectionnames',
    })  
//    .done(function(data) {
//            alert(data.join(' '));
//   })
}

就目前而言，这是可行的，因为我通过test.js接收到了数组/值，并可以通过“ alert（data.join（''））;”看到它。我现在想要的是在index.html中有一个选择表单，该表单由数组（数据）中的/作为选项提供，但我不知道如何。

我可以请人帮忙吗？

Answer 1

假设您有这个：

<select id="location-select" class="" name="" hidden></select>

您的JS如下所示：

const locationArr = data; //your array data
let locationSelector = document.querySelector("#location-select");

if(locationArr.length){
  locationSelector.hidden = false;
}
locationArr.forEach((location, index) => {
    let opt = document.createElement("option");
    opt.value = location.id;
    opt.innerHTML = location.location_name;
    locationSelector.appendChild(opt);
});

编辑： 进行以下更改：

index.html

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/css/style.css">
 </head<
<body onload="getCollections()">
<select id="my-select" class="" name="" hidden></select>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="javascript/test.js"></script>
 </body>
</html>

test.js

function getCollections() {
    $.ajax({
    type: "GET",
    url: '/collectionnames',
    })
   .done(function(data) {
           alert(data.join(' '));
           generateSelect(data);
  })
}

function generateSelect(dataArr){
     let mySelect = document.querySelector("#my-select");

     if(dataArr.length){
       mySelect.hidden = false;
     }
     dataArr.forEach((obj, index) => {
         let opt = document.createElement("option");
         opt.value = obj.id;
         opt.innerHTML = obj.name;
         mySelect.appendChild(opt);
     });
}

从nodejs发送的数组中填充选择html

1 个答案: