Utiliser les données d'un JSON

**HyPs0** · 19/07/2020, 16h22

Bonjour je suis débutant en JavaScript et j'aurais besoin d'aide sur un exercice. J'ai un fichier 'data.js' dans lequel j'ai deux constantes. La première :

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
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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
const semaine_data =
    [
        {
            "flux": [
                false,
                false,
                false,
                false
            ],
            "nom": "Lundi",
            "estDecale": false,
            "numSemaine": 2,
            "fete": "Raymond",
            "id": 7,
            "vacanceZoneB": false,
            "enConflit": false,
            "day": 0,
            "estFerie": false,
            "estAnnuler": false,
            "vacanceZoneA": false,
            "month": "Janvier",
            "vacanceZoneC": false,
            "monthId": 0
        },
        {
            "flux": [
                true,
                true,
                false,
                false
            ],
            "nom": "Mardi",
            "estDecale": false,
            "numSemaine": 2,
            "fete": "Lucien",
            "id": 8,
            "vacanceZoneB": false,
            "enConflit": false,
            "day": 1,
            "estFerie": false,
            "estAnnuler": false,
            "vacanceZoneA": false,
            "month": "Janvier",
            "vacanceZoneC": false,
            "monthId": 0
        },
        {
            "flux": [
                false,
                false,
                true,
                false
            ],
            "nom": "Mercredi",
            "estDecale": false,
            "numSemaine": 2,
            "fete": "Alix",
            "id": 9,
            "vacanceZoneB": false,
            "enConflit": false,
            "day": 2,
            "estFerie": false,
            "estAnnuler": false,
            "vacanceZoneA": false,
            "month": "Janvier",
            "vacanceZoneC": false,
            "monthId": 0
        },
        {
            "flux": [
                false,
                false,
                false,
                false
            ],
            "nom": "Jeudi",
            "estDecale": false,
            "numSemaine": 2,
            "fete": "Guillaume",
            "id": 10,
            "vacanceZoneB": false,
            "enConflit": false,
            "day": 3,
            "estFerie": false,
            "estAnnuler": false,
            "vacanceZoneA": false,
            "month": "Janvier",
            "vacanceZoneC": false,
            "monthId": 0
        },
        {
            "flux": [
                false,
                false,
                false,
                false
            ],
            "nom": "Vendredi",
            "estDecale": false,
            "numSemaine": 2,
            "fete": "Pauline",
            "id": 11,
            "vacanceZoneB": false,
            "enConflit": false,
            "day": 4,
            "estFerie": false,
            "estAnnuler": false,
            "vacanceZoneA": false,
            "month": "Janvier",
            "vacanceZoneC": false,
            "monthId": 0
        },
        {
            "flux": [
                false,
                false,
                false,
                false
            ],
            "nom": "Samedi",
            "estDecale": false,
            "numSemaine": 2,
            "fete": "Tatiana",
            "id": 12,
            "vacanceZoneB": false,
            "enConflit": false,
            "day": 5,
            "estFerie": false,
            "estAnnuler": false,
            "vacanceZoneA": false,
            "month": "Janvier",
            "vacanceZoneC": false,
            "monthId": 0
        },
        {
            "flux": [
                false,
                false,
                false,
                false
            ],
            "nom": "Dimanche",
            "estDecale": false,
            "numSemaine": 2,
            "fete": "Yvette",
            "id": 13,
            "vacanceZoneB": false,
            "enConflit": false,
            "day": 6,
            "estFerie": true,
            "estAnnuler": false,
            "vacanceZoneA": false,
            "month": "Janvier",
            "vacanceZoneC": false,
            "monthId": 0
        }
    ];

Et la deuxième :

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
42
const flux_data = [
    {
        "couleur": "#936938",
        "nom": "Ordures Ménagères",
        "couleurBac": "#A5A5A5",
        "svg": "cercle",
        "position": 55,
        "estActive": true,
        "id": 0,
        "description": ""
    },
    {
        "couleur": "#fec62c",
        "nom": "Tri Sélectif",
        "couleurBac": "#A5A5A5",
        "svg": "cercle",
        "position": 75,
        "estActive": true,
        "id": 1,
        "description": ""
    },
    {
        "couleur": "#4b9b44",
        "nom": "Verre",
        "couleurBac": "#A5A5A5",
        "svg": "cercle",
        "position": 95,
        "estActive": true,
        "id": 2,
        "description": ""
    },
    {
        "couleur": "#16B6C6",
        "nom": "Bleu",
        "couleurBac": "#A5A5A5",
        "svg": "cercle",
        "position": 115,
        "estActive": false,
        "id": 3,
        "description": ""
    }
];

Ce que je dois faire c'est pour chaque jour de la semaine : je dois parcourir les valeurs de la clé "flux" et l'associer à une activité. Par exemple pour le mardi les deux premières valeurs sont égales à "true"ce qui correspond dans ma constante 'flux_data' au deux première activités 'Ordure ménagère' et 'Tri sélectif'. J'ai créer un fichier 'Index.html' pour afficher les valeur dans un tableau mais pour l'instant j'ai seulement réussi à afficher les jours de la semaine. Voilà à quoi devrait ressembler mon tableau : Nom : resultat.PNG
Affichages : 111
Taille : 17,7 Ko

Nom : resultat.PNG
Affichages : 111
Taille : 17,7 Ko

