只从Mongodb中获取第二行,并使用Jade进行显示
Fetch second row only from Mongodb and display using Jade
我正在使用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);
});
});
这是我能想到的一个逻辑,它是有效的。但如果你们有什么更好的建议,请告诉我。希望这个解决方案也能帮助其他面临同样问题的人。
- 从桌面读取python文件时高亮显示代码
- 使用JS如何动态更改显示的html文件中的文本背景颜色
- 如何在生成下载文件时显示加载动画
- React重新渲染但未显示正确的组件
- nodejs-expressjs上传图像并显示它们
- 使用JSP从服务器检索和显示图像
- 在Jade中循环并显示来自Mongodb的数据
- 如何让我的bootstrap.css在nodes/express/jade中显示
- 为什么获胜't我的json对象的`email`属性显示在我的jade模板中
- 只从Mongodb中获取第二行,并使用Jade进行显示
- 如何使用NodeJS + ExpressJS将数组传递给Jade进行显示
- node.js和jade:显示属性值的内容——行提要不显示
- Javascript -显示'n'基于输入的文本框数量(由jade生成)
- Javascript、Jquery和jade:动态表单不显示在所有相关元素的实例中
- Jade/Node数据库数据不显示
- 帮助在jade express中显示变量
- 我的数据显示不正确.Jade和AngularJS
- 使用node.js, MySQL和Jade在浏览器中显示数据库内容
- Node.js与Express和Jade模板不显示leaflet.js地图
- 如何使用JADE显示和访问各个键值