0
Javascriptオブジェクトからイメージを追加してimgタグにラップするために取得しようとしていますが、これを正しく行うにはどうすればいいですか? imgを要素として追加しても機能しないので、これを行う最も良い方法は何ですか?JavaScriptオブジェクトからsrcにimgタグを追加しますか?
フィドル:https://jsfiddle.net/hszxbmrx/6/
JavaScriptオブジェクト:
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/i5-4310U/4GB1/128SSD/12,5HD(1366x768)/W7P 3-Cell/CAM/3YRNBD/W8.1P/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" - Core i3 5010U - 4 GB RAM - 500 GB Hybrid Drive",
"category": "Computers - Notebooks",
"manufacturer": "Lenovo"
}]
}
}
スクリプト:
$.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)
})
「img」のような要素の仕様は[void element](https://www.w3.org/TR/html5/syntax.html#void-elements)です。 HTMLでは、 '>'の前の '/'は完全にオプションです。 (XHTMLでは必須です) –
興味深いことに、Rory!だからシンプル:) –
@ T.J.Crowder真、その部分は個人的な好みです。いずれにしても、 ' http://foo.com/bar.jpg'を使用すると正しくありません。 –