Not being able to fetch data from weatherbit

#1

image
image1242×850 46.7 KB

This is my code in vs code…I am not being able to fetch weather data from weatherbit…

#2

Hi @2005624,

Below line is incorrect -

let cityName = document.getElementById("cityName").nodeValue;

Instead it will be

let cityName = document.getElementById("cityName").value;

Check this thread Not able to fetch info from weatherbit - #3 by rahul.singh

Do let me know in case you need further assistance.

#3

image
image1201×808 45.4 KB

This is my code after correcting but I am still not getting the data…

#4

Please help me I am not being able to fetch data from the api.

#5

Hi @2005624,

Please share your html code instead of screenshot so that we can debug the issue.

#6
WeatherWeb
WeatherWeb App
Search 
    <div class="weathercards" id="weather">
    </div>

    <script>
        function show_temp(){
        cityName = document.getElementById("cityName").value;
        httpRequest = new XMLHttpRequest();
        url = "https://api.weatherbit.io/v2.0/current?city=" + cityName + "&key=8e2ab3c4ce1a480b9efce00af2a760f6";

        httpRequest.open("GET", url);

        httpRequest.send();

        httpRequest.onreadystatehange = function(){
            if(this.readyState == 4 && this.status == 200){
                weather_data = JSON.parse(this.responseText);
                document.getElementById("weather").innerHTML = weather_data.data[0].temp;
            }
        }
    }
    </script>
#7 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="index.css">
    <link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@700&display=swap" rel="stylesheet">
    <title>WeatherWeb</title>
</head>
<body>
        <div class="heading" id="heading">WeatherWeb App</div>
        <div class="container">
            <input type="text" id="cityName" placeholder="Search for a city">
            <button onclick="show_temp()">Search</button>
        </div>

        <div class="weathercards" id="weather"></div>

        <script>
            function show_temp(){
            cityName = document.getElementById("cityName").value;
            httpRequest = new XMLHttpRequest();
            url = "https://api.weatherbit.io/v2.0/current?city=" + cityName + "&key=8e2ab3c4ce1a480b9efce00af2a760f6";

            httpRequest.open("GET", url);

            httpRequest.send();

            httpRequest.onreadystatehange = function(){
                if(this.readyState == 4 && this.status == 200){
                    weather_data = JSON.parse(this.responseText);
                    document.getElementById("weather").innerHTML = weather_data.data[0].temp;
                }
            }
        }
        </script>
</body>
</html>
#8

Please help me I am not being able to fetch data from API

#9

Hi @2005624,

Use the below code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="index.css">
    <link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@700&display=swap" rel="stylesheet">
    <title>WeatherWeb</title>
</head>
<body>
        <div class="heading" id="heading">WeatherWeb App</div>
        <div class="container">
            <input type="text" id="cityName" placeholder="Search for a city">
            <button onclick="show_temp()">Search</button>
        </div>

        <div class="weathercards" id="weather">100</div>

        <script>
            function show_temp(){
            cityName = document.getElementById("cityName").value;
            httpRequest = new XMLHttpRequest();
            url = "https://api.weatherbit.io/v2.0/current?city=" + cityName + "&key=8e2ab3c4ce1a480b9efce00af2a760f6";

            httpRequest.addEventListener("readystatechange", function() {
                if(this.readyState === 4) {
                    console.log(this.responseText);
                    weather_data = JSON.parse(this.responseText);
                    document.getElementById("weather").innerHTML = weather_data.data[0].temp;
                }
            });

            httpRequest.open("GET", url);


            httpRequest.send();

            
        }
        </script>
</body>
</html>

I added the readystatechange on addEventListener and it is working fine.

Do let me know in case you need further assistance.

#10

Thank you so much.
This solved my problem.

1 Like
#11

Could you please explain why wasn’t it working earlier?

1 Like