11496 sujets

JavaScript, DOM et API Web HTML5

[RESOLU]Importation données JSON via Jquery

Bonjour,

Je dois importer des données provenant d'un fichier .Json via JQuery.
En gros il s'agit d'insérer des <options> contenant des noms dans un <select>

 $.getJSON('modeles.json', function(data) {
		  var modelesslength = data.modeles.length;
		  var i = 0;
		  while(i <= modeleslength) {
			$('#lesmodeles').html('<option>'+data.modeles[i].Nom +'</option>');
			i++;
			console.log(data.modeles[i].Nom);


Problème, il ne me donne que le dernier nom.
Et me dis dans la console : 
TypeError: data.modeles[i] is undefined

Après me les avoir pourtant entièrement cités (plus de 500 noms).

En bref, ça marche dans la console, mais pas via l'affichage navigateur ?

Quelqu'un aurait une idée ?

Merci ! Smiley ohwell [/i][/i][/i]
Modifié par JimmyW (01 Dec 2014 - 17:21)
Modérateur
Salut,

Il n'y a pas exactement la meme chose dans ton console log et ton option... il manquerait pas un petit [ i ] ?
$('#lesmodeles').html('<option>'+data.modeles[i].Nom +'</option>');
[/i]
Modifié par _laurent (01 Dec 2014 - 15:58)
Modérateur
JimmyW a écrit :
Problème, il ne me donne que le dernier nom.
Et me dis dans la console : 
TypeError: data.modeles is undefined

Après me les avoir pourtant entièrement cités (plus de 500 noms).


Et pour ça, si je suis bien réveillé, ta boucle va de 0 à 500 (<= modeleslength) soit 501 fois et je suppose que tu as cette erreur qu'une seul fois au moment ou il tente de trouver data.modeles[500]
i < modeleslength devrait suffire
Modifié par _laurent (01 Dec 2014 - 16:07)
$('#lesmodeles').html('<option>'+data.modeles[i].Nom +'</option>');


Merci pour la réponse!

Bien vu, mais mon [i ] manquant ce n'était qu'une erreur en recopiant le code ici...
Il est bien là dans mon code.
et j'ai changé le =< pour <... Mais ça ne donne toujours rien.

En cherchant précédemment sur le net, j'ai l'impression qu'il mettait ça sur le compte de l'asynchronisme d'une requete JSON ? Mais comme je n'ai pas compris, et que les modifs qu'ils conseillaient d'apporter ne fonctionnaient pas. Je suis venu ici pour avoir un peu plus d'explications...
( http://stackoverflow.com/questions/22663982/why-does-the-console-return-the-correct-data-but-not-the-browser )[/i]
Modifié par JimmyW (01 Dec 2014 - 16:15)
JimmyW a écrit :
$('#lesmodeles').html('&lt;option&gt;'+data.modeles[i ].Nom +'&lt;/option&gt;');


Merci pour la réponse!

Bien vu, mais mon [i ] manquant ce n'était qu'une erreur en recopiant le code ici...
Il est bien là dans mon code.
et j'ai changé le =&lt; pour &lt;... Mais ça ne donne toujours rien.

En cherchant précédemment sur le net, j'ai l'impression qu'il mettait ça sur le compte de l'asynchronisme d'une requete JSON ? Mais comme je n'ai pas compris, et que les modifs qu'ils conseillaient d'apporter ne fonctionnaient pas. Je suis venu ici pour avoir un peu plus d'explications...
( http://stackoverflow.com/questions/22663982/why-does-the-console-return-the-correct-data-but-not-the-browser )


mon [ i ] avait disparu car pris pour une balise italique Smiley murf
Modifié par JimmyW (01 Dec 2014 - 16:17)
Modérateur
Arf désolé alors Smiley sweatdrop

Tu as testé ton code en mocké avec un fake JSON en dur juste avant ? Au moins tu ciblera si ca vient du traitement ou du get... Après réflexion c'est vrai que TypeError: data.modeles[ i ] is undefined c'est comme s'il ne reconnaissait pas du tout l'objet (et pas juste une occurrence comme je l'ai suggéré plus haut).



EDIT :
JimmyW a écrit :
mon [ i ] avait disparu car pris pour une balise italique Smiley murf
J'ai grave galéré avec ma première réponse aussi Smiley lol
Modifié par _laurent (01 Dec 2014 - 16:21)
non non il ne faut pas être désolé. Tous les avis sont bons à prendre et merci pour ton aide.

Par mocké tu entends genre mis dans une balise script dans ma page .html ?
Non...
Par contre j'ai testé mon format JSON dans http://jsonlint.com/ qui me le valide parfaitement.
Et d'autre part je viens de mettre tout mon while en commentaires.
En mettant juste un nombre compris entre 0 et 572 (nbre items) a la place du i et il va parfaitement le chercher et me l'affiche dans le browser.
Du coup mon while avec mon [ i ] ne marche tjs que dans la console avec un log mais pas dans l'affichage.
Modifié par JimmyW (01 Dec 2014 - 16:33)
Modérateur
A quoi ressemble ton JSON ?


Par mocké j'entends mettre un var modeles = { unExempleDeJsonAttendu }; à la place du get et tenter de l'exploiter.
{
		"modeles" : [
{"Nom":"Paul","Age":18},
{"Nom":"Stephanie","Age":21},
{"Nom":"Caroline","Age":24}
]
}
Modérateur
Javais pas vu dans ton premier post "Problème, il ne me donne que le dernier nom."

Avec $('#lesmodeles').html tu écrase l’intérieur du nœud à chaque fois. Tu utilise JQuery il me semble donc tu peux jouer avec .append plutôt.

J'ai un petit peu modifier le bouzin (j'ai pas le while Smiley langue ) :
var data = {
		"modeles" : [
{"Nom":"Paul","Age":18},
{"Nom":"Stephanie","Age":21},
{"Nom":"Caroline","Age":24}
]
};
for(i=0; i < data.modeles.length; i++) {
	$('#lesmodeles').append('<option>'+data.modeles[ i ].Nom +'</option>');
	console.log(data.modeles[ i ].Nom);
}

http://jsfiddle.net/Undless/0xnf67oa/

Et ca marche bien comme ça.
Maintenant voir ce qui te reste en le mettant avec le GET etc etc..
Modifié par _laurent (01 Dec 2014 - 17:07)
ça marche nickel !

J'avais pas vraiment assimiler cette nuance entre html et append (novice).
Et comme c'était la première fois que j'utilisais JSON etc. j'étais persuadé que le problème venait plutôt de par là.

4h de perdues pour cette petite erreur Smiley sweatdrop ...

mais tu me sauves finalement la mise, merci !
Bonjour.

Par contre ça :
for(i=0; i < data.modeles.length; i++) {
	$('#lesmodeles').append('<option>'+data.modeles[ i ].Nom +'</option>');
	console.log(data.modeles[ i ].Nom);
}

... c'est très mauvais au niveau des performances.

Voir plutôt à faire un seul append() :
var options = '';
for(i=0; i < data.modeles.length; i++) {
	options += '<option>'+data.modeles[ i ].Nom +'</option>';
	console.log(data.modeles[ i ].Nom);
}
$('#lesmodeles').append(options);
Hello,

Donc si je comprends bien il vaut mieux réassigner une variable 500 fois pour ne l'afficher qu'une fois plutot que d'afficher 500 fois directement

Merci pour les conseils d'optimisation, toujours bon à prendre Smiley biggrin
Modifié par JimmyW (02 Dec 2014 - 16:00)
Modérateur
SolidSnake a écrit :
... c'est très mauvais au niveau des performances.

Effectivement j'ai fait ça un peu à la volée Smiley sweatdrop
Je prend aussi ! Merci SolidSnake Smiley smile
Modérateur
JimmyW a écrit :

Donc si je comprends bien il vaut mieux réassigner une variable 500 fois pour ne l'afficher qu'une fois plutot que d'afficher 500 fois directement

Merci pour les conseils d'optimisation, toujours bon à prendre Smiley biggrin

Oh oui. On parle d'opérations de reflow/repaint qui plombent les performances. Modifier un élément du dom, le supprimer, ajouter, changer la taille etc. provoque un recalcul de la position de tous les éléments de la page (ou une bonne partie généralement), car les éléments sont en flux. (On nomme cela le reflow). Ensuite tous ces éléments doivent être redessinés sur la page (ce qu'on nomme le repaint). En effet, une assignation de variable est passablement plus léger.

Voici une petite explication sur les reflow sur MDN et comment les analyser sur Firefox:
MDN analyse des évènement de reflow
Ou un explicatif chez Google:
https://developers.google.com/speed/articles/reflow
Sujet clos
Aller à