Probeleme api openweather

API CALL

Sujet résolu

8 septembre 2022 à 20:00:27

Bonjour tous le monde, j'ai un problème sur une petite application météo que j'aimerai créer en Javascript, lors de mon fetch des les infos d'une seule ville ex Rouen cela fonctionne.

Mais quand je mets tous mon fetch dans une function pour pouvoir choisir a quelle ville je veux faire appel en rentrant moi meme le nom d'une ville, l'api me donne une erreur 404 et il me dis data.main is undefind

Merci de votre aide !

Mon code html

<!doctype html>
<html lang="fr">

<head>
    <meta charset="utf-8">
    <title>La Météo de chez vous !</title>

    <!-- CSS only -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous" />

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
        integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="app.css">
</head>

<body>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-12 col-sm-6 my-3">
                <form>
                    <div class="form-group">
                        <input type="text" class="form-control" id="inputCity" />
                    </div>
                    <button type="submit" class="btn btn-info btn-block">Rechercher</button>
                </form>
            </div>


            <div class="col-12 col-sm-6 d-flex justfy-content-center my-3">
                <div class="box-container">
                    <div id="city" class="box"></div>
                    <div id="temp" class="box"></div>
                    <div id="humidity" class="box"></div>
                    <div id="wind" class="box"></div>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="./app.js"></script>
</html>

Mon app.js

const APIKEY = "5d627c791c84cff8ecae70dcc2e7e3f9";

/* appel de l'api avec ville en parametre de function */
  let url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${APIKEY}&units=metric&lang=fr`;

  let apiCall = function ville(city){
  fetch(url)
    .then((response) =>
      response.json().then((data) => {
        console.log(data);
        document.querySelector("#city").innerHTML = data.name;
        document.querySelector("#temp").innerHTML = data.main.temp + "°C";
        document.querySelector("#humidity").innerHTML =
          "<i class='fa-regular fa-droplet-percent'></i>" + data.main.humidity + "%";
        document.querySelector("#wind").innerHTML = data.wind.speed + "km/h";
      })
    )
    .catch((err) => console.log('erreur : ' + err));

    }

let ville = document.querySelector('form').addEventListener('submit', function (e) {
    e.preventDefault();
    document.querySelector('#inputCity').value;

    apiCall(city);
  });

Lamecarlate

8 septembre 2022 à 20:34:41

Bonjour,

il manque probablement quelque chose à la ligne 24, je te laisse la relire attentivement

Pas d'aide concernant le code par MP, le forum est là pour ça :)

zvheer

8 septembre 2022 à 20:36:04

Bonjour, personnellement je vois plus d'erreurs que la console indique.

ligne 6 pourquoi tenter de mettre une fonction déjà nommé dans une variable ? toujours ligne 6 l fonction défini s'appelle ville, ligne 22 tu nommes une variable ville, ça peux porter a confusion tu ne penses pas ? dans cette variable ville tu places le retour d'un listener qui si je ne dis pas de bêtise est null ou undefined en tous cas aucune utilité ici

quelle est le but de la ligne 24?

ligne 26 le city que tu passes a ton appel sort d'où ?

en bref une base comme ça t'aiderait plus

function call_api(city) {...}

const city_input = document.getElementById('inputCity')

document.querySelector('formulaire'). addEventListener('submit', function(submit_event) {

submit_event.preventDefault()
call_api(city_input.value) 

})

-
Edité par zvheer 8 septembre 2022 à 20:41:11

yasakani no magatama

LoicAlcesilas

12 septembre 2022 à 15:06:30

Lamecarlate a écrit:

Bonjour,

il manque probablement quelque chose à la ligne 24, je te laisse la relire attentivement

oui j'ai déplacer le let ville mais je vois pas ce qu'il me manque d'autre

Lamecarlate

12 septembre 2022 à 15:08:55

Donne ton nouveau code. Et as-tu lu le message de zvheer ?

Pas d'aide concernant le code par MP, le forum est là pour ça :)

LoicAlcesilas

16 septembre 2022 à 17:27:04

Lamecarlate a écrit:

Donne ton nouveau code. Et as-tu lu le message de zvheer ?

Oui merci j'ai sue résoudre mon problème la météo marche nickel !

Lamecarlate

16 septembre 2022 à 17:28:39

Tu pourrais poster le code qui marche, pour aider les personnes du futur qui auraient le même problème que toi

Pas d'aide concernant le code par MP, le forum est là pour ça :)

LoicAlcesilas

16 septembre 2022 à 18:05:49

Lamecarlate a écrit:

Tu pourrais poster le code qui marche, pour aider les personnes du futur qui auraient le même problème que toi ?

Oui pas de problème !

const APIKEY = "mettre sa clef";

/* appel de l'api avec ville en parametre de function */
   function call_api(city){
    let url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${APIKEY}&units=metric&lang=fr`;
    fetch(url)
    .then((response) =>
      response.json().then((data) => {
        console.log(data);
        document.querySelector("#city").innerHTML = data.name;
        document.querySelector("#temp").innerHTML = data.main.temp + "°C";
        document.querySelector("#humidity").innerHTML =
          "<i class='fa-regular fa-droplet-percent'></i>" + data.main.humidity + "%";
        document.querySelector("#wind").innerHTML = data.wind.speed + "km/h";
      })
    )
    .catch((err) => console.log('erreur : ' + err));

    }


const city_input = document.getElementById('inputCity')

document.querySelector('form'). addEventListener('submit', function(submit_event) {

submit_event.preventDefault()
call_api(city_input.value)

})

Lamecarlate

16 septembre 2022 à 18:21:05

Merci

bonne continuation !

Pas d'aide concernant le code par MP, le forum est là pour ça :)