Est-ce que quelqu'un à une idée de la façon dont je devrais procéder ?

**NoSmoking** · 20/07/2020, 19h09

Bonjour et bienvenue sur DVP.

Tu n'auras pas d'autre choix que de parcourir ton tableau de datas pour y associer/récupérer les données du flux.

Voilà une approche possible.

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
// get Element TD à remplir, par exemple
const elementsTDs = document.querySelectorAll("td");
// lecture des données semaine
semaine_data.forEach((data, ind) => {
  // récup. de l'Array flux
  const flux = data.flux;
  // lecture données flux correspondantes
  flux.forEach((f, pos) => {
    // affiche données si ok
    if (f) {
      // pour voir les données
      console.log(flux_data[pos]);
      // ajout informations dans cellule
      elementsTDs[ind].insertAdjacentHTML("beforeend", flux_data[pos].nom + "<br>");
    }
  });
});

A toi d'expérimenter et voir ce qui se passe

**HyPs0** · 20/07/2020, 19h54

Merci d'avoir pris le temps de répondre ! Voilà ce que j'ai fait hier en faisant quelques recherche (je ne sais pas si la méthode est la bonne) :

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
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<body>
    <h1>Ma semaine de collecte</h1>
    <div class="table-responsiv">
        <table class="table table-stripped">
            <tr id="jours" class="bg-info"></tr>
            <tbody id="planning"></tbody>
        </table>
    </div>
 
</body>
<script>
 
    buildTable(semaine_data)
 
    function buildTable(data){
        var table = document.getElementById("jours")
 
        for( var i =0; i < data.length; i++){
            var row = `<tr>
                            <td>${data[i].nom + " " + data[i].id}</td>
                        </tr>`
 
            table.innerHTML += row
        }
        var count=0;
        var plan = document.getElementById("planning")
 
        for( var i =0; i < data.length; i++){
            
            data[i].flux.forEach(element => {
                if(element == true){
                    var text = `<tr>
                                    <td>${flux_data[count].nom}</td>
                                </tr>`
                    count++
                    plan.innerHTML += text
                }
               
            });
            
        }
    }
    
</script>

Et voilà le résultat que j'obtient :
Nom : résultat_perso.PNG
Affichages : 116
Taille : 12,1 Ko

Je n'arrive pas à faire en sorte que les tâches soient associées au bon jour, je ne vois pas trop comment faire. Je vais également tester ce que tu m'as envoyé pour voir ce que je peux faire avec.

**NoSmoking** · 21/07/2020, 14h50

Tu n'en as pas bien loin mais tu te fourvoies avec l'utilisation d'un compteur alors que le forEach t'en fourni un nativement.

Une autre chose importante évites, lorsque c'est possible, d'utiliser innerHTML, surtout que dans ton cas où tu livres un HTML mal formé mise de <tr><td></td></tr> dans <tr></tr>.

Ta fonction pourrait ressembler à :

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
function buildTable(data) {
    var table = document.getElementById("jours");
    var plan = document.getElementById("planning");
 
    for (var i = 0; i < data.length; i++) {
        //var row = `<tr><td>${data[i].nom + " " + data[i].id}</td></tr>`
        //table.innerHTML += row
        // insertion titre colonne
        table.insertCell().textContent = data[i].nom + " " + data[i].id;
    }
    //var count=0;
    for (var i = 0; i < data.length; i++) {
        // ajout d'une cellule
        const oCell = plan.insertCell();
        // on boucle sur les flux
        data[i].flux.forEach((element, pos) => {
            /*--
            if(element == true){
                var text = `<tr><td>${flux_data[count].nom}</td></tr>`
                count++
                plan.innerHTML += text
            }
            /*--*/
            if (element) {
                oCell.insertAdjacentHTML("beforeend", flux_data[pos].nom + "<br>");
            }
        });
    }
}

Tu constateras de toi même que tu fais deux fois la même boucle d'où une simplification possible.

**HyPs0** · 22/07/2020, 17h12

Merci de ta réponse ! Cependant mes tâches n'apparaissent plus dans mon tableau :

Nom : résultat_perso.PNG
Affichages : 88
Taille : 10,3 Ko

Est-ce due à cette partie du code ?

Code :

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

1
2
3
4
5
6
 data[i].flux.forEach((element, pos) => {
 
            if (element) {
                oCell.insertAdjacentHTML("beforeend", flux_data[pos].nom + "<br>");
            }
        });

**NoSmoking** · 22/07/2020, 17h47

Il nous aurait fallu la fonction dans son entièreté pour pouvoir juger.

La console ne te dis rien, F12 ?

Lire plus tard

**HyPs0** · 22/07/2020, 18h08

La console me dit que insertCell() n'est pas une fonction.

Nom : erreur.PNG
Affichages : 80
Taille : 3,9 Ko

**NoSmoking** · 22/07/2020, 18h16

j'avais mal lu ton HTML que j'ai interprété comme

Code html :

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

1
2
3
4
<table class="table table-stripped">
    <tr id="jours" class="bg-info"></tr>
    <tr id="planning"></tr>
</table>

donc <tr> en lieu et place de <tbody> !

**HyPs0** · 22/07/2020, 18h20

Ah oui super ça marche ! Merci beaucoup de ton aide

Utiliser les données d'un JSON

JavaScript

Discussions similaires

Partager

Partager