So erstellen Sie dynamisch ein Bootstrap-Dropdown basierend auf Daten

Question

So versuche ich derzeit, eine Warenkorb-Anwendung mit dem MEAN-Stapel (mongodb/mongoose, express, ajax, node.js) zu erstellen. Bootstrap verwenden, um die Site zu erstellen.

Es gibt Gruppen von Produkten, die erstellt oder zerstört werden können, so dass sie dynamisch erstellt werden müssen. Ich habe eine Sammlung in meiner Datenbank namens Gruppen. Es enthält ein Feld (groupName: "movies") und dann die ID, die mongo dafür erstellt. Also muss ich die Gruppensammlung durchgehen und für jede Gruppe eine Dropdown-Option für diese Gruppe erstellen.

Dies ist mein Controller für die Seite

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

Dieser Code keine Fehler erhalten, aber nicht eine der Drop-Down-Optionen drucken. Die Wile-Schleife ist, wo die Probleme auftreten.

Wenn ich ändern, dass die Schleife while (i < groups.length) {..} oder während (i < 2) {..} zu Testzwecken bekomme ich einen Fehler von Auslöser Range: Ungültige Stringlänge

Mit weiterer Erforschung dieses Fehlers scheint es nicht sehr klar zu sein, was genau auftreten kann.

Fehle ich einen Schritt in dem Versuch, die Gruppen zu durchlaufen?

Jede Hilfe/Anleitung wird sehr geschätzt.

Answer 1

Ihr createSelect ist asynchron und Sie verwenden es synchron, dh return dd gibt immer undefined zurück. Ändern Sie ihn auf diesem

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

Und verwenden Sie es wie folgt

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