Question

所以我目前正在尝试使用MEAN堆栈（mongodb / mongoose，express，ajax，node.js）构建购物车应用程序。使用bootstrap构建站点。

有些产品可以创建或销毁，因此需要动态创建。我的数据库中有一个名为groups的集合。它包含on field（groupName：'movies'），而不是mongo为其创建的id。因此，我需要浏览群组集合，并为每个群组创建该群组的下拉选项。

这是我的页面控制器

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

此代码不会出现任何错误，但不会打印任何下拉选项。问题正在发生。

当我将该循环更改为while（i＆lt; groups.length）{..}或while（i＆lt; 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(....);
});
....

如何基于数据动态创建引导下拉列表

1 个答案: