Ajax array con immagini

meliupa

Nuovo Utente
2 Giu 2014
16
0
1
Salve ragazzi, ho un file json dal quale prendere delle immagini e inserirle nel documento html, ho inserito questo codice, ma non va

Codice:
$("#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
Codice:
{
	"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

HTML:
<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

Utente Attivo
28 Nov 2014
211
33
28
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:
Codice:
$.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:
Codice:
$.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à:
Codice:
$.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.
 
Discussioni simili
Autore Titolo Forum Risposte Data
localhost.nicola Passaggio array tramite ajax Ajax 3
M Fullcalendar in Codeigniter, un aiuto per la chiamata $ajax ? jQuery 0
R Aggiornare record mysql con Ajax, jQuery e php Ajax 2
P Funzione jQuery Ajax invio file a php jQuery 1
E Php select option e ajax PHP 23
Emix Select concatenate php sql ajax PHP 2
MarcoGrazia Valori di ritorno json via ajax non visti. jQuery 1
felino ASP.net MVC: Exception e chiamata AJAX ASP.NET 1
motleyrulez Ricerca filtro con Ajax PHP 1
max1974 Grafico Ajax Javascript 4
max1974 Struttura $.ajax Ajax 7
C la chiamata ajax non ritorna alcun dato Ajax 1
max1974 Lettura Risultato $.ajax Javascript 1
motleyrulez Chiamata ajax per tabella php PHP 3
max1974 [Javascript] Grafico chartjs con dati da J.ajax Javascript 3
O [PHP] inviare dati da form e script ajax PHP 0
F limit show datatable ajax Ajax 1
Domenico_Falco1 Rendere dinamico un sito web con chiamate ajax e php e variabili json PHP 12
G Eseguire codice solo al termine della chiamata ajax Ajax 1
L Problema jQuery validation AJAX (PHP 7) PHP 6
max1974 [Javascript] Grafico ajax non funziona Javascript 0
WorldWideWeb Ajax POST con risposta JSON Ajax 2
M leggere con jquery/ajax in una function javascript record di database sql server Javascript 0
A [Javascript] Ajax, Jquery e PHP Javascript 1
D [Javascript] pulsanti per comandi shell con php e ajax Ajax 7
X Problema con jquery e ajax jQuery 2
B [PHP] variabili globali in chiamate ajax PHP 0
B DEBUG - PHP+JS+AJAX PHP 10
M Inserimento dati checkbox multipli in db da ajax a php PHP 1
Axis18 Creare una barra di avanzamento con $.ajax Ajax 7
otto9due Chiamata ajax su due url è possibile? Ajax 0
G [Javascript] Problema parametro passato con ajax Javascript 4
G Chiamata ajax restituisce errore random Ajax 1
paloppa [PHP] paginazione con ajax PHP 1
filomeni Ajax e https Ajax 4
bubino8 Ajax con risultato si/no Ajax 16
A redirect da pagina php chiamata da ajax PHP 2
L Aggiungere contenuto con ajax durante lo scroll jQuery 1
M Ajax funziona in alcuni siti, in altri no! Ajax 2
otto9due Risposta ajax -> json con php Ajax 3
bubino8 [PHP] split con ajax non funziona PHP 7
C Problema chiamata Ajax Ajax 2
A Visualizzare div quando le immagini sono state uploadate con successo (Ajax) Ajax 0
S Select Concatenate Ajax, php, sql Presentati al Forum 16
otto9due Error anomalo durante invio dati $.ajax Ajax 20
F Interazione tra i form html ajax e php PHP 3
D Come salvare scelta della select "dinamica" ajax-php? Come dato php o attributo value tag option? Ajax 5
D Sono disperato: Menu select dinamici con Ajax e PHP PHP 1
D Sono disperato: Menu select dinamici con Ajax e PHP Ajax 2
T Passaggio dati con ajax ad altra pagina Ajax 6

Discussioni simili