Modifier un tableau avec map()

Version imprimable

Bonjour à tous,

J'ai un bout de code qui marche mais jusqu'à ce des nouvelles variables s'ajoute.
Je vais essayé d'être le plus claire possible.

J'extrais d'un base de donnée, des mesures qui sont classé par type. Voici les types existants

Code:

1
2
3
4
5
6
7
const rules = new Map([
                    ['hu', 0], ['pr', 0],
                    ['wm', 1], ['te', 1],
                    ['ra', 2], ['pl', 2],
                    ['vi', 3], ['di', 3],
                    ['ba', 4],
                ]);

Ci-dessus, j'utilise cette règle pour afficher
dans le premier graphique, l'humidité et la pression
dans le deuxième, l'irrigation et la pluie
dans le troisième, la radiation solaire et la température
dans le quatrième, la vitesse et la direction du vent
et dans le dernier, le niveau de la batterie.

Mais depuis et selon la saison des mesures ne sont pas prises et surtout selon la station.

Par exemple, une station ne mesure que l'irrigation, la température et la batterie. Dans ce cas, j'aimerais avoir cette ordre

Code:

1
2
3
4
const rules = new Map([
                    ['wm', 1], ['te', 1],
                    ['ba', 2]
                ]);

En hiver, certaines station, ne mesure que la température et la batterie

Code:

1
2
3
const rules = new Map([
                    ['te', 1], ['ba', 1]
                ]);

A partir de là, je ne sais absoluement pas comment je peux rendre ma règle dynamique mais j'ai compris pour que le reste de mon code fonctionne, il faut éviter d'avoir des sujets qui ne seront pas afficher dans ma page. Par exmple, si ma station qui mesure l'irrigation, ceci bugera

Code:

1
2
3
4
5
6
7
const rules = new Map([
                    ['hu', 0], ['pr', 0],
                    ['wm', 1], ['te', 1],
                    ['ra', 2], ['pl', 2],
                    ['vi', 3], ['di', 3],
                    ['ba', 4],
                ]);

car les lignes 1,3,4 sont inconnues du resultat de ma requete MySQL

Voici le code qui ext exécuté quand ma requete AJAX/MySQL est réussie

Code:

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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
 
            success: function (data) {   
                console.log("data:",data);
 
 
                for(const c in data){
                    console.log(data[c].chartContainer); // Affiche tous les type disponible (te, hu, pr, wm, etc...)
                }
 
 
                const rules = new Map([
                    ['hu', 0], ['pr', 0],
                    ['wm', 1], ['te', 1],
                    ['ra', 2], ['pl', 2],
                    ['vi', 3], ['di', 3],
                    ['ba', 4],
                ]);
 
 
 
                // on construit à l'avance avec des tableaux
                // vides les index qui seront remplis.
                const d_atas = [[], [], [], [], []];
 
                for (const plen in data)
                {
                    const cc = data[plen].chartContainer;
 
                    if ( rules.has(cc) )
                        d_atas[rules.get(cc)].push(data[plen]);
                }
 
                console.log("d_datas", d_atas);
 
               // console.log("d_atas: ", d_atas);
 
                $('#charts div').remove('.containerChart');
 
                for(var le in Object(d_atas))
                {
 
                    if(d_atas[le].length > 0){
                        //console.log(le+': ', d_atas[le]);
 
                        // If does not exist
                        if ($('#charts .containerChart-' + le).length == 0 )
                        {
 
                            $('#charts').append('<div id="containerChart-' + le + '" class="containerChart"><canvas id="canvas-' + le + '" class="canvas"></canvas></div>')
 
                            var ctx = document.getElementById('canvas-' + le).getContext('2d');
 
                            if(d_atas[le].length > 1){
                                var conf = Charts.config_multiAxies(stationID,d_atas[le]);
                            }
                            else
                            {
                                var conf = Charts.config(stationID,d_atas[le]);
                            }
 
                            mychart = new Chart(ctx, conf);
 
                        }
                    }
 
                }
 
            }

J'aimerais avoir votre aide pour me dire comment je pourrais construire

Code:

const rules = new Map([????]);

en fonction des types extraites de la base de donnée.

Par exemple, pour la station bourgeon, ca sera

Code:

1
2
3
const rules = new Map([
                    ['te', 1], ['ba', 1]
                ]);

Pour la station météo, ca sera

Code:

1
2
3
4
5
6
7
 
      const rules = new Map([
                    ['hu', 0], ['pr', 0],
                    ['pl', 1], ['te', 1],
                    ['ra', 2], ['ba', 2],
                    ['vi', 3], ['di', 3]
                ]);

