Append img tag with src from a JavaScript object?

Question

I'm trying fetch to add an image from a Javascript Object and wrap it in an img tag - how do I do this correctly? Adding just img as an element doesn't work so whats the best way to do this?

Fiddle: https://jsfiddle.net/hszxbmrx/6/

Javascript Object:

var retailerData = {
"del": {
    "zip": "",
    "city": ""
},
"user": {
    "country": "",
    "phone": "",
    "nbrOrders": 0,
    "name": "",
    "salesPerson": "",
    "customerNo": "",
    "email": ""
},
"order": {
    "shippingSum": 0.0,
    "orderno": "0",
    "voucher": "",
    "currency": "SEK",
    "orderVat": 3322.5,
    "orderSum": 13290.0,
    "items": [{
        "qtyAvail": 0,
  "imageURI":"http://www.windowspasswordsreset.com/windows-password-knowledge/images/dell-laptop.jpg",
        "price": 6295.0,
        "qty": 1,
  "id":"244992",
        "artno": "DEL-17812033.10-4",
        "label": "E7240&#x2F;i5-4310U&#x2F;4GB1&#x2F;128SSD&#x2F;12,5HD&#40;1366x768&#41;&#x2F;W7P 3-Cell&#x2F;CAM&#x2F;3YRNBD&#x2F;W8.1P&#x2F;US int Keyboard",
        "category": "Computers - Notebooks",
        "manufacturer": "Dell"
    }, {
        "qtyAvail": 31,
  "imageURI":"http://www.windowspasswordsreset.com/windows-password-knowledge/images/dell-laptop.jpg",
        "price": 6995.0,
        "qty": 1,
        "artno": "20BV001KUK",
        "label": "Lenovo ThinkPad T450 20BV - 14&#34; - Core i3 5010U - 4 GB RAM - 500 GB Hybrid Drive",
        "category": "Computers - Notebooks",
        "manufacturer": "Lenovo"
    }]
 }
}

Script:

$.each(retailerData.order.items,function(i,v){//get the item 
var div = $('<div class="test">') 
div.append('item '+ '<img>'+ v.imageURI+'</img>' + '<span       class="art">'+ v.artno+'</span>' + '<span class="price">'+ v.price+'</span>' ) 
$('.carttable').append(div) 
})

Rory McCrossan · Accepted Answer · 2016-06-17 07:12:53Z

2

The URL of the <img /> should be placed in the src property, and the element is self closing; it does not have a separate closing tag. Try this:

div.append('item <img src="' + v.imageURI + '" /><span class="art">' + v.artno + '</span><span class="price">' + v.price + '</span>')

Updated fiddle

Also note that you don't need to append string literals together, you can just use a single string.

answered Jun 17, 2016 at 7:12

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

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

2 Comments

T.J. Crowder Over a year ago

The spec's term for elements like img is void element. In HTML, the / before the > is completely optional. (It would be required in XHTML.)

Rory McCrossan Over a year ago

@T.J.Crowder true, that part is personal preference. Either way, using <img>http://foo.com/bar.jpg</img> is incorrect.

Collectives™ on Stack Overflow

Append img tag with src from a JavaScript object?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related