Javascript 仅从Mongodb获取第二行并使用Jade显示

我正在使用nodejs和findAll方法从mongodb获取数据。现在在jade模板引擎中，我想展示一些基本上是一个接一个的测验问题的数据，也就是说，只有第一条记录。首先显示集合中的第一个测验问题，然后单击“下一步”按钮，然后显示集合中的下一条记录，即第二个测验问题，依此类推

现在，我可以获取并显示第一个测验问题，但当我单击“下一步”按钮时，我在chrome的开发人员控制台上收到一个错误，该错误表示未捕获引用错误：MyQuike未定义。现在MyQuike是我的server.js的Mongodb中的一个partcollection。我如何从Jade中的MyQuike中获取第二条记录，以及当用户单击NEXT按钮时如何获取第二条记录。因为我成功地获取了第一条记录，但之后它就不起作用了

JADE代码如下所示：

doctype html

html(lang="en")

  head
    script(src="/javascripts/jquery-1.8.2.js")

    h1= title
  body
  div#myquestions
    ul
      li #{myquiz[0].Question}
      li #{myquiz[0].Option1}
      li #{myquiz[0].Option2}
      li #{myquiz[0].Option3}
      li #{myquiz[0].Option4}
      button(class="Button" id="NextButton") Next

    script(type="text/javascript"). 
     $(document).ready(function(){
       $("#NextButton").click(function() {
         $("#myquestions").html(myquiz[1].Question,myquiz[1].Option1,myquiz[1].Option2,myquiz[1].Option3,myquiz[1].Option4);
         });
       });

....
....
QuizProvider.prototype.getCollection = function(callback) {
  this.db.collection('myquiz', function(error, quiz_collection) {
    if( error ) callback(error);
    else callback(null, quiz_collection);
  });
};

QuizProvider.prototype.findAll = function(callback) {
    this.getCollection(function(error, quiz_collection) {
      if( error ) callback(error)
      else {
        quiz_collection.find().toArray(function(error, results) {
          if( error ) callback(error)
          else callback(null, results)
        });
      }
    });
};

var express = require('express')
  , routes = require('./routes')
  , user = require('./routes/user')
  , http = require('http')
  , path = require('path')
  , QuizProvider = require('./quizprovider').QuizProvider;

var app = express();

      app.use(express.logger('dev'));
      app.use(express.bodyParser());
      app.use(express.methodOverride());
      app.use(app.router);
      app.use(require('stylus').middleware(__dirname + '/public'));
      app.use(express.static(path.join(__dirname, 'public')));
    });

    app.configure('development', function(){
      app.use(express.errorHandler());
    });

    var qProvider= new QuizProvider('localhost', 27017);
    .....
    .....

        app.get('/', function(req, res){
          qProvider.findAll(function(error, ques){
              res.render('index', {
                    title: 'Questions',
                    myquiz:JSON.stringify(ques)
                });                            
          });
        });

doctype html
html(lang="en")
  head
    script(src="/javascripts/jquery-1.8.2.js")
    h1= title
  body   
   div#myquestions
   div#option1
   div#option2
   div#option3
   div#option4
   div#myNextbutton   
      button(class="Button" id="NextButton") Next
   div#mytextbox
      input(type="hidden" name="TextBox" id="TextBox" value="4")    

    script(type="text/javascript"). 
     $(function() {
         var availablTags = !{myquiz};
         var data = [];
         for(var i=0;i<availablTags.length;i++){
         data.push(availablTags[i]['Question']),
         data.push(availablTags[i]['Option1']),
         data.push(availablTags[i]['Option2']),
         data.push(availablTags[i]['Option3']),
         data.push(availablTags[i]['Option4'])
          }
         console.log(data);

         $( "#myquestions" ).html(data[0]);
         $( "#option1" ).html(data[1]);
         $( "#option2" ).html(data[2]);
         $( "#option3" ).html(data[3]);
         $( "#option4" ).html(data[4]);
         $("#NextButton").click(function(){
             var counter = $('#TextBox').val();
             counter++ ;
             $( "#myquestions" ).html(data[counter++]);
             $( "#option1" ).html(data[counter++]);
             $( "#option2" ).html(data[counter++]);
             $( "#option3" ).html(data[counter++]);
             $( "#option4" ).html(data[counter]);
             $('#TextBox').val(counter);
                });
         });

