2016-06-17 16 views
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) 
}) 

答えて

2

<img />のURLはsrcプロパティに配置する必要があり、その要素は自動閉鎖です。別の終了タグはありません。このお試しください:

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

Updated fiddle

をまた、あなただけの単一の文字列を使用することができ、あなたが一緒に文字列リテラルを追加する必要はありませんので注意してください。

+0

「img」のような要素の仕様は[void element](https://www.w3.org/TR/html5/syntax.html#void-elements)です。 HTMLでは、 '>'の前の '/'は完全にオプションです。 (XHTMLでは必須です) –

+0

興味深いことに、Rory!だからシンプル:) –

+0

@ T.J.Crowder真、その部分は個人的な好みです。いずれにしても、 ' http://foo.com/bar.jpg'を使用すると正しくありません。 –

関連する問題