Discussion :

[charlene90]

Bonjour à tous,

Je bloque sur JQuery pour l'importation de données depuis un fichier JSON.
Je m'explique.
J'ai mon fichier JSON avec des données textes, images, etc; que je dois importer sur mon HTML via jQuery. Mon code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
$.getJSON( "data.json", function( data ) {
 
		 var message = "";
 
		for (var i=0; i < data.length; i++) {
				message += "<h1>" + data[i].nom + "</h1>"				
				message += "<h2>" + data[i].titre + "</h2>"
				message += "<h3>Population: " + data[i].pop + "</h3>"
				message += "<p>" + data[i].description + "</p>" + "</br>" + "</br>" + "</br>"
			document.getElementById("details").innerHTML = message
		};
 
	});

Mon souci est que pour chaque i (8 en tout), il faut que les données soient groupées en block ou sous une div afin que je puisse les traiter distinctement via le css. Mais aucune idée comment procéder....


Merci mille fois d'avance !

[danielhagnoul]

Vous nous dites que i va de 0 à 7 (8 éléments) mais dans votre code vous placer chaque bout de code HTML généré dans le même élément du DOM d'ID "details". Donc le dernier inséré écrase le précédent. Il faut utiliser append(). Exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
var jObj = $( "details" );
 
for ( var i = 0; i < data.length; i++ ){
    jObj.append( '<div id="data' + i +
                '"><h1>' + data[i].nom +
                '</h1><h2>' + data[i].titre +
                '</h2><h3>Population : ' + data[i].pop +
                '</h3><p>' + data[i].description +
                '</p></div>' );
};