Bonjour à vous je suis après faire une page qui montre la météo actuel et sur une période de 36 heures à l'aide de l'API -> api.openweathermap.org/data/2.5/forecast

J'ai raccourci le code le plus possible pour présenter le problème.

dans mon HTML j'ai la classe modele" qui est dans un TR ainsi elle contient les classes suivantes "heure, temperature, icone, conditions

j'ai cloné le TR 12X et j'ai modifié le nom de chaque Class pour rajouter un nombre a la fin du nom de la classe.

la variable Liste contient les informations sur une période de 5 jours avec une distance de 3h entre chaque.

donc rendu à la dernière boucle dans mon code j'essaie de faire ceci : $(".conditions" + i)[0].textContent = list[i].weather[0].description;.

en résumé si je comprends bien c'est que tous les classes avec le nom conditions avec un nombre de 0 @ 11 seront remplacé par le contenue de la variable list qui boucle de 0 @ 11 et va insérer les informations dans les classes conditions.

mais bien sure cela ne fonctionne pas et je cherche à comprendre....

si vous voulez avoir le code en entier voici mon gitHub : https://github.com/MI7QC/API_Meteo_AJax


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
<!DOCTYPE html>
<html lang="fr">
 
<head>
    <meta charset="UTF-8" />
    <title>Ajax API Open Weather</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.10/css/weather-icons.css">
    <link rel="stylesheet" href="style/main.css">
</head>
 
<body>
    <main>
        <section id="previsions">
            <h3>Prévisions Météo</h3>
            <div id="info_panel">
                <ul>
                </ul>
            </div>
            <div id="data_panel">
                <table id="tb_prevision">
                    <thead>
                        <tr>
                            <th>Heure</th>
                            <th>Temp</th>
                            <th>Icône</th>
                            <th>Desc</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="modele">
                            <td class="heure"></td>
                            <td class="temperature"></td>
                            <td class="icone"><img src="" alt="" /></td>
                            <td class="conditions"></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </section>
    </main>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="script/main.js"></script>
</body>
</html>



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
//Icone qui sera afficher a l'écrans a l'aide de la description condition meteo
const meteoImg = {
    "Rain": "wi wi-day-rain",
    "Clouds": "wi wi-day-cloudy",
    "Clear": "wi wi-day-cloudy",
    "Snow": "wi wi-day-snow",
    "Mist": "wi wi-day-fog",
    "Drizzle": "wi wi-day-sleet",
    "Thunderstorm": "wi wi-thunderstorm"
}
 
// la première lettre d'un mot soit en Majuscule
function lettreMaj(str) {
    return str.charAt(0).toUpperCase() + str.slice(1);
}
 
//Fournir heure au format hh:mm à partir d'un timestamp
const CONV = {
    dt_a_hm: dt => {
        let date = new Date(dt * 1000);
        return ("0" + date.getHours()).substr(-2) + "h" + (date.getMinutes() + "0").substr(0, 2);
    }
}
 
 
//main function
async function main() {
    let ville;
 
    // recupere les données sur le serveur openweathermap pour avoir la meteo sur 5 jours
    const meteo2 = await fetch("http://api.openweathermap.org/data/2.5/forecast?q=" + ville + "&APPID=d372021858e26c181fc642ca0f0dbd18&units=metric")
        .then(resultat => resultat.json())
        .then(json => json)
}
    afficherMeteoInfo2(meteo2)
 
//fonction qui affiche le rendu a l'écrans
function afficherMeteoInfo2(data2) {
 
    // Récupère toute la liste des informations météo sur 5 jours
    let list = data2.list;
 
    // petit test pour l'icone...
    const conditions = list[0].weather[0].main;
 
 
   //Clonage de la <tr class="modele"> Modification du nom pour les classe  model,heure,temperature,icone,condition  pour avoir une numérotation.  
    $(document).ready(function () {
        var eM = $('.modele');
        var eH = $('.heure');
        var eT = $('.temperature');
        var eW = $('.icone');
        var eC = $('.conditions');
 
        for (var i = 0; i < 13; i++) {
            eM.attr("class", "modele" + i)
            eH.attr("class", "heure" + i)
            eT.attr("class", "temperature" + i)
            eW.attr("class", "icone" + i)
            eC.attr("class", "conditions" + i)
 
            eM.clone().insertBefore(eM);
            $(".modele12").remove();
        }
    });
 
    // récupération des donné  Heure,Temp,Icone,Description
    for (var i = 0; i <= 12; i++) {
 
        //test info
        console.log(" list[i].dt : ", CONV.dt_a_hm(list[i].dt));
        console.log(" list[i].main.temp : ", list[i].main.temp);
        console.log(" list[i].weather[0].description : ", list[i].weather[0].description);
        console.log(" list[i].weather[0].icon : ", list[i].weather[0].icon);
        console.log("-------------------------------------", i);
 
        // j'essais d'afficher tous les donnés qui sont dans la liste pour chaque  classe avec leur numérotation. j'ai toujours une Erreur
        $('.heure' + i)[0].innerHTML = CONV.dt_a_hm(list[i].dt);
        $('.temperature' + i)[0].textContent = Math.round(list[i].main.temp);
        $(".conditions" + i)[0].textContent = list[i].weather[0].description;
        $('.icone' + i)[0].className = meteoImg[conditions];
    };
 
    //Ici a l'écrans tous s'affiche 12X  bien sure simplement de la  duplication voir image ...
    //$('.heure')[0].innerHTML = CONV.dt_a_hm(list[i].dt);
    //$('.temperature')[0].textContent = Math.round(list[i].main.temp);
    //$(".conditions")[0].textContent = list[i].weather[0].description;
    //$('.icone')[0].className = meteoImg[conditions];
 
}
petite image de ma console on voit bien mon dom.


ici un aperçus du rendu visuel avec les duplication.