getJSON - append Images array

Question

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.

Try `console.log(value.images)` and see what it outputs.. – Ognjen Babic Feb 08 '16 at 11:00 — Ognjen Babic, Feb 08 '16 at 11:00

score 0 · Accepted Answer · answered Feb 08 '16 at 11:02

0

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+ '" />'); 
               });
             });
          });
   });

answered Feb 08 '16 at 11:02

madalinivascu

32,064
4
39
55

It works,thanks :) If I can, I have three more questions : 1) .news_details_container is smaller than the received images. Is there a way to display pictures in thumbnail format? I have to stylize everything in HTML, right? 2) How can I stop the request after receiving on? If I press the button, the data are received again, and again.... 3) Why it doesn't work with Google Chrome? In the console I see the following message: "Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource." Thanks a lot. – Pier Feb 08 '16 at 11:38
for thumbnail you need to style it, to stop the request disable the click event/hide the click button,for the error you need a CORS header see: https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS for more info – madalinivascu Feb 08 '16 at 11:47

score 0 · Answer 2 · answered Feb 08 '16 at 11:04

0

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 + '" />'); 
        });
     });
});

answered Feb 08 '16 at 11:04

Rory McCrossan

331,213
40
305
339

It works,thanks :) If I can, I have three more questions : 1) .news_details_container is smaller than the received images. Is there a way to display pictures in thumbnail format? I have to stylize everything in HTML, right? 2) How can I stop the request after receiving on? If I press the button, the data are received again, and again.... 3) Why it doesn't work with Google Chrome? In the console I see the following message: "Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource." Thanks a lot. – Pier Feb 08 '16 at 11:38
1) That's very broad, you should start a new question for that. 2) Store a flag when the request completes and check that flag isn't set when clicking the button again. 3) There's no workaround for that, you're being stopped by the Same Origin Policy. See this question for more details: http://stackoverflow.com/questions/3076414/ways-to-circumvent-the-same-origin-policy. I don't see why you're getting that here though as it's a relative path. Do you have any other requests being made to 3rd party domains? – Rory McCrossan Feb 08 '16 at 11:40
Sorry about this, I am also new in StackOverflow, I don't know yet move so well in the platform. Thanks for everything. :) – Pier Feb 08 '16 at 13:08

getJSON - append Images array

2 Answers2