Retrieving images from Parse.com using javascript

Question

I need your help with this question. I tried like this:

var user = new Parse.User();    
var profilePhoto = document.createElement("img");
profilePhoto.setAttribute("src", user.get('photo').url);

I display all properties this way:

      // User Model
      // -----------
      Parse.initialize("id", "id"); 

    var User = new Parse.User(); 

    var TestCollection = Parse.Collection.extend({
        model: Parse.User
    }); 

    var collection = new TestCollection();
        collection.fetch({

        success: function(collection) {                 

                var table = document.createElement("table");
                var thead = document.createElement("thead");
                var tbody = document.createElement("tbody");                
                var tr_header = document.createElement("tr");
                tr_header.setAttribute("class", "header");
                table.setAttribute("class", "dataTable");
                table.setAttribute("id", "user_table");



                var td_header_name = document.createElement("td");
                var td_header_email = document.createElement("td");
                var td_header_num = document.createElement("td");
                var td_header_photo = document.createElement("td");

                var username_label = document.createTextNode("Username"); 
                var email_label = document.createTextNode("Email");
                var num_label = document.createTextNode("№");
                var photo_label = document.createTextNode("Photo");

                td_header_name.appendChild(username_label);
                td_header_email.appendChild(email_label);
                td_header_num.appendChild(num_label);
                td_header_photo.appendChild(photo_label);

                tr_header.appendChild(td_header_num);
                tr_header.appendChild(td_header_name);
                tr_header.appendChild(td_header_email);
                tr_header.appendChild(td_header_photo);
                thead.appendChild(tr_header);

                table.appendChild(thead);                   
                table.appendChild(tbody);

                collection.each(function(user) {

                var tr = document.createElement("tr");   

                var td_num = document.createElement("td");
                var td1 = document.createElement("td");
                var td2 = document.createElement("td");             
                var profilePhoto = document.createElement("td");    

                var number = document.createTextNode(collection.indexOf(user)+1);           
                var username = document.createTextNode(user.get('username')); 
                var email = document.createTextNode(user.get('email'));

                var img = document.createElement("img");
                var img_src = user.get('photo');                

                img.setAttribute("id", "img_user");
                img.setAttribute("src",  user.get('photo').url);

                td_num.appendChild(number);
                td1.appendChild(username);
                td2.appendChild(email);
                profilePhoto.appendChild(img);

                tr.appendChild(td_num);
                tr.appendChild(td1);
                tr.appendChild(td2);
                tr.appendChild(profilePhoto);

                tbody.appendChild(tr);

                table.appendChild(thead);
                table.appendChild(tbody);

                document.getElementById('user_list').appendChild(table);

    });
  },
  error: function(collection, error) {
    alert("Error: " + error.code + " " + error.message);
  }
});

But it happened nothing, the webpage didn't load. When I did like this code, but without url in the end, I checked with firebug and saw <img src="[object Object]">How can I retrieve images? Thank you.

EDIT

When I use object.get('photo').url I get undefined

Answer 1

I'm not 100% sure what your trying to do, but as far as trying to pull an image back depends on the context of your application.

Is this for a single or multiple image?

You could render an uploaded profile photo on a page with jQuery:

var profilePhoto = profile.get("photoFile"); $("profileImg")[0].src = profilePhoto.url();

-Query the content Class for the row which has the desired picture -Get the picture's URL -Set the source for an image element

More info here https://www.parse.com/docs/js_guide#objects-types

Example code:

 // Query the content class for rows where the image exists
    var Content = Parse.Object.extend("content");
    var query = new Parse.Query(Content);
    query.exists("image");
    query.find({
      success: function(results) {
        // If the query is successful, store each image URL in an array of image URL's
        imageURLs = [];
        for (var i = 0; i < results.length; i++) { 
          var object = results[i];
          imageURLs.push(object.get('image'));
        }
        // If the imageURLs array has items in it, set the src of an IMG element to the first URL in the array
        if(imageURLs.length > 0){
          $('#color').attr('src', imageURLs[0]);
        }
      },
      error: function(error) {
        // If the query is unsuccessful, report any errors
        alert("Error: " + error.code + " " + error.message);
      }
    });

Answer 2

I have no idea what https://www.parse.com/ actually is, but I did some quick research and I think you have to call the .url() method:
https://www.parse.com/questions/retrieve-image-using-javascript-api

Whenever you see [object Object] when you put something in a string, it means you tried to turn an object into a string. Here, user.get('photo').url is an object, not a string.