只从Mongodb中获取第二行,并使用Jade进行显示

Fetch second row only from Mongodb and display using Jade

本文关键字:显示 Jade 二行 Mongodb 获取 只从      更新时间:2023-09-26

我正在使用findAll()方法使用nodejs从mongodb获取数据。现在在jade模板引擎中,我想逐个显示数据(基本上是一些问答题),即最初只显示第一条记录(即收集的第一道问答题)。然后,当点击"下一步"按钮时,将显示收集的下一条记录,即第二道问答题,依此类推

现在我可以获取并显示第一个测试问题,但当我点击"下一步"按钮时,chrome的开发者控制台上出现了一个错误,上面写着"Uncaught ReferenceError: myquiz is not defined"。现在myquiz是我的server.js的一部分(Mongodb中的集合)。当用户单击"NEXT"按钮时,我如何从Jade中的myquiz中获取第二条记录。由于我成功地获得了第一张唱片,但在那之后就不起作用了。

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

现在,当用户单击"下一步"按钮时,我如何从集合中获取并显示第二条记录,即第二道问答题。我这样做是正确的,还是有其他方法可以实现这一点。请帮帮伙计们。

伙计们,我终于找到了这个问题的解决方案。首先,我对ques执行了JSON.stringify操作,然后使用push操作将记录检索到Javascript数组data中,然后使用Jquery显示数组元素(即data元素)。

$( "#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
   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);
                });
         });

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