Eviter les répétitions de "if"

**Kewty** · 29/01/2019, 16h10

Bonjour,

Je débute en JavaScript. Je voudrais juste savoir si y a d'autres manières (plus propre) de faire que celle-ci :

Code :

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
 
            const title = document.getElementById('title');
            const description = document.getElementById('description');
            const answer = document.getElementById('answer');
            const supportExchanges = document.getElementById('supportExchanges');
 
            if (text.value.length > 0) {
                // FIXME: Supprimer data quand on fera appel à l'API Flask
                const data = "data/predictions.json";
                const json = { "instances": [ text.value ] };
                console.log("Json instances : ", json);
                app.getJSON(json, data, API_URL);
            } else if (title.value.length > 0){
                var value = title.value;
                const data = "data/predictions.json";
                const json = { "instances" : [{"title" : value}]};
                console.log("Json instances : ", json);
                app.getJSON(json, data, API_URL);
            } else if (description.value.length > 0){
                var value = description.value;
                const data = "data/predictions.json";
                const json = { "instances" : [{"description" : value}]};
                console.log("Json instances : ", json);
                app.getJSON(json, data, API_URL);
            } else if (answer.value.length > 0){
                var value = answer.value;
                const data = "data/predictions.json";
                const json = { "instances" : [{"answer" : value}]};
                console.log("Json instances : ", json);
                app.getJSON(json, data, API_URL);
            } else if (supportExchanges.value.length > 0){
                var value = supportExchanges.value;
                const data = "data/predictions.json";
                const json = { "instances" : [{"supportExchanges" : value}]};
                console.log("Json instances : ", json);
                app.getJSON(json, data, API_URL);
            } else {
                // FIXME: Supprimer data quand on fera appel à l'API Flask
                const data = "data/data-v7.json";
                app.csvToJson(fileUploaded, data, API_URL);
            }

