Converting JSON data to DOM using jQuery

Question

I'm looking to convert each 'item'(from JSON) to appear inside a section(or div) with the image and its link appearing with the name, id, and price - how would this be done with jQuery. jQuery and JSON are below, I don't currently have any classes in the HTML other than 'placements-title' for the header and 'placements-items' for the section.

Current 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);


  }
});

Well with “each” you got the right keyword there already ... api.jquery.com/jquery.each — C3roe
– C3roe, Commented Jun 28, 2017 at 11:32
@CBroe I understand that however I'm struggling to add the JSON into the jQuery code, new to this :( — Kieran Smith
– Kieran Smith, Commented Jun 28, 2017 at 11:36
Well what exactly are you struggling with? You loop over data.placements[0].items, access the properties you are interested in inside the loop, and then do something with them ... — C3roe
– C3roe, Commented Jun 28, 2017 at 11:39

madalinivascu · Accepted Answer · 2017-06-28 11:40:53Z

Use a loop build the html as a string and append it to your desired dom element

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>

Collectives™ on Stack Overflow

Converting JSON data to DOM using jQuery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related