Pier February 2016

getJSON - append Images array

I want to display data from a JSON file through an Ajax request. I display every data value except the array of images. Where am I wrong? Here is the JSON:

{
"item": {
    "name": "ABITO CORTO",
    "details": "Maglia leggera, Collo a V, Interno semi-foderato, Logo.",
    "composition": "Composizione: 94% Viscosa, 6% Elastam.",
    "modelDetails": [
        "La modella indossa una taglia 40",
        "Misure: 86 - 60 - 90",
        "Altezza modella: 178cm"
    ],
    "images": [
        "http://cdn.yoox.biz/34/34295573it_12n_f.jpg",
        "http://cdn.yoox.biz/34/34295573it_12n_r.jpg",
        "http://cdn.yoox.biz/34/34295573it_12n_e.jpg",
        "http://cdn.yoox.biz/34/34295573it_12n_d.jpg"
              ]
       }
}

HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<body>

  <button id="driver">ONE</button>
  <div class="news_details_container">
  <img src="" alt="" >
  </div>

  </body>
  </html>

SCRIPT:

$("#driver").click( function() {
            $.getJSON( "assets/data/one.json", function(data) { 
            $.each(data, function(key, value) { 
            $(".news_details_container").append(value.name);
            $(".news_details_container").append(value.details);
            $(".news_details_container").append(value.coposition );
            $(".news_details_container").append(value.modelDetails);
            $(".news_details_container").append('<img src="' + value.images + '" />'); 
           });
     });
});

I'm new to Ajax+ JSON. Can anyone help me? Thanks.

Answers


madalin ivascu February 2016

You have a array of img src you need a loop to display all

Try:

    $("#driver").click( function() {
           $.getJSON( "assets/data/one.json", function(data) { 
              $.each(data, function(key, value) { 
                $(".news_details_container").append(value.name);
                $(".news_details_container").append(value.details);
                $(".news_details_container").append(value.coposition );
                $(".news_details_container").append(value.modelDetails);
                $.each(value.images, function(i, v) {
                $(".news_details_container").append('<img src="' + v+ '" />'); 
               });
             });
          });
   });


Rory McCrossan February 2016

You're only returning a single parent object, so you don't need to use each at that point. You do however need to loop over the returned images property. Try this:

$("#driver").click(function() {
    $.getJSON("assets/data/one.json", function(data) {  
        var $container = $(".news_details_container");
        $container.append(data.item.name + ' ' + data.item.details + ' ' + data.item.composition + ' ' + data.item.modelDetails.join(' '));
        $.each(data.item.images, function(i, url) {
            $container.append('<img src="' + url + '" />'); 
        });
     });
});

Post Status

Asked in February 2016
Viewed 1,056 times
Voted 13
Answered 2 times

Search




Leave an answer