JQuery appending '[object, Object]' rather than image

Question

I am using the $.getJSON function of JQuery to download the urls of some images and I am trying to output them inside a div. I am trying to get the output to look like this:

<a href="the image url (shot.short_url)"><img src="the direct image url (shot.image_teaser_url)" /></a>

However, it is outputting this instead:

<div id="body-wrapper">
    <a href="http://drbl.in/300896">[object Object]</a>
    <a href="http://drbl.in/298080">[object Object]</a>
    <a href="http://drbl.in/290395">[object Object]</a>
    <a href="http://drbl.in/290324">[object Object]</a>
    <a href="http://drbl.in/268595">[object Object]</a>
    <a href="http://drbl.in/265197">[object Object]</a>
    <a href="http://drbl.in/256368">[object Object]</a>
    <a href="http://drbl.in/252519">[object Object]</a>
    <a href="http://drbl.in/242235">[object Object]</a>
    <a href="http://drbl.in/241676">[object Object]</a>
</div>

Please can you tell me where I am going wrong in the case out outputting the image?

This is my code:

function work() {
            $('#body-wrapper').empty();
            $.getJSON("http://dribbble.com/jakekrehel/shots.json?callback=?", function(data){
                $.each(data.shots, function(i,shot){
                  var image = $('<img/>').attr('src', shot.image_teaser_url);
                  var title = '<a href=\"' + shot.short_url + '\">';
                  var string = title;
                  string = string + image;
                  string = string + '</a>';
                  $('#body-wrapper').append(string);
                });
              });
        }

It's an object not a string. Dereference it to the url value. — Joe
– Joe, Commented Oct 24, 2011 at 23:20
Thanks man, I'm using var image = '<img src=\"' + shot.image_teaser_url + '\" />'; now. — max_
– max_, Commented Oct 24, 2011 at 23:23

user834595 · Accepted Answer · 2011-10-24 23:24:39Z

3

image is a jQuery object and not a String - so appending it to a String will produce [object Object]

Ideally, change everything into an object - e.g.

$('#body-wrapper').append(
    $("<a/>",{"href": shot.short_url}).append(
    $("<img/>",{"src": shot.image_teaser_url}));

or cheat and do this string = string + image.html();

Either should work

Note: I typed those without syntax checking and there's a LOT of brackets, did my best tho!

answered Oct 24, 2011 at 23:24

user834595

Sign up to request clarification or add additional context in comments.

Comments

Phil · Accepted Answer · 2011-10-24 23:21:36Z

1

Try this within your .each() callback

// create image
var image = $('<img>').attr('src', shot.image_teaser_url);

// create anchor and append image
var anchor = $('<a>').attr('href', shot.short_url).append(image);

// append anchor to container
$('#body-wrapper').append(anchor);

answered Oct 24, 2011 at 23:21

Phil

166k25 gold badges265 silver badges269 bronze badges

2 Comments

max_ Over a year ago

I did var image = '<img src=\"' + shot.image_teaser_url + '\" />'; instead, and it works perfectly.

Phil Over a year ago

@XcodeDev No, it doesn't. If the image_teaser_url or short_url strings contain any HTML characters, it could mess up your document or worse, introduce an XSS vulnerability. Use the appropriate DOM methods instead.

Collectives™ on Stack Overflow

JQuery appending '[object, Object]' rather than image

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related