将Javascript对象的内容附加到HTML
Appending to HTML a content of a Javascript object
试图破解我遇到的这个小问题。。
我正在使用parse.com来存储和检索数据,我有一个JSON对象,我正在尝试检索它的一部分,以附加到HTML 中
var tempObject = Parse.Object.extend("Dev");
var query = new Parse.Query(tempObject);
query.notEqualTo("objectId", "Dan Stemkoski");
query.find({
success: function(results) {
alert("Successfully retrieved " + results.length + " receipts");
for (var i = 0; i < results.length; i++) {
var object = results[i];
$("#receipts").html(object.get('receipt_title'));
console.log(object)
//alert(object.id + ' - ' + object.get('receipt_title'));`
我想在中显示的结果
<div id = receipts>
<div>
不幸的是,由于某种原因,我只得到了一行,而不是我应该得到的10行。我知道我应该以某种方式循环才能得到结果,但到目前为止,我所有的尝试都失败了。
提前感谢您的帮助!
您需要将结果添加到html中,因为现在您只需将上一个结果替换为下一个结果。代替
$("#receipts").html(object.get('receipt_title'));
尝试
var html = $("#receipts").html();
$("#receipts").html(html + object.get('receipt_title'));
此外,如果您想提高效率,最好继续添加变量并只向DOM写入一次。因此:
var html = "";
for(/* Do your for loop here, thats all correct*/){
/*Do everything the same apart from the $("#receipts").html() line*/
html += object.get('receipt_title');
}
$("#receipts").html(html);
修改DOM的次数越少越好。
从外观上看,实际上只得到最后一行。试着这样修复:
var tempObject = Parse.Object.extend("Dev");
var query = new Parse.Query(tempObject);
query.notEqualTo("objectId", "Dan Stemkoski");
query.find({
success: function(results) {
alert("Successfully retrieved " + results.length + " receipts");
// Clear existing html from #receipts
$("#receipts").html("");
for (var i = 0; i < results.length; i++) {
var object = results[i];
// Adds to html of previous results (empty on first result)
$("#receipts").html($("#receipts").html() + object.get('receipt_title'));
console.log(object)
//alert(object.id + ' - ' + object.get('receipt_title'));
}
}
});
不错。。事实上,我设法以不同的方式解决了这个问题:
$("#receipts").append(object.get('reciept_title'));
$("#receipts").append("<br>");
我试图弄清楚如何将结果居中,试图在append函数之后添加HTML,但由于某种原因,它破坏了代码
每次循环时都会覆盖#receives的内容。试试这个(在第一个警报之后):
var datas = new Array();
$.each(results, function(index, data) {
datas.push('<span>'+ data.receipt_title +'</span>');
});
$("#receipts").data(options.join(''));
玩一玩,直到它达到你想要的效果。
相关文章:
- 来自文本输入null的html javascript变量
- Html/Javascript-如何屏蔽除英国以外的所有欧盟国家,并允许所有非欧盟国家
- html+javascript:如何在某些条件下禁用dropdownlist中的null选项
- 在HTML/JavaScript中,有没有一种方法可以在图像开始加载时知道图像的最终布局尺寸
- HTML/Javascript表单会自动重置
- html/javascript中的可拖动文本
- 在HTML/JavaScript中减去两个数字
- 基本的HTML Javascript程序.这是怎么回事
- 一个html/javascript'小工具'知道用户何时单击了小部件外的任意位置
- HTML/JavaScript拖动&Drop-是否可以使重影图像*NOT*看起来'冲洗掉'
- 在HTML/Javascript文件中获取App Inventor 2变量值
- HTML/JavaScript表格标题
- 如何修复在浏览器中打开后出现在屏幕上的html/Javascript代码
- 在HTML JavaScript头部分运行Google脚本函数
- 如何在 html/javaScript/Jquery 中“浏览文件夹”
- 带有消息html/javascript的进度条
- 在html/javascript中请求撤消/重做事件
- 使用HTML/Javascript表单使用ActiveXObject创建带有嵌入图像的outlook电子邮件
- 使用html/javascript启动小部件
- 移动html/javascript编程中的变量传递