Attention, il se peut que des sondes soient inactives pour certaines stations, comme vi, di, pl, ra

Pour mes stations irrigation, ca sera

Code:

1
2
3
4
const rules = new Map([
                    ['wm', 1], ['te', 1],
                    ['ba', 2]
                ]);

Ceci est important car chaque ligne, correspond à un graphique qui affichera une ou deux type de mesure.

Par exemple:

Code:

1
2
3
4
5
6
7
 
      const rules = new Map([
                    ['hu', 0], ['pr', 0], // Premier graphique: humidité et pression
                    ['pl', 1], ['te', 1], // Deuxième graphique: pluie et température
                    ['ra', 2], ['ba', 2], // Troisième radiation solaire et batterie
                    ['vi', 3], ['di', 3]  // direction et vitesse du vent
                ]);

Que me sggerriez-vous de faire ou de faire autrement?

Milles mercis pour vos lumières

Dans ma base de données, j'ai ajouté une colonne 'sensor_type_order'

Voici l'idée

pour pr et hu, j'ai mis 1
pour wm et te, j'ai mis 2
pour ra et pl, j'ai mis 3
pour vi et di, j'ai mis 4
pour ba, j'ai mis 4

Puis dans ma requete MySQL j'ai dis de classé sensor_type_oder en ASC.

Il me semble bien que ceci
Code:

1 2 3 4 for(const c in data){ console.log(data[c].chartContainer) }
m'affiche le type dans un bon ordre.

Je me repose donc comment construire "dynamiquement" sans qu'il y ait de type ne correspondant pas ce qui a été extrait de la DB, en fonction de la station

Code:

const rules = new Map([]);

Par exemple, si il n'y a pas de mesures de l'humidité et de la pression mais que de l'irrigation, il faudrait éventuellement ceci
Code:

1 2 3 4 const rules = new Map([ ['wm', 0], ['te', 0], ['ba', 1], ]);
ou
Code:

1 2 3 4 5 6 const rules = new Map([ ['hu', 0], ['pr', 0], ['ra', 1], ['pl', 1], ['vi', 2], ['di', 2], ['ba', 3], ]);
voyez-vous? ou serait il mieux de faire autrement?

06/07/2021, 19h04
Dave Hiock
\ô/
je dois admettre que je n'ai pas tout compris ce que tu cherches à faire, désolé !

Qu'est ce que tu reçois de ton serveur ?
Pourquoi ne pas passer par un Objet
Code:

1 2 3 4 5 6 7 8 9 const mesDonnées = { 'hu': 0, 'pr': 0, 'ra': 1, 'pl': 1, 'vi': 2, 'di': 2, 'ba': 3, };
après il me semble que cela serait plus simple pour récupérer tes données suivant le cas.

Hello
Merci pour ta proposition.
Je vais résumer car entre temps, j'ai compris ce bout de code qu'on m'avait donner.

Je recois un array de mon serveur. C'est une requete ajax.
Toites les données sont stockée dans data.
Il y a les mesures par sonde, l'id de la sonde etc.

Ce qui m'intéresses dans cette problématique, c'est ceci

Code:

1
2
3
for(const c in data){
                    console.log(data[c].chartContainer)
                }

chartContainer contient le type de sonde, par exemple

pr, hu, wm, te, ba, ra, pl, di, vi, di (pression, humidité, température, batterie, radiation, pluie, vitesse du vent, direction du vent)

Dans un graphique, je ne peux afficher que deux type de mesures, par exemple
di et vi en Y
exemple

Le cas concret est pour la version Smart Phone "Smart bud", j'affiche un graphique par paire de type de mesure.
Ceci permet de définir l'ordre d'affichage

Code:

1
2
3
4
5
6
7
const rules = new Map([
                    ['hu', 0], ['pr', 0],
                    ['wm', 1], ['te', 1],
                    ['ra', 2], ['pl', 2],
                    ['vi', 3], ['di', 3],
                    ['ba', 4]
                ]);

Dans l'exemple, ci-dessus, les mesures de
l'humidité et la pression s'afficheront dans le premier graphique,
l'irrigation et la température, dans le deuxième
la radiation solaire et le pluie dans le troisième
la vitesse et la direction du vent dans le quatrième
et le niveau de la batterie dans le dernier.

Le problème que j'ai, est que maintenant, j'ai des stations qui ne mesurent pas toute la même chose car elles n'ont pas les mêmes sondes

