Comment réorganiser par ordre décroissant en js

Signaler
Messages postés
6
Date d'inscription
vendredi 28 août 2020
Statut
Membre
Dernière intervention
2 janvier 2021
-
Messages postés
6
Date d'inscription
vendredi 28 août 2020
Statut
Membre
Dernière intervention
2 janvier 2021
-
Bonjour,

Pour un projet de boite a rhytme en JS
J'ai généré 9 case numéroté de 1 a 9.

Pour cela j'ai créer un tableau stockant les string '1','2','3' etc associé l'url d'un son
Ensuite j'ai créer une fonction construct pour afficher ces 9 cases coté front en générant le HTML en JS.

Dans le code ci dessous j'ai volontairement mis 12 a la place de 6.
Pour vous expliquer que coté front le 12 est placé en tant que dernière case, même si il se trouve au milieu du tableau data dans le code.
Et j'aimerai savoir comment faire en sorte que le code généré organise les case par ordres décroissant.
Ou que le code généré soit le même que l'ordre tel qui l'ai écrit dans le code.

Voici le code :
/* la const data contient le tableau qui associe un 'string' a l'url d'un son audio*/
const data = {
    '9': {sound: 'media/sounds/drum1.mp3'},
    '8': {sound: 'media/sounds/drum2.mp3'},
    '7': {sound: 'media/sounds/beat1.mp3'},
    '12': {sound: 'media/sounds/beat2.mp3'},
    '5': {sound: 'media/sounds/beat3.mp3'},
    '4': {sound: 'media/sounds/lindrum.mp3'},
    '3': {sound: 'media/sounds/percu1.mp3'},
    '2': {sound: 'media/sounds/electro1.mp3'},
    '1': {sound: 'media/sounds/electro2.mp3'},
  };
 
/* Constructeur du drumPad */
/**/
function construct(){
    for(const letter in data){ // On récupère chaque lettre du tableau data
        const keyDiv = document.createElement('div');//créer une div dans la constante 'keydiv'
        keyDiv.id = "s" + letter;//Ajoute une id unique a chaque div
        keyDiv.classList.add('drum');//Ajouter une classe drum a la div généré par 'keydiv'
         
        let h2 = document.createElement('h2');//Créer le H2
        h2.textContent = letter;// On définis la variable letter comme etant le contenu de chaque element h2
 
        keyDiv.appendChild(h2);// On définis le h2 créée comme étant un enfant de keydiv    
        document.getElementById('musicBox').appendChild(keyDiv);//On récupere #musicBox pour le définir comme étant le parent keydiv.
 
        /* Au clique on joue le son */
        keyDiv.addEventListener('click', function(event) { //On active l'evenement clique de souris
            let letter = event.currentTarget.querySelector('h2').textContent; //Selectionne le H2 cliquer par l'evenement
            playDrum(letter);//Joue la lettre qui a été cliquer.
        })
    }
  }


EDIT : Correction des balises de code.


Configuration: Windows / Chrome 87.0.4280.88


2 réponses

Messages postés
31042
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
16 janvier 2021
3 182
Bonjour,

Déjà, lorsque tu postes ton code sur le forum, pense à y préciser le langage afin que l'on ait la coloration syntaxique.
Explications ( à lire entièrement !! ) disponibles ici :
https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code

Ensuite, as tu regardé du côté des fonctions "sort"
par exemple
const ordered = data.keys(unordered).sort().reduce(
  (obj, key) => { 
    obj[key] = unordered[key]; 
    return obj;
  }, 
  {}
);

Messages postés
6
Date d'inscription
vendredi 28 août 2020
Statut
Membre
Dernière intervention
2 janvier 2021

Bonjour,

Merci pour ta réponse, non je n'ai pas pensera regarder du coté des fonction "sort" je suis encore débutant.

La prochaine fois je ferai en sorte de coloré le code. ( on ne peut pas modifier un ancien message sur le forum ? )