quizprovider.js的相关代码如下：

doctype html

html(lang="en")

  head
    script(src="/javascripts/jquery-1.8.2.js")

    h1= title
  body
  div#myquestions
    ul
      li #{myquiz[0].Question}
      li #{myquiz[0].Option1}
      li #{myquiz[0].Option2}
      li #{myquiz[0].Option3}
      li #{myquiz[0].Option4}
      button(class="Button" id="NextButton") Next

    script(type="text/javascript"). 
     $(document).ready(function(){
       $("#NextButton").click(function() {
         $("#myquestions").html(myquiz[1].Question,myquiz[1].Option1,myquiz[1].Option2,myquiz[1].Option3,myquiz[1].Option4);
         });
       });

....
....
QuizProvider.prototype.getCollection = function(callback) {
  this.db.collection('myquiz', function(error, quiz_collection) {
    if( error ) callback(error);
    else callback(null, quiz_collection);
  });
};

QuizProvider.prototype.findAll = function(callback) {
    this.getCollection(function(error, quiz_collection) {
      if( error ) callback(error)
      else {
        quiz_collection.find().toArray(function(error, results) {
          if( error ) callback(error)
          else callback(null, results)
        });
      }
    });
};

var express = require('express')
  , routes = require('./routes')
  , user = require('./routes/user')
  , http = require('http')
  , path = require('path')
  , QuizProvider = require('./quizprovider').QuizProvider;

var app = express();

      app.use(express.logger('dev'));
      app.use(express.bodyParser());
      app.use(express.methodOverride());
      app.use(app.router);
      app.use(require('stylus').middleware(__dirname + '/public'));
      app.use(express.static(path.join(__dirname, 'public')));
    });

    app.configure('development', function(){
      app.use(express.errorHandler());
    });

    var qProvider= new QuizProvider('localhost', 27017);
    .....
    .....

        app.get('/', function(req, res){
          qProvider.findAll(function(error, ques){
              res.render('index', {
                    title: 'Questions',
                    myquiz:JSON.stringify(ques)
                });                            
          });
        });

doctype html
html(lang="en")
  head
    script(src="/javascripts/jquery-1.8.2.js")
    h1= title
  body   
   div#myquestions
   div#option1
   div#option2
   div#option3
   div#option4
   div#myNextbutton   
      button(class="Button" id="NextButton") Next
   div#mytextbox
      input(type="hidden" name="TextBox" id="TextBox" value="4")    

    script(type="text/javascript"). 
     $(function() {
         var availablTags = !{myquiz};
         var data = [];
         for(var i=0;i<availablTags.length;i++){
         data.push(availablTags[i]['Question']),
         data.push(availablTags[i]['Option1']),
         data.push(availablTags[i]['Option2']),
         data.push(availablTags[i]['Option3']),
         data.push(availablTags[i]['Option4'])
          }
         console.log(data);

         $( "#myquestions" ).html(data[0]);
         $( "#option1" ).html(data[1]);
         $( "#option2" ).html(data[2]);
         $( "#option3" ).html(data[3]);
         $( "#option4" ).html(data[4]);
         $("#NextButton").click(function(){
             var counter = $('#TextBox').val();
             counter++ ;
             $( "#myquestions" ).html(data[counter++]);
             $( "#option1" ).html(data[counter++]);
             $( "#option2" ).html(data[counter++]);
             $( "#option3" ).html(data[counter++]);
             $( "#option4" ).html(data[counter]);
             $('#TextBox').val(counter);
                });
         });

app.js文件中的相关代码如下：

doctype html

