Utiliser les données d'un JSON

Version imprimable

1 pièce(s) jointe(s)

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:

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:

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 : Pièce jointe 575360

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

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:

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 ;)

1 pièce(s) jointe(s)

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:

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 :
Pièce jointe 575451

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.

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:

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.

1 pièce(s) jointe(s)

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

Pièce jointe 575623

Est-ce due à cette partie du code ?
Code:

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

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

La console ne te dis rien, F12 ?

Lire plus tard ;)

22/07/2020, 18h08
HyPs0

1 pièce(s) jointe(s)

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

Pièce jointe 575628

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

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> !

22/07/2020, 18h20
HyPs0

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