将Javascript对象的内容附加到HTML

Appending to HTML a content of a Javascript object

本文关键字:HTML Javascript 对象      更新时间:2023-09-26

试图破解我遇到的这个小问题。。

我正在使用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(''));

玩一玩,直到它达到你想要的效果。