2014-09-05 2 views
0

Я извлекаю данные из mongodb, используя nodejs, используя метод findAll(). Теперь в jade templating engine я хотел бы показывать данные (которые в основном являются вопросами для викторины) один за другим, т.е. сначала будет отображаться только первая запись (то есть первый вопрос викторины из коллекции), а затем, когда будет нажата кнопка «NEXT», следующая запись из коллекции, то есть второй вопрос викторины будет показан и так далее.Извлеките второй ряд только из Mongodb и покажите, используя Jade

Теперь я могу получить и показать первый вопрос викторины, но когда я нажимаю кнопку «СЛЕДУЮЩИЙ», я получаю сообщение об ошибке на консоли разработчика хром, которая говорит "Uncaught ReferenceError: myquiz is not defined". Теперь myquiz является частью (сборником в Mongodb) моего сервера.js.Как я беру вторую запись с myquiz в Jade, и это тоже, когда пользователь нажимает кнопку «СЛЕДУЮЩИЙ». Поскольку мне удается получить первую запись, но после этого она не работает.

Код 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) 
       });        
      }); 
     }); 

Теперь, как я могу получить и отобразить вторую запись из коллекции, то есть второй вопрос викторины wh ru нажмите кнопку «NEXT». Я делаю это правильно или есть какой-либо другой способ достичь этого. Пожалуйста, помогите парням.

ответ

0

Ребята я, наконец, удалось найти решение этой problem.First я выполнил операцию по JSON.stringifyques и затем извлеченное записи в массиве Javascript data используя push операцию, а затем отображаются элементы массива (то есть. data элементы) с использованием Jquery.

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

Теперь, чтобы получать и отображать вторую запись из массива (на кнопку «NEXT» мыши) Я использовал начальное значение счетчика counter.The хранятся в текстовом поле (который скрыт), а затем счетчик в инкрементном порядке для извлечения записей один за другим из массива, а затем они отображаются с использованием метода 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); 
       }); 
     }); 

Это одна логика, я мог думать и works.But, если вы, ребята, есть какие-либо лучшее предложение, пожалуйста, дайте мне know.Hope решение помогает кто-то другой тоже, кто сталкивается с такой же проблемы.

Смежные вопросы