11540 sujets

JavaScript, DOM et API Web HTML5

[JQuery] Trier une liste créée avec Javascript

Bonjour à toutes et tous,

Je créé une liste <select> via javascript a partir d'un contenu json qui m'est envoyé par un script php. Mes résultats sont triés coté php mais étrangement le tri est correct sous firefox mais pas sous chrome pour une raison que j'ignore.

Je voudrai donc forcer le tri coté client directement dans mon JS afin d'appliquer un tri alpha à ma liste. Voici mon source JS :


var select = $('#Id_mobile'),
     options = select.prop('options');

$('option', select).remove();
$('#Id_mobile').append('<option value="" selected="selected">S&eacute;lectionner un Terminal</option>');
$.each(json.terminaux, function(val, text) {
     options[options.length] = new Option(text, val);
});


La ligne " $('#Id_mobile').append('<option value="" selected="selected">S&eacute;lectionner un Terminal</option>'); " me permet d'afficher la première ligne de ma liste et ne doit donc pas être triée. Le tri doit s'effectuer uniquement sur la liste générée par each, mais je reprend tout juste le JS après quelques mois d'arrêt et je ne vois pas comment procéder Smiley decu .

J'aimerai également pouvoir appliquer des styles au texte de ma liste mais je ne sais aps si c'est faisable directement où si je dois travailler sur ma liste une fois qu'elle est générée.
Modifié par Klesk (18 Apr 2013 - 01:22)
Hello,
Si ta liste est un array, alors tu peux utiliser sort()

Si ta liste est une collection d'objets, je te conseille d'utiliser une lib comme underscore ou lodash

Et concernant ton select, saches qu'il n'y a pas beaucoup de liberté pour le styler, et tu n'auras pas les même résultats selon les navigateurs. Un exemple ici : http://bavotasan.com/2011/style-select-box-using-only-css/
Je te conseille donc plutôt de ne pas passer par un select mais plutôt par un <ul> qui apparaîtrait au survol de la souris (du genre drop-down menu) et de gérer le comportement via jQuery.
@sacapuss_

Merci de baliser ton code Javascript avec le bouton CODE approprié Smiley cligne .
Ce script m'intéresserait, s'il fonctionne. Pourrais-tu éditer ton post?
Merci.
Merci pour vos réponses diverses. Est-ce que quelqu'un saurai me dire pourquoi ma liste trié en php est correctement affichée sous firefox mais pas sous chrome ?

Quand je regarde mon retour JSON sous firefox, les données [ clé / valeur ] sont triées par valeur comme je le souhaite. Sous Chrome elles sont triées par clés... J'arrive pas à comprendre pourquoi :S.

Si j'arrive à résoudre ce souci à la source, je n'aurai pas besoin de modifier mon js coté client.

EDIT : Il semble que cela soit un bug de Chrome qui devait être corrigé... Donc en gros si je veux corriger ça, je suis obligé de modifier la structure de mon json coté php pour utiliser un array de ce type :

{"1": {id: "4321", value: "option 1"}, "2": {id: "1234", value: "option 2"}};

au lieu de :

{"4321": "option 1", "1234": "option 2"};

La loose... Smiley decu
Modifié par Klesk (19 Apr 2013 - 09:17)
Bug ou pas de Chrome, il n'y a aucune spec qui dit qu'un objet json doit être trié d'une façon ou d'une autre.
Je t'invite plutôt à passer tes objets dans un array, c'est plus propre :

{
	[
		{"key1" : "value1"},
		{"key2" : "value2"},
		{"key3" : "value3"}
	]
}

Modifié par ZeB_panam (20 Apr 2013 - 09:29)
Sujet clos
Aller à