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

【问题标题】：Fill select in html from array sent by nodejs从nodejs发送的数组中填充选择html
【发布时间】：2018-09-10 23:18:49
【问题描述】：

我是 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 中有一个选择表单，它由数组（数据）中的/作为选项提供，但我不知道如何。

我可以请人帮忙吗？

【问题讨论】：

所有 AJAX 和 node.js 的东西都是完全无关的。您只需向我们展示console.log(data) 的输出。构造一个选项元素很简单：$('<option>').val(1).text('blah')
用 jQuery 创建元素：api.jquery.com/jQuery/#jQuery2

标签： javascript jquery node.js ajax

【解决方案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);
     });
}

【讨论】：

谢谢。我将 select 放在 index.html 中，将 JS 放在 test.js 中，但下拉列表保持为空。我试图把它全部放在 index.html 中，结果相同。
@MaikelNight 这就是你生成它的方式。如果你正在结合你的需要，那么把这个js代码做一个函数，当你从API获取数据时调用它。
我在 JSFiddle 中设置了一个看起来像我的静态数组并编辑 opt.value = location; opt.innerHTML = 位置；它按预期工作。但是我不能让它在我的代码中与我的数组一起工作（如果我通过从 jsfiddle 复制和粘贴代码将它设置为静态，它也可以工作）。我相信它关于 test.js 调用并接收 index.html 的数组 onload 并且我不知道如何实现或更好地调用一个函数然后处理数组。
我编辑了我的答案。检查编辑，让我知道它是否有意义。
有道理，非常感谢。我将 obj.id 和 obj.name 编辑为“obj”，因为我的数组只是一个列表。它就像我现在所期望的那样工作！！！如果您有时间并喜欢它：“generateSelect(data);”到底发生了什么？和“generateSelect(dataArr)”？