使用 jQuery 将 JSON 数据转换为 DOM答案

【问题标题】：Converting JSON data to DOM using jQuery使用 jQuery 将 JSON 数据转换为 DOM
【发布时间】：2017-12-01 17:46:05
【问题描述】：

我希望将每个“项目”（来自 JSON）转换为显示在一个部分（或 div）中，其中图像及其链接显示为名称、id 和价格 - 如何使用 jQuery 完成。 jQuery 和 JSON 在下面，除了标题的“placements-title”和该部分的“placements-items”之外，我目前在 HTML 中没有任何类。

当前的 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);


  }
});

【问题讨论】：

好吧，有了“每个”，你已经找到了正确的关键字......api.jquery.com/jquery.each
@CBroe 我明白，但是我正在努力将 JSON 添加到 jQuery 代码中，这是新的:(
那么你到底在纠结什么？你循环data.placements[0].items，在循环中访问你感兴趣的属性，然后对它们做一些事情......

标签： javascript jquery html json dom

【解决方案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>')
})

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：