Appending to HTML a content of a Javascript object

Question

Trying to crack this little issue I have..

I am using parse.com to store and retrieve data and I have a JSON object I am trying to retrieve a part of to append to an 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'));`

The result I want to show in

<div id = receipts>
<div>

Unfortunately for some reason I am getting only one line instead of the 10 that I should be getting. I know I should loop somehow to get the results but all my tries have failed me so far.

Thanks in advance for help!

Answer 1

You need to add the result to the html, as right now you just replace the previous result with the next one. Instead of

$("#receipts").html(object.get('receipt_title'));

try

var html = $("#receipts").html();
$("#receipts").html(html + object.get('receipt_title'));

Also, just to mention, if you want to be efficient it might be better to just keep adding to a variable and write to the DOM only once. So:

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

The less times you modify the DOM, the better.

Answer 2

From the looks of it, you are actually getting only the last line. Try fixing it like this:

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

Answer 3

Nice.. I actually managed to solve it a bit differently:

   $("#receipts").append(object.get('reciept_title'));
   $("#receipts").append("<br>");

I am trying to figure out how to center the results, tried to add HTML after the append function but it broke the code for some reason

Answer 4

You're overwriting the contents of #receipts every time you loop through. Try this (after the first alert):

var datas = new Array();
$.each(results, function(index, data) {
    datas.push('<span>'+ data.receipt_title +'</span>');
});

$("#receipts").data(options.join(''));

Play around with it a little until it does what you want it to.