html(lang="en")

  head
    script(src="/javascripts/jquery-1.8.2.js")

    h1= title
  body
  div#myquestions
    ul
      li #{myquiz[0].Question}
      li #{myquiz[0].Option1}
      li #{myquiz[0].Option2}
      li #{myquiz[0].Option3}
      li #{myquiz[0].Option4}
      button(class="Button" id="NextButton") Next

    script(type="text/javascript"). 
     $(document).ready(function(){
       $("#NextButton").click(function() {
         $("#myquestions").html(myquiz[1].Question,myquiz[1].Option1,myquiz[1].Option2,myquiz[1].Option3,myquiz[1].Option4);
         });
       });

....
....
QuizProvider.prototype.getCollection = function(callback) {
  this.db.collection('myquiz', function(error, quiz_collection) {
    if( error ) callback(error);
    else callback(null, quiz_collection);
  });
};

QuizProvider.prototype.findAll = function(callback) {
    this.getCollection(function(error, quiz_collection) {
      if( error ) callback(error)
      else {
        quiz_collection.find().toArray(function(error, results) {
          if( error ) callback(error)
          else callback(null, results)
        });
      }
    });
};

var express = require('express')
  , routes = require('./routes')
  , user = require('./routes/user')
  , http = require('http')
  , path = require('path')
  , QuizProvider = require('./quizprovider').QuizProvider;

var app = express();

      app.use(express.logger('dev'));
      app.use(express.bodyParser());
      app.use(express.methodOverride());
      app.use(app.router);
      app.use(require('stylus').middleware(__dirname + '/public'));
      app.use(express.static(path.join(__dirname, 'public')));
    });

    app.configure('development', function(){
      app.use(express.errorHandler());
    });

    var qProvider= new QuizProvider('localhost', 27017);
    .....
    .....

        app.get('/', function(req, res){
          qProvider.findAll(function(error, ques){
              res.render('index', {
                    title: 'Questions',
                    myquiz:JSON.stringify(ques)
                });                            
          });
        });

doctype html
html(lang="en")
  head
    script(src="/javascripts/jquery-1.8.2.js")
    h1= title
  body   
   div#myquestions
   div#option1
   div#option2
   div#option3
   div#option4
   div#myNextbutton   
      button(class="Button" id="NextButton") Next
   div#mytextbox
      input(type="hidden" name="TextBox" id="TextBox" value="4")    

    script(type="text/javascript"). 
     $(function() {
         var availablTags = !{myquiz};
         var data = [];
         for(var i=0;i<availablTags.length;i++){
         data.push(availablTags[i]['Question']),
         data.push(availablTags[i]['Option1']),
         data.push(availablTags[i]['Option2']),
         data.push(availablTags[i]['Option3']),
         data.push(availablTags[i]['Option4'])
          }
         console.log(data);

         $( "#myquestions" ).html(data[0]);
         $( "#option1" ).html(data[1]);
         $( "#option2" ).html(data[2]);
         $( "#option3" ).html(data[3]);
         $( "#option4" ).html(data[4]);
         $("#NextButton").click(function(){
             var counter = $('#TextBox').val();
             counter++ ;
             $( "#myquestions" ).html(data[counter++]);
             $( "#option1" ).html(data[counter++]);
             $( "#option2" ).html(data[counter++]);
             $( "#option3" ).html(data[counter++]);
             $( "#option4" ).html(data[counter]);
             $('#TextBox').val(counter);
                });
         });

---

现在，当用户单击“下一步”按钮时，我如何从集合中提取并显示第二条记录，即第二个测验问题。我这样做是正确的还是有其他方法可以实现这一点。请帮助大家。

各位，我终于找到了解决此问题的方法。首先，我对问题执行了JSON.stringify操作，然后检索到了问题使用push操作将记录转换为Javascript数组数据，然后显示数组元素si.e。使用Jquery的数据元素

$( "#myquestions" ).html(data[0]);
$( "#option1" ).html(data[1]);
$( "#option2" ).html(data[2]);
$( "#option3" ).html(data[3]);
$( "#option4" ).html(data[4]);

