使用jQuery將JSON數據轉換為DOM

Question

我正在尋找將每個'item'（來自JSON）轉換為出現在帶有圖像，其鏈接以名稱，id和價格顯示的節（或div）內的方法-jQuery如何做到這一點。 jQuery和JSON在下面，我目前在HTML中沒有任何類，除了標題的“ placements-title”和本節的“ placements-items”以外。

當前的jQuery：

$.ajax({
  type: 'GET',
  url: 'pathtoJSONdata.json',
  dataType: 'json',
  success: function (data) {
     $(".placements-title h2").append(data.placements[0].message);
     $(".placements-items").append(data.placements[0].items[1].id);


  }
});

Answer 1

使用循環將html作為字符串構建並將其附加到所需的dom元素

 var data = { "placements": [{ "message": "If you like this, you might be into these", "items": [{ "id": "029148", "name": "Woodblock Play Suit", "linkURL": "http://www.warehouse.co.uk/gb/just-arrived/all/woodblock-play-suit/029148.html", "imageURL": "http://demandware.edgesuite.net/aaxe_prd/on/demandware.static/-/Sites-WAREHOUSE/default/dw0f93fcd4/images/hi-res/warehouse_02914899_2.jpg", "price": "46.00" }, { "id": "0294526806", "name": "Smock Dress", "linkURL": "http://www.warehouse.co.uk/gb/just-arrived/all/smock-dress/0294526806.html", "imageURL": "http://demandware.edgesuite.net/aaxe_prd/on/demandware.static/-/Sites-WAREHOUSE/default/dwc9d5ea05/images/hi-res/warehouse_02945268_5.jpg", "price": "39.00" }, { "id": "0297180006", "name": "Cami", "linkURL": "http://www.warehouse.co.uk/gb/just-arrived/all/cami/0297180006.html", "imageURL": "http://demandware.edgesuite.net/aaxe_prd/on/demandware.static/-/Sites-WAREHOUSE/default/dw4b954022/images/hi-res/warehouse_02971800_2.jpg", "price": "9.00" }, { "id": "0298473606", "name": "Asymmetric Wrap Cami Dress", "imageURL": "http://demandware.edgesuite.net/aaxe_prd/on/demandware.static/-/Sites-WAREHOUSE/default/dw686fea84/images/hi-res/warehouse_02984736_2.jpg", "price": "46.00" }, { "id": "0297155306", "name": "Casual Stripe Tee", "linkURL": "http://www.warehouse.co.uk/gb/just-arrived/all/casual-stripe-tee/0297155306.html", "imageURL": "http://demandware.edgesuite.net/aaxe_prd/on/demandware.static/-/Sites-WAREHOUSE/default/dw4609af3e/images/hi-res/warehouse_02971553_2.jpg", "price": "16.00" } ] }] } $.each(data.placements[0].items,function(i,v){ $('body').append('<img src="'+v.imageURL+'" height="50" width="50"><div class="placements-title"><a href="'+v.linkURL+'"><h2>'+v.name+'</h2>'+v.price+'</div>') }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>