Ajax array con immagini

[meliupa]

Salve ragazzi, ho un file json dal quale prendere delle immagini e inserirle nel documento html, ho inserito questo codice, ma non va

$("#one").click(function() { 
         $.getJSON("data/one.json", function(obj){ 
            $.each(obj, function(key, value){ 
                $("#coldx").append("<ul>"+value.name+"</ul>","<ul>"+value.details+"</ul>","<ul>"+value.composition+"</ul>","<ul>"+value.modelDetails+"</ul>"); 
			});
            $.each(obj, function(src, value){ 
		for (var i =0; i <value.images.length; i++) {
    		$("#coldx").append('<img src="' + images[i] + '">');
			};
			});
         });

la prima parte funziona, la seconda no

il file json è questo

{
	"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"
		]
	}
}

e il codice html giusto per essere completi è questo

<div id="colsx">
    	<ul>
    	  <li id="one">one</li>
    	  <li id="two">two</li>
    	  <li id="three">three</li>
    	  <li id="four">four</li>
  	  </ul>
   	  </div>
    <div id="coldx">
   
    </div>

 

[WmbertSea]

Ciao, la console web mi restituisce l'errore "images is not defined".
L'oggetto a cui fa riferimento quella proprietà è value e resta tale anche dentro il ciclo for.
Ti sei dimenticato di specificarlo:
[/code]'<img src="' + value.images + '">'[/code]

Inoltre, non capisco perché ripeti due volte il metodo each per lo stesso oggetto. A meno che tu non abbia omesso delle altre parti quando hai postato sul forum, quella ripetizione è ridondante; potresti accorpare il tutto.

Io farei una cosa del genere:

$.getJSON("data/one.json", function(obj){
  $.each(obj, function(key, value){
    $("#coldx").append("<ul>"+value.name+"</ul>","<ul>"+value.details+"</ul>","<ul>"+value.composition+"</ul>","<ul>"+value.modelDetails+"</ul>");
    for (var i=0; i<value.images.length; i++){
      $("#coldx").append('<img alt="" src="'+ value.images[i] +'">');
    };
  });
});

Oppure, per farlo più stringato:

$.getJSON("data/one.json", function(obj){
  $.each(obj, function(key, value){ 
    $("#coldx").append("<ul>"+value.name, "<ul>"+value.details, "<ul>"+value.composition, "<ul>"+value.modelDetails
    , value.images.map(function(img){ return '<img alt="" src="'+ img +'">'; })
    );
  });
});

Addirittura, se l'oggetto JSON ha solo la proprietà "item" al suo interno, non ci sarebbe nemmeno bisogno di usare quell'each, ma basterebbe una variabile che faccia riferimento a tale proprietà:

$.getJSON("data/one.json", function(obj){
  var itm = obj.item;
  $("#coldx").append("<ul>"+itm.name, "<ul>"+itm.details, "<ul>"+itm.composition, "<ul>"+itm.modelDetails
    , itm.images.map(function(img){ return '<img alt="" src="'+ img +'">'; })
  );
});

Poi vedi tu.