现在，要从数组中获取并显示第二条记录，单击“下一步”按钮，我使用了一个计数器。计数器的初始值存储在一个隐藏的文本框中，然后计数器以递增的方式从数组中逐个获取记录，然后使用Jquery.html方法显示这些记录。代码如下：

doctype html

html(lang="en")

  head
    script(src="/javascripts/jquery-1.8.2.js")

    h1= title
  body
  div#myquestions
    ul
      li #{myquiz[0].Question}
      li #{myquiz[0].Option1}
      li #{myquiz[0].Option2}
      li #{myquiz[0].Option3}
      li #{myquiz[0].Option4}
      button(class="Button" id="NextButton") Next

    script(type="text/javascript"). 
     $(document).ready(function(){
       $("#NextButton").click(function() {
         $("#myquestions").html(myquiz[1].Question,myquiz[1].Option1,myquiz[1].Option2,myquiz[1].Option3,myquiz[1].Option4);
         });
       });

....
....
QuizProvider.prototype.getCollection = function(callback) {
  this.db.collection('myquiz', function(error, quiz_collection) {
    if( error ) callback(error);
    else callback(null, quiz_collection);
  });
};

QuizProvider.prototype.findAll = function(callback) {
    this.getCollection(function(error, quiz_collection) {
      if( error ) callback(error)
      else {
        quiz_collection.find().toArray(function(error, results) {
          if( error ) callback(error)
          else callback(null, results)
        });
      }
    });
};

var express = require('express')
  , routes = require('./routes')
  , user = require('./routes/user')
  , http = require('http')
  , path = require('path')
  , QuizProvider = require('./quizprovider').QuizProvider;

var app = express();

      app.use(express.logger('dev'));
      app.use(express.bodyParser());
      app.use(express.methodOverride());
      app.use(app.router);
      app.use(require('stylus').middleware(__dirname + '/public'));
      app.use(express.static(path.join(__dirname, 'public')));
    });

    app.configure('development', function(){
      app.use(express.errorHandler());
    });

    var qProvider= new QuizProvider('localhost', 27017);
    .....
    .....

        app.get('/', function(req, res){
          qProvider.findAll(function(error, ques){
              res.render('index', {
                    title: 'Questions',
                    myquiz:JSON.stringify(ques)
                });                            
          });
        });

doctype html
html(lang="en")
  head
    script(src="/javascripts/jquery-1.8.2.js")
    h1= title
  body   
   div#myquestions
   div#option1
   div#option2
   div#option3
   div#option4
   div#myNextbutton   
      button(class="Button" id="NextButton") Next
   div#mytextbox
      input(type="hidden" name="TextBox" id="TextBox" value="4")    

    script(type="text/javascript"). 
     $(function() {
         var availablTags = !{myquiz};
         var data = [];
         for(var i=0;i<availablTags.length;i++){
         data.push(availablTags[i]['Question']),
         data.push(availablTags[i]['Option1']),
         data.push(availablTags[i]['Option2']),
         data.push(availablTags[i]['Option3']),
         data.push(availablTags[i]['Option4'])
          }
         console.log(data);

         $( "#myquestions" ).html(data[0]);
         $( "#option1" ).html(data[1]);
         $( "#option2" ).html(data[2]);
         $( "#option3" ).html(data[3]);
         $( "#option4" ).html(data[4]);
         $("#NextButton").click(function(){
             var counter = $('#TextBox').val();
             counter++ ;
             $( "#myquestions" ).html(data[counter++]);
             $( "#option1" ).html(data[counter++]);
             $( "#option2" ).html(data[counter++]);
             $( "#option3" ).html(data[counter++]);
             $( "#option4" ).html(data[counter]);
             $('#TextBox').val(counter);
                });
         });

这是我能想到的一个逻辑，它是有效的。但如果你们有更好的建议，请让我知道。希望这个解决方案也能帮助其他面临同样问题的人