Discussion :

[Matteo53]

Bonjour,
cette discussion fait suite à : https://www.developpez.net/forums/d2...riete-d-objet/


Alors j'avais crée cela :

Code :

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

1
2
3
4
5
6
let verbes1gr = {
    parler : 'parlare'  , acheter:'comprare', payer:'pagare', cuisiner : 'cucinare', jouer:'giocare', 
    conduire:'guidare',  habiter : 'abitare', aimer :'amare', arriver : 'arrivare', 
    ecouter :'ascoltare', embrasser : 'baciare', aider :'aiutare', porter : 'portare', nager:'nuotare', 
    arracher :'strappare', chercher : 'cercare'
}

puis l'ordre alphabétique :

Code :

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

1
2
3
4
5
6
7
8
//mise en ordre alpha
export let VG1Ordonnes= Object.keys(verbes1gr).sort().reduce(
    (obj, key) => { 
      obj[key] = verbes1gr[key]; 
      return obj;
    }, 
    {}
  );

puis la création des options dans le select

Code :

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

1
2
3
4
5
6
7
let select = document.getElementById("verbeUtilis1cat");
for(let i in VG1Ordonnes){
    let options=document.createElement('option');
    options.text=i+' ('+ VG1Ordonnes[i] +')';
    options.value = VG1Ordonnes[i] ;
    select.add(options);
}

ma fonction tempsSimple avec trois parametres :

Code :

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

tempsSimples(mode, temps, i)

Tout marche pour les temps simples des verbes. Mais j'ai commencé les temps composé et la il y a des verbes il faut l'auxiliaire "être" et d'autres avoir snif
J'ai essayé à faire quelques changement :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
let verbes1gr = {
    "avoir" : {
    parler : 'parlare'  , acheter:'comprare', payer:'pagare', cuisiner : 'cucinare', jouer:'giocare', 
    conduire:'guidare',  habiter : 'abitare', aimer :'amare', arriver : 'arrivare', 
    ecouter :'ascoltare', embrasser : 'baciare', aider :'aiutare',  nager:'nuotare', 
    arracher :'strappare', chercher : 'cercare', porter : 'portare',
    },
    "etre" : {
        arriver : 'arrivare',
    }
}

Code :

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

1
2
3
4
5
6
7
export let VG1Ordonnes= Object.keys(verbes1gr).sort().reduce(
    (obj, key) => { 
      obj[key] = verbes1gr.[key]; 
      return obj;
    }, 
    {}
  );

puis je voudrais créer une fonction dans ma classe du genre
mon constructeur :

Code :

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

1
2
3
 constructor(verbe) {
        this.verbe = verbe;
    }

Code :

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

1
2
3
4
5
6
7
8
tempsCompose() {
    let resultat
    if(verbes1gr.avoir.includes(this.verbe)) {
      resultat = this.avoir...
    } else if(verbes1gr.etre.includes(this.verbe)) {
        resultat = this.etre...
    }
  }

Ce qui marche pas :
-Déjà let VG1Ordonnes ne marche pas dans l'état ou bien si je la modifie en mettant Object.keys(verbes1gr.avoir) je n'ai pas les verbes en être et vice-versa.
Pour la fonction je n'ai pas pu testé je voudrais savoir si includes() est une bonne solution.
merci

[Beginner.]

Code :

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

1
2
3
4
5
6
7
export let VG1Ordonnes= Object.keys(verbes1gr).sort().reduce(
    (obj, key) => { 
      obj[key] = verbes1gr.[key]; 
      return obj;
    }, 
    {}
  );

...

Ce qui marche pas :
-Déjà let VG1Ordonnes ne marche pas dans l'état ou bien si je la modifie en mettant Object.keys(verbes1gr.avoir) je n'ai pas les verbes en être et vice-versa.

Ben pourquoi voulez-vous ordonner l'objet ? Je ne suis pas sûr que ce soit utile...

Sinon oui, la fonction ci-dessus "ordonne" (selon les clés) l'objet verbes1gr alors que vous, vous voulez en fait ordonner la propriété avoir de l'objet verbes1gr c'est-à-dire l'objet verbes1gr.avoir...

Il faut donc plusieurs étapes... Mais avant de faire cela assurez-vous que ce soit utile...

PS : Il y a une petite faute de frappe : c'est obj[key] = verbes1gr[key]; plutôt que obj[key] = verbes1gr.[key];...

Code :

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

