Question

我使用findAll()方法使用nodejs从mongodb获取数据。现在在玉石模板引擎中，我想逐一显示数据（基本上是一些测验问题），即只有第一个记录（即来自集合的第一个测验问题）将首先显示，然后是“下一个”＃。按钮将被点击，然后收集下一个记录，即第二个测验问题将被显示，等等。

现在我可以获取并显示第一个测验问题，但是当我点击＆＃34; NEXT＆＃34;按钮我在chrome的开发者控制台上收到错误"Uncaught ReferenceError: myquiz is not defined"。现在myquiz是我的server.js的一部分（Mongodb中的集合）。如何在Jade中从myquiz获取第二条记录，当用户点击＆＃34; NEXT＆＃34;按钮。由于我成功获取了第一张唱片，但在此之后它无效。

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.js的相关代码如下：

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

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

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

现在我如何从集合中获取和显示第二条记录，即当用户点击＆＃34; NEXT＆＃34; button.Am我这样做是正确的，还是有其他办法来实现这一目标。请帮助。

Answer 1

伙计们我终于设法找到了解决这个问题的方法。首先我在JSON.stringify上执行ques操作，然后使用data将记录检索到Javascript数组push操作然后使用Jquery显示数组元素（即data元素）。

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

现在从数组中获取并显示第二条记录（在＆＃34; NEXT＆＃34;按钮点击）我使用了一个计数器。计数器的初始值存储在一个文本框中（隐藏），然后是计数器递增以便从数组中逐个获取记录，然后使用Jquery .html()方法显示这些记录。代码如下：

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

这是我能想到的一个逻辑并且它有效。但是如果你们有任何更好的建议请告诉我。希望这个解决方案可以帮助那些面临同样问题的其他人。

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

1 个答案: