javascript - 如何根据数据动态创建 Bootstrap 下拉列表

Question

所以我目前正在尝试使用 MEAN 堆栈(mongodb/mongoose、express、ajax、node.js)构建购物车应用程序。使用 bootstrap 来构建网站。

有一些产品组可以创建或销毁，因此需要动态创建。我的数据库中有一个称为组的集合。它包含 on field(groupName: 'movies') 以及 mongo 为其创建的 id。因此，我需要浏览组集合，并为每个组创建一个下拉选项。

这是我的页面 Controller

//bring in models of data
var products = require('../models').Products;
var groups = require('../models').Groups;

//page functions go inside of module.exports
module.exports = {
    index: function(req, res){
        products.find({}, function(err, products){
            if(err){
                consol.log(err);
            }
            else{
                res.render('basic-page1', {dropdown: dropdown, title: 'Home', beforelogin: true, subtitle: 'Home', underheaderp: 'To search for products select a product group.'});

            }
        });
    }
}

var dropdown = function createSelect(){
    var dd = "";
    dd+= "<button class='btn btn-default dropdown-toggle' type='button' data-toggle='dropdown' id='dropdownProduct'>Please Select a Product Group<span class='caret'></span></button>";
    var group = groups.find({}, function(err, groups){
        if(err){
            console.log(err);
        }
        else{
            dd+="<ul class='dropdown-menu col-xs-5'>";
            var i = 0;
            while(i <= group.length){
                dd+="<li><a href='#'>Hockey Jerseys</a></li>";
            }
                dd+="</ul>";
        }
    });
    return dd;
}

此代码不会出现任何错误，但不会打印任何下拉选项。 wile 循环是问题发生的地方。

当我出于测试目的将该循环更改为 while(i < groups.length){..} 或 while(i < 2){..} 时，我收到错误RangeError:字符串长度无效

随着对该错误的进一步研究，似乎并不清楚到底发生了什么。

我在尝试循环各组时是否错过了一个步骤？

非常感谢任何帮助/指导。

Answer 1

您的 createSelect 是异步的，而您正在同步使用它，这意味着 return dd 将始终返回 undefined。改成这样

function createSelect(callback){ 
    var dd = "";
    dd+= "<button class='btn btn-default dropdown-toggle' type='button' data-toggle='dropdown' id='dropdownProduct'>Please Select a Product Group<span class='caret'></span></button>"; 
    groups.find({}, function(err, groups){ 
        if(err){   
             console.log(err);
        }else{ 
            dd+="<ul class='dropdown-menu col-xs-5'>"; 

            for(var i=0; i< groups.length;i++){ 
              //dd+="<li><a href='#'>Hockey Jerseys</a></li>"; 
              // update
              dd+="<li><a href='#'>" + groups[i].groupName + "</a></li>";
            } 
            dd+="</ul>"; 
            callback(dd);
        } 
    }); 
}

像这样使用它

....
createSelect(function(dropdown){
    res.render(....);
});
....