CODEWITHSUNDEEP
javascriptweather-api
Marco1314
Marco1314

Reputation: 25

get Data from Weather openweatherapi.org

I try to get data from weather API, but something doesnt work.

If I understand the instructions (https://openweathermap.org/current) correctly, I first need the coordinates, which I have saved in variables. However, when I try to find out the weather using the coordinates, I get the following error in my console: Bad request 400.

and the latitudes "lon" and lat are set to undefined:

https://api.openweathermap.org/data/2.5/weather?lat=undefined&lon=undefined&appid=MyKey

(MyKey is a placeholder because I don't want anyone to know my real key)

Here is my JS Code:

"use strict";

let API_KEY = "myKey";
let LINK_API = "http://api.openweathermap.org/geo/1.0/direct?q=berlin";
let NEW_API_LINK = "https://api.openweathermap.org/data/2.5/weather";
let lat;
let lon;
let fetchFunc = async function () {
    let fetch_begin_for_LINK_API= await fetch(LINK_API+"&appid="+API_KEY);
    let data_for_LINK_API =  fetch_begin_for_LINK_API.json();

    data_for_LINK_API.then(result => {
        lat = result[0].lat;
        lon = result[0].lon;
    });
    let fetch_begin_for_NEW_API_LINK = await fetch(NEW_API_LINK+"?lat="+
        lat+"&lon="+lon+
        "&appid="+API_KEY);
    let data_for_NEW_API_LINK =  fetch_begin_for_NEW_API_LINK.json();

    console.log(data_for_NEW_API_LINK);
}

fetchFunc();

Upvotes: 0

Views: 65

Answers (1)

Mehdi
Mehdi

Reputation: 1745

Here is how you can get the latitude and longitude of a city (ie here London,UK) in the 1rst async function. You can use them to get the weatherforecast data as follow in the 2nd async function. I made this snippet just place your API key in the snippet to see the values (I did not put mine)

const weathercoordinateBtn = document.getElementById('weather_coordinate_btn')
const weatherForecastBtn2 = document.getElementById('weather_forecast_btn')

async function forecastweatherFetchgetLatLon(){
    let apiKey = "yourAPI"
    const url = `http://api.openweathermap.org/geo/1.0/direct?q=London&limit=5&appid=${apiKey}`
    const options = {
        method: 'GET',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        }
    };

    try {
        const response = await fetch(`${url}`, options);
        const result = await response.json();
        let latitude = result[1].lat
        let longitude = result[1].lon
        console.log(result)
        console.log({latitude})
        console.log({longitude})
    } catch (error) {
        console.error(error);
    }
}

async function weatherFetch(){
    const url = `https://api.openweathermap.org/data/2.5/weather`
    let apiKey = "YourAPI"
    let latitude = 51.5156177 //used values obtained in first fctn
    let longitude = -0.0919983
    const options = {
        method: 'GET',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        }
    };

    try {
        const response = await fetch(`${url}?lat=${latitude}&lon=${longitude}&appid=${apiKey}&units=metric`, options);
        const result = await response.json();
        console.log(result)
        let description = result.weather[0].description
        let icon = result.weather[0].icon
        let Temperature = Math.floor(result.main.temp)
        console.log({description})
        console.log({icon})
        console.log({Temperature})
    } catch (error) {
        console.error(error);
    }
}

weathercoordinateBtn.addEventListener('click',forecastweatherFetchgetLatLon)
weatherForecastBtn2.addEventListener('click',weatherFetch)
<div class="div1"><div>
    <div class="div2"></div>
    <div class="div3"></div>
    <div class="div6"></div>
<button id="weather_coordinate_btn">getcoordinate</button>
<button id="weather_forecast_btn">getforecast</button>

Upvotes: 0

Related Questions