De plus je voudrais savoir s'il est possible de faire des "combinaisons" c'est à dire que l'utilisateur rentre ce qu'il veut dans mon champs, tous les champs ne sont pas obligatoires. Soit titre seul, ou par exemple juste titre et description. Comment pourrai-je faire pour faire cela ? Mise à part une multitude de "if". Si je n'ai pas été claire en gros j'aimerai éviter les if dans d'autres if.
Eviter ça :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
            if (text.value.length > 0) {
                // FIXME: Supprimer data quand on fera appel à l'API Flask
                const data = "data/predictions.json";
                if(description.value.length > 0){
 
                    if(answer.value.length > 0){
 
                    }
                }
                const json = { "instances": [ text.value ] };
                console.log("Json instances : ", json);
                app.getJSON(json, data, API_URL);

Je vous remercie et vous souhaite une agréable journée !

**Beginner.** · 29/01/2019, 17h09

Utiliser plusieurs if else ce n'est pas forcément mal propre et parfois tu ne peux pas faire autrement (switch est moins polyvalent)...

Ah oui après pour les champs tu peux les traiter séparément avec des gestionnaires d’événement...

**CosmoKnacki** · 29/01/2019, 17h31

Sans rentrer dans les détails, ne pourrais tu pas faire quelque chose comme ça:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
const fields = ['text', 'title', 'description', 'answer', 'supportExchanges'],
      json = { "instances": []},
      params = {};
 
for (const field of fields) {
    const value = document.getElementById(field).value;
    if ( value.length )
        params[field] = value;
}
 
json.instances.push(params);

**psychadelic** · 30/01/2019, 03h04

@ CosmoKnacki ce sont des if / else if. donc il manque un break dans ton code.

@Kewty
comme tu n'indique pas d'ou proviennent tes différents inputs, et que tu oublie aussi de reférencer ton champ "text" ( CosmoKnacki en fait abstraction), je suis partie de l'idée que tes champs sont réunis dans un même DIV :

Code HTML :

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

1
2
3
4
5
6
7
  <div id="block-inputs">
    <input type="text" id="text"             value="" placeholder="text" />
    <input type="text" id="title"            value="" placeholder="title"  />
    <input type="text" id="description"      value="" placeholder="description" />
    <input type="text" id="answer"           value="" placeholder="answer" />
    <input type="text" id="supportExchanges" value="" placeholder="supportExchanges" />
  </div>

ce qui permet d'écrire

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
    var json = { "instances": null };
 
    for (const elm_input of document.querySelectorAll('#block-inputs > input')) 
    {
      if (elm_input.value)
      {
        json.instances = (elm_input.id==='text') ? [elm_input.value] : [{[elm_input.id] : elm_input.value}];
        break;
      }
    }
 
    console.log( JSON.stringify(json))
 
    if (!json.instances)  { app.csvToJson(fileUploaded, "data/data-v7.json", API_URL); }
    else                  { app.getJSON(json, "data/predictions.json", API_URL)  }

**Beginner.** · 30/01/2019, 07h52

Envoyé par psychadelic

@ CosmoKnacki ce sont des if / else if. donc il manque un break dans ton code.

Effectivement pour le premier cas mais je crois que CosmoKnacki répondait à la deuxième partie où "...tous les champs ne sont pas obligatoires...".

Envoyé par psychadelic

for (const elm_input of document.querySelectorAll('#block-inputs > input'))

Je me pose une question : est-ce que l’instruction document.querySelectorAll('#block-inputs > input') n'est exécutée qu'une fois ou bien à chaque tour de boucle ?

Comment le savoir ? Peut-être en modifiant le HTML entre deux boucles (il faudra un point d’arrêt) ?

**Kewty** · 30/01/2019, 08h32

Merci à tous pour vos réponses je vais essayé les différentes méthodes que vous m'avez données. Je mettrai le code !

**Kewty** · 30/01/2019, 08h47

Merci encore pour vos messages, du coup j'ai pris ce code :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
const fields = ['text', 'title', 'description', 'answer', 'supportExchanges'],
      json = { "instances": []},
      params = {};
 
for (const field of fields) {
    const value = document.getElementById(field).value;
    if ( value.length )
        params[field] = value;
}
 
json.instances.push(params);

Il fonctionne à merveille et évite les répétitions de if ! Encore merci à tous bonne et agréable journée

**psychadelic** · 30/01/2019, 14h16

Envoyé par Beginner.

Je me pose une question : est-ce que l’instruction document.querySelectorAll('#block-inputs > input') n'est exécutée qu'une fois ou bien à chaque tour de boucle ?

Oui, c'est une bonne question...
perso je crois pas, mais dans le doute, j'éviterai ce code.

Je ne voulais pas trop compliquer mon code, car l'utilisattion d'un querySelectorAll marche plutôt avec un forEach, mais ce denier n'accepte pas de break.

Que l'on peu contourner ainsi

Code :

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

1
2
3
4
5
6
7
8
9
const BreakException = {};
try {
  document.querySelectorAll('#block-inputs > input').forEach( elm_input=>{
    console.log( elm_input.id )
    if (elm_input.value) throw BreakException;
  });
} catch (e) {
  if (e!==BreakException) throw e; // c'est une toute autre erreur
}

**Beginner.** · 30/01/2019, 19h15

Ok merci. Oui effectivement en cas de doute autant éviter...

**NoSmoking** · 31/01/2019, 16h30

Bonjour,

Envoyé par Beginner

Je me pose une question : est-ce que l’instruction document.querySelectorAll('#block-inputs > input') n'est exécutée qu'une fois ou bien à chaque tour de boucle ?

pour la boucle for..of c'est un protocole « itérable » qui est utilisé, la réponse est une fois en début.

Concernant le sujet abordé une boucle for, à l'ancienne, serait tout à fait justifiée et suffisante

**Beginner.** · 01/02/2019, 14h46

Merci pour l'info.

Eviter les répétitions de "if"

JavaScript

Discussions similaires

Partager

Partager