Par exemple 1; ma station irrigation ne mesure que l'état hydrique des sol (wm) et la température de la terre (te)

Ceci va buger

Code:

1
2
3
4
5
6
7
const rules = new Map([
                    ['hu', 0], ['pr', 0],
                    ['wm', 1], ['te', 1],
                    ['ra', 2], ['pl', 2],
                    ['vi', 3], ['di', 3],
                    ['ba', 4]
                ]);

Il faudra avoir

Code:

1
2
3
4
const rules = new Map([
                    ['wm', 0], ['te', 0],
                    ['ba', 1]
                ]);

le graphe 1,3,4 et 5 ne recevront pas de valeur. (je précise plus bas)

exemple2: ma station bourgeon n'a que des sondes de température (te) et de la batterie (ba)
Ceci va encore buger

Code:

1
2
3
4
5
6
7
const rules = new Map([
                    ['hu', 0], ['pr', 0],
                    ['wm', 1], ['te', 1],
                    ['ra', 2], ['pl', 2],
                    ['vi', 3], ['di', 3],
                    ['ba', 4]
                ]);

il faudrait avoir

Code:

1
2
3
4
 
const rules = new Map([
                    ['te', 0], ['ba', 0]
]);

Pour mieux comprendre, je construire mes graphiques avec ce for

Code:

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
 
for(var le in Object(d_atas))
                {
 
                    if(d_atas[le].length > 0){
                        //console.log(le+': ', d_atas[le]);
 
                        // If does not exist
                        if ($('#charts .containerChart-' + le).length == 0 )
                        {
 
                            $('#charts').append('<div id="containerChart-' + le + '" class="containerChart"><canvas id="canvas-' + le + '" class="canvas"></canvas></div>')
 
                            var ctx = document.getElementById('canvas-' + le).getContext('2d');
 
                            if(d_atas[le].length > 1){
                                var conf = Charts.config_multiAxies(stationID,d_atas[le]);
                            }
                            else
                            {
                                var conf = Charts.config(stationID,d_atas[le]);
                            }
 
                            mychart = new Chart(ctx, conf);
 
                        }
                    }

SI j'ai ceci

Code:

1
2
3
4
5
 
const rules = new Map([
                    ['wm', 0], ['te', 0],
                    ['ba', 1]
]);

le for va louper deux fois fois et mettre la température en Y à gauche et batterie en Y à droite, dans mon premier graphique et la batterie dans le deuxipme graphique

Avec ceci

Code:

1
2
3
4
5
6
7
const rules = new Map([
                    ['hu', 0], ['pr', 0],
                    ['wm', 1], ['te', 1],
                    ['ra', 2], ['pl', 2],
                    ['vi', 3], ['di', 3],
                    ['ba', 4]
                ]);

le for va me contruire 5 graphiques.
wm et te se trouveront dans le deuxième
ra et pl dans le troisième, mais il ne sera pas quoi mettre dans le premier, le troisième et quatrième graph

Vois-tu?

je dois donc trouver un moyen pour que 'const rules' ait la même dimenssion que le nombre de type de mesure que j'extrait de ma base de donnée.

Peut etre une solution

Les informations extraites de ma base de donnée comprennent le type de la station, par exemple
1 pour les bourgeons
2 pour l'irrigation
3 pour la meteo

J'ai commencé donc à faire un truc du genre, mais j'ai pas terminé

Code:

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
                const rulesIrrigation = new Map([
                    ['wm', 0], ['te', 0],
                    ['ba', 1]
                ]);
 
                const rulesMeteo = new Map([
                    ['hu', 0], ['pr', 0],
                    ['pl', 1], ['te', 1],
                    ['ra', 2], ['ba', 2],
                    ['vi', 3], ['di', 3]
                ]);
 
                const rulesBourgeon = new Map([
                    ['te', 0], ['ba', 0]
                ]);
 
switch(data[c].station_type){
                    case 1:
                        const rules = rulesBourgeon;
                        break;
                    case 2:
                        const rules = rulesIrrigation;
                        break;
                    case 3:
                        const rules = rulesMeteo;
                        break;
                }

Ainsi j'espère avoir la bonne taille de const rules

Je ne sais pas si je vais dans le bon sens, mais s'il y a mieux, je suis ouvert :)

07/07/2021, 10h12
NoSmoking

Bonjour,

Citation:

Envoyé par Dave Hiock

Qu'est ce que tu reçois de ton serveur ?

ça on ne le sait toujours pas, on a besoin d'un exemple pour pouvoir mieux y voir !