1
2
3
4
5
6
7
8
tempsCompose() {
    let resultat
    if(verbes1gr.avoir.includes(this.verbe)) {
      resultat = this.avoir...
    } else if(verbes1gr.etre.includes(this.verbe)) {
        resultat = this.etre...
    }
  }

...

Pour la fonction je n'ai pas pu testé je voudrais savoir si includes() est une bonne solution.

A ma connaissance cette fonction fonctionne pour les tableaux et non pour les objets...

Pour les objets on peut faire plus simple, par exemple vous pouvez remplacer if(verbes1gr.avoir.includes(this.verbe)) { par if(verbes1gr.avoir[this.verbe]) { ou bien if(verbes1gr.avoir[this.verbe] != undefined) {...

Cela fonctionne car verbes1gr.avoir[this.verbe] renvoi undefined si this.verbe n'est pas une propriété de l'objet verbes1gr.avoir sinon il renvoi la valeur correspondant à la clé this.verbe...

Exemple verbes1gr.avoir["acheter"] renvoi la chaine "comprare" mais verbes1gr.avoir["toto"] renvoi undefined...

[Matteo53]

Bonjour,
Je voudrais les ordonner pour deux raison : j'ajoute des verbes au fur à mesure, cela m'évite de chercher moi meme l'ordre du verbe que j'ajoute dans l'objet verbe1gr, puis pour avoir dans mon select tous les verbes par ordre alphabétique. Je voudrais faire en sorte que VG1Ordonnes puisse ordonner tous les verbes ceux qui sont dans la propriété "etre" et "avoir" puis transférer l'ensemble de tous les verbes dans mon select comme auparavant(verbes qui serait dans verbe1gr.etre et verbe1gr.avoir) :

Code :

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

1
2
3
4
5
6
7
let select = document.getElementById("verbeUtilis1cat");
for(let i in VG1Ordonnes){
    let options=document.createElement('option');
    options.text=i+' ('+ VG1Ordonnes[i] +')';
    options.value = VG1Ordonnes[i] ;
    select.add(options);
}

J'ai un peu du mal avec VG1Ordonnes on me l'a suggéré sur ce forum mais je ne sais pas trop réadapté, je n'arrive pas trop à comprendre l'enchainement de .sort() et .reduce().
Pour la fonction merci je la testerai quand j'aurais tous les verbes dans le select
merci

[Beginner.]

J'ai un peu du mal avec VG1Ordonnes on me l'a suggéré sur ce forum mais je ne sais pas trop réadapté, je n'arrive pas trop à comprendre l'enchainement de .sort() et .reduce().

Pour comprendre cette fonction il faut procéder par étape, on découpe le problème en petits morceaux et on étudie à part chaque morceau pour ensuite comprendre l'ensemble... Ici par exemple il faudrait étudier à part les fonctions Object.key, sort et reduce...

On verra cela dans un autre fil si vous voulez...

Je voudrais faire en sorte que VG1Ordonnes puisse ordonner tous les verbes ceux qui sont dans la propriété "etre" et "avoir" puis transférer l'ensemble de tous les verbes dans mon select comme auparavant(verbes qui serait dans verbe1gr.etre et verbe1gr.avoir)

Ok mais attention VG1Ordonnes c'est juste une variable et non une fonction qui ordonne tous les verbes... D'ailleurs on pourrait se passer de cette variable intermédiaire (voir ci-dessous des exemples).

Le code ci-dessous permet d'obtenir un objet correspondant à l'objet verbes1gr ordonné que l'on stocke dans la variable VG1Ordonnes :

Code :

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

1
2
3
4
5
6
7
8
//mise en ordre alpha
export let VG1Ordonnes= Object.keys(verbes1gr).sort().reduce(
    (obj, key) => { 
      obj[key] = verbes1gr[key]; 
      return obj;
    }, 
    {}
  );

Ici ce qui est déroutant c'est qu'en fait ce n'est pas l'objet verbe1gr que l'on veut trier/ordonner mais plutôt ses deux propriétés : etre et avoir. Pour cela on doit donc trier/ordonner les objets verbe1gr.etre et verbe1gr.avoir...

Puisque qu'on doit trier/ordonner plusieurs objets il serait judicieux de faire une fonction du code que vous avez utilisé :

Voici donc une fonction (ordonne_objet) qui prend en paramètre l'objet à ordonner (objet_a_ordonner) :

Code :

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

1
2
3
4
5
6
7
8
9
function ordonne_objet(objet_a_ordonner) {
    return Object.keys(objet_a_ordonner).sort().reduce(
        (obj, key) => {
            obj[key] = objet_a_ordonner[key];
            return obj;
        },
        {}
    )
}

Du coup, par exemple, pour obtenir un objet correspondant à l'objet obj trié/ordonné et le stocker dans la variable obj_ordonnee on écrit :
let obj_ordonnee = ordonne_objet(obj).

Mais pour éviter d'utiliser une variable intermédiaire (ici obj_ordonnee) et obtenir "directement" que l'objet obj soit trié/ordonné on peut écrire :

let obj = ordonne_objet(obj).

Après exécution l'objet obj sera trié/ordonné, on pourra donc utiliser directement la variable obj par la suite...

-------------

Maintenant si on veut trier/ordonner les objets verbe1gr.etre et verbe1gr.avoir (etre et avoir sont des propriétés de l'objet verbes1gr), il nous faudra les trier/ordonner un par un, voici un exemple complet :

index.html

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>trier/ordonner les propriétés d'un objet</title>
 
    <script src="script.js"></script>
</head>
<body>
    trier/ordonner les propriétés d'un objet
</body>
</html>

script.js

Code JavaScript :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
let verbes1gr = {
    "avoir": {
        parler: 'parlare', acheter: 'comprare', payer: 'pagare', cuisiner: 'cucinare', jouer: 'giocare',
        conduire: 'guidare', habiter: 'abitare', aimer: 'amare', arriver: 'arrivare',
        ecouter: 'ascoltare', embrasser: 'baciare', aider: 'aiutare', nager: 'nuotare',
        arracher: 'strappare', chercher: 'cercare', porter: 'portare',
    },
    "etre": {
        arriver: 'arrivare',
    }
}
 
// fonction qui ordonne (selon les clés) 
// les propriétés de l'objet passé en paramètre
function ordonne_objet(objet_a_ordonner) {
    return Object.keys(objet_a_ordonner).sort().reduce(
        (obj, key) => {
            obj[key] = objet_a_ordonner[key];
            return obj;
        },
        {}
    )
}
 
// fonction qui affiche les propriétés ('clé : valeur') de l'objet passé en paramètre
function display(objet) {
    let cpt = 1
    for (let key in objet) {
        console.log(cpt++, `${key} : '${objet[key]}'`);
    }
}
 
console.log("------ verbes1gr.avoir avant le tri ----------");
display(verbes1gr.avoir)
console.log("------ verbes1gr.etre avant le tri ----------");
display(verbes1gr.etre)
 
// on ordonne l'objet verbes1gr.avoir
// et on stocke le résultat dans verbes1gr.avoir
// ce qui évite d'utiliser une variable intermédiaire 
verbes1gr.avoir = ordonne_objet(verbes1gr.avoir)
// on ordonne l'objet verbes1gr.etre
// et on stocke le résultat dans verbes1gr.etre
// ce qui évite d'utiliser une variable intermédiaire 
verbes1gr.etre = ordonne_objet(verbes1gr.etre)
 
console.log("------ verbes1gr.avoir après le tri ----------");
display(verbes1gr.avoir)
console.log("------ verbes1gr.etre après le tri ----------");
display(verbes1gr.etre)

Résultat de la console :

[NoSmoking]

Bonjour,

Je voudrais les ordonner pour deux raison : j'ajoute des verbes au fur à mesure, cela m'évite de chercher moi meme l'ordre du verbe que j'ajoute dans l'objet verbe1gr, puis pour avoir dans mon select tous les verbes par ordre alphabétique.

je n'en vois vraiment pas l’intérêt la nouvelle entrée est placée en fin et trier pour avoir un nouvel ordre ne changera en rien la façon d'y accéder objet.propriété. La seul chose qui changera pour toi c'est un JSON.stringify(objet). Cela fait faire beaucoup des pirouettes pour pas grand chose.

Pour ce qui est du <select> là oui tu peux trier, pour plus de clarté, mais dans ce cas il faut le faire au niveau du <select> sur base des textContent des <option>.

[Matteo53]

Bonjour,
merci encore pour tous ces conseils encore très détaillés que je vais garder pour m'en servir. Oui mon objectif est d'avoir l'ensemble des verbes trié dans le select donc si je comprend bien le trie peut se faire directement dans le select, moi j 'avait fait cela comme ca :

Code :

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

1
2
3
4
5
6
for(let i in VG1Ordonnes){
    let options=document.createElement('option');
    options.text=i+' ('+ VG1Ordonnes[i] +')';
    options.value = VG1Ordonnes[i] ;
    select.add(options);
}

Donc si je comprends bien je peux me passer de VG1Ordonne pour mettre directement en ordre alphabétique dans le select ?
Je pourrais directement utiliser

Code :

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

for(let i in verbe1gr) {...}

. Puis mettre en ordre alpa avec option.textContent(je connais pas je vais regarder)
Merci j'espère que j'ai compris parfois je trouve pas évident quand on débute mais cela sert pour s'améliorer.

[NoSmoking]

donc si je comprend bien le trie peut se faire directement dans le select

pas forcément directement dans le <select> mais avant la création des <option>.

En reprenant tes données :

Code :

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

1
2
3
4
5
6
let verbes1gr = {
    parler : 'parlare'  , acheter:'comprare', payer:'pagare', cuisiner : 'cucinare', jouer:'giocare', 
    conduire:'guidare',  habiter : 'abitare', aimer :'amare', arriver : 'arrivare', 
    ecouter :'ascoltare', embrasser : 'baciare', aider :'aiutare', porter : 'portare', nager:'nuotare', 
    arracher :'strappare', chercher : 'cercare'
}

Création d'un tableau des données brutes puis tri :

Code :

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

1
2
3
4
5
const data = [];
for (let key in verbes1gr) {
  data.push([verbes1gr[key], key]);
}
data.sort((a, b) => a[1].localeCompare(b[1]));

Création et ajout des <option> dans le <select> :

Code :

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

1
2
3
4
5
const options = [];
data.forEach((a) => {
  options.push(new Option(a[1], a[0]));
})
document.getElementById("id-select-verbe").append(...options);

Voilà, pour que cela soit plus « propre » il suffit de mettre cela dans une fonction.

[Matteo53]

merci beaucoup pour votre aide par contre meme si à mon objet j'ai ajouté deux propriété 'avoir' et 'etre' votre exemple de code fonctionne et j'aurais l'ensembles des verbes dans les options ou bien je dois le faire en deux étapes ?

Code :

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

1
2
3
4
5
6
7
8
9
10
11
let verbes1gr = {
    "avoir": {
        parler: 'parlare', acheter: 'comprare', payer: 'pagare', cuisiner: 'cucinare', jouer: 'giocare',
        conduire: 'guidare', habiter: 'abitare', aimer: 'amare', arriver: 'arrivare',
        ecouter: 'ascoltare', embrasser: 'baciare', aider: 'aiutare', nager: 'nuotare',
        arracher: 'strappare', chercher: 'cercare', porter: 'portare',
    },
    "etre": {
        arriver: 'arrivare',
    }
}

merci

[Beginner.]

Salut,

je n'en vois vraiment pas l’intérêt la nouvelle entrée est placée en fin et trier pour avoir un nouvel ordre ne changera en rien la façon d'y accéder objet.propriété. La seul chose qui changera pour toi c'est un JSON.stringify(objet). Cela fait faire beaucoup des pirouettes pour pas grand chose.

Pour ce qui est du <select> là oui tu peux trier, pour plus de clarté, mais dans ce cas il faut le faire au niveau du <select> sur base des textContent des <option>.

Moi aussi au départ je n'étais pas sûr de l’intérêt de trier l'objet contenant les verbes mais en fin de compte je trouve que ce n'est pas tellement plus long que le code que tu as posté, du moins c'est ce qu'il me semble...

Je pense que ce qui fait penser qu'il y a beaucoup de pirouettes dans mon code c'est le fait que je trie deux propriétés d'un objet, ce qui revient (par rapport à ton code) à faire le tri de deux listes de verbes (même si en fait verbe1gr.etre ne contient qu'un verbe pour le moment...).

Le code parait peut-être plus long à cause aussi des détails, des explications en commentaire, le fait d'afficher les résultats avant et après le tri...

Mais si je reprend ton exemple (du message #7) mais avec le tri d'un seul objet :

index.html

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>trier/ordonner les propriétés d'un objet</title>
 
    <script defer src="script.js"></script>
</head>
<body>
    trier/ordonner les propriétés d'un objet... <br>
    Et remplir un "select"
    <br><br>    
    <select name="verbes" id="id-select-verbes">
        <option value="">-- Choisisez un verbe --</option>
    </select>
</body>
</html>

script.js

Code JavaScript :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
let verbes1gr = {
    parler: 'parlare', acheter: 'comprare', payer: 'pagare', cuisiner: 'cucinare', jouer: 'giocare',
    conduire: 'guidare', habiter: 'abitare', aimer: 'amare', arriver: 'arrivare',
    ecouter: 'ascoltare', embrasser: 'baciare', aider: 'aiutare', porter: 'portare', nager: 'nuotare',
    arracher: 'strappare', chercher: 'cercare'
}
 
// fonction qui ordonne (selon les clés) 
// les propriétés de l'objet passé en paramètre
function ordonne_objet(objet_a_ordonner) {
    return Object.keys(objet_a_ordonner).sort().reduce(
        (obj, key) => {
            obj[key] = objet_a_ordonner[key];
            return obj;
        },
        {}
    )
}
// fonction qui remplie un <select>  
// l'identifiant du <select> est passé en premier paramètre (id_select)
// l'objet contenant les verbes est passé en second paramètre (verbes)
function rempli(id_select, verbes) {
    const options = [];
    for (let key in verbes) {
        options.push(new Option(key, verbes[key]))
    }
    document.getElementById(id_select).append(...options);
}
 
// on ordonne l'objet verbes1gr
// et on stocke le résultat dans verbes1gr
// ce qui évite d'utiliser une variable intermédiaire 
verbes1gr = ordonne_objet(verbes1gr)
 
// on rempli le <select> ayant pour identifiant : "id-select-verbes"
// avec le verbes contenus dans l'objet verbes1gr
rempli("id-select-verbes", verbes1gr)

Eh bien on voit me semble-t-il que le code JS n'est pas tellement plus long...
J'ai faits deux fonctions ce qui ajoute quelques lignes de code mais cela devient avantageux quand on a plusieurs objets à trier...

Enfin bref, Matteo53 a plusieurs façons de faire ce qu'il veut, ce qui je pense sera instructif...

[Beginner.]

merci beaucoup pour votre aide par contre meme si à mon objet j'ai ajouté deux propriété 'avoir' et 'etre' votre exemple de code fonctionne et j'aurais l'ensembles des verbes dans les options ou bien je dois le faire en deux étapes ?

Code :

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

1
2
3
4
5
6
7
8
9
10
11
let verbes1gr = {
    "avoir": {
        parler: 'parlare', acheter: 'comprare', payer: 'pagare', cuisiner: 'cucinare', jouer: 'giocare',
        conduire: 'guidare', habiter: 'abitare', aimer: 'amare', arriver: 'arrivare',
        ecouter: 'ascoltare', embrasser: 'baciare', aider: 'aiutare', nager: 'nuotare',
        arracher: 'strappare', chercher: 'cercare', porter: 'portare',
    },
    "etre": {
        arriver: 'arrivare',
    }
}

merci

Oui je pense qu'il faudra deux étapes, c'est-à-dire il faudra faire deux triages... Mais bon NoSmoking confirmera ou infirmera...

C'est pour cela entre autres qu'il serait judicieux d'utiliser des fonctions...

J'ai donné un exemple (dans mon message précèdent #9) où l'on trie un objet puis où l'on rempli un <select> mais j'utilise une fonction qui trie un seul objet à la fois...

Mais on pourrait faire encore plus simple et faire une fonction qui trie les deux objets verbes1gr.avoir et verbes1gr.etre (c'est-à-dire les deux propriétés avoir et etre de l'objet verbes1gr).

---> Une question : Au final vous voulez remplir deux <select> ?

[Matteo53]

Bonjour,
Désolé, j'avais du mal m'expliquer, mais ca m'a fait un petit cours
Oui je voudrais assembler l'ensemble des verbes de l'objet verbes1gr dans un seul select par ordre alphabétique sans distinction de propriétés.
P.S. J'ai ajouté les deux propriétés à mon objet pour m'en servir par la suite (on en a parlé précédemment cela me servira pour une condition des temps composé).

[Beginner.]

Oui je voudrais assembler l'ensemble des verbes de l'objet verbes1gr dans un seul select par ordre alphabétique sans distinction de propriétés.

Ah mais dans ce cas c'est différent, les codes proposés trient un seule liste à la fois, si on veut un tri de l'ensemble des verbes il faudra à priori concaténer les deux listes de verbes pour pouvoir la trier...

[Matteo53]

oui voila et dans la balise option à value ="" j'avais le verbe italien pour le manipuler. Ex parler: 'parlare' <option value="parlare">parler(parlare)</option>.
avant de mettre les propriétés cela marchait en faisant ce code :

Code :

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

1
2
3
4
5
6
7
let select = document.getElementById("verbeUtilis1cat");
for(let i in VG1Ordonnes){
    let options=document.createElement('option');
    options.text=i+' ('+ VG1Ordonnes[i] +')';
    options.value = VG1Ordonnes[i] ;
    select.add(options);
}

Ce qui me perturbe c'est le fait d'avoir ajouter les propriétés mais cela me servira pour la suite
merci

[Beginner.]

avant de mettre les propriétés cela marchait en faisant ce code :

Je pense que le code de NoSmoking est meilleur, il faut juste l'adapter un petit peu au cas que vous avez décrit...

Voici un exemple rapide (à optimiser éventuellement...) :

index.html

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>trier/ordonner les propriétés d'un objet</title>
 
    <script defer src="script.js"></script>
</head>
<body>
    trier/ordonner les propriétés d'un objet... <br>
    remplir un select 
    <br><br>
 
    <select name="verbes" id="id-select-verbes">
        <option value="">-- Choisisez une option --</option>
    </select>
</body>
</html>

script.js

Code JavaScript :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
let verbes1gr = {
    "avoir": {
        parler: 'parlare', acheter: 'comprare', payer: 'pagare', cuisiner: 'cucinare', jouer: 'giocare',
        conduire: 'guidare', habiter: 'abitare', aimer: 'amare', arriver: 'arrivare',
        ecouter: 'ascoltare', embrasser: 'baciare', aider: 'aiutare', nager: 'nuotare',
        arracher: 'strappare', chercher: 'cercare', porter: 'portare',
    },
    "etre": {
        arriver: 'arrivare',  entrer: 'entrare', enrichir: 'arricchire'
    }
}
 
 
const data = [];
for (let key in verbes1gr.avoir) {
    data.push([verbes1gr.avoir[key], key]);
}
for (let key in verbes1gr.etre) {
    data.push([verbes1gr.etre[key], key]);
}
data.sort((a, b) => a[1].localeCompare(b[1]));
 
const options = [];
data.forEach((a) => {
    options.push(new Option(a[1], a[0]));
})
document.getElementById("id-select-verbes").append(...options);

Essayez et dites-nous si c'est bon...

[Matteo53]

oui c'est bon merci, j'ai modifié un peu pour avoir les deux verbes dans la liste

Code :

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

 options.push(new Option(a[1]+ "(" + a[0] + ")", a[0]));

merci pour votre aide

[Beginner.]

est il possible d'avoir comme j'avais fait auparavant ex acheter:'comprare' <option value="comprare">acheter (comprare) </option>

Oui c'est possible, il faut ajouter une petite modification...

Tant qu'à faire, je fais une fonction remplir_select du code précédent ce qui, entre autres, évitera certaines répétions ...

script.js

Code JavaScript :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
let verbes1gr = {
    "avoir": {
        parler: 'parlare', acheter: 'comprare', payer: 'pagare', cuisiner: 'cucinare', jouer: 'giocare',
        conduire: 'guidare', habiter: 'abitare', aimer: 'amare', arriver: 'arrivare',
        ecouter: 'ascoltare', embrasser: 'baciare', aider: 'aiutare', nager: 'nuotare',
        arracher: 'strappare', chercher: 'cercare', porter: 'portare',
    },
    "etre": {
        arriver: 'arrivare', entrer: 'entrare', enrichir: 'arricchire'
    }
}
 
// fonction qui remplie un <select>  
// l'identifiant du <select> est passé en premier paramètre (id_select)
// l'objet contenant les verbes est passé en second paramètre (verbes)
function remplir_select(id_select, verbes) {
    const data = [];
    for (let obj_prop in verbes) {
        for (let key in verbes[obj_prop]) {
            data.push([verbes[obj_prop][key], key]);
        }
    }
    data.sort((a, b) => a[1].localeCompare(b[1]));
 
    const options = [];
    data.forEach((a) => {
        options.push(new Option(`${a[1]} (${a[0]})`, a[0]));
    })
 
    document.getElementById(id_select).append(...options);
}
 
remplir_select("id-select-verbes", verbes1gr)

[Matteo53]

encore un merci pour vos explications très claires et de me consacrer du temps. Oui je commence à comprendre que mettre du code dans des fonctions est indispensable.
Merci à tous

[Beginner.]

J'ai modifié mon message précédent car il manquait une ligne dans le code...

[Matteo53]

merci