Kevin Powell - Community•9mo ago

Weather APP using weatherapi.com

The goal of this is to be able to show the current weather in a specific location (searchable). Now I have access to it, and I can see a Call (the url), and a response body (bunch of JSON). Now... I know I can use fetch to access or pull (I think pull is the word), the API url, so does that mean I can then access any of the JSON properties without having to add them to my codebase somewhere?

{
    "location": {
        "name": "London",
        "region": "City of London, Greater London",
        "country": "United Kingdom",
        "lat": 51.52,
        "lon": -0.11,
        "tz_id": "Europe/London",
        "localtime_epoch": 1695322219,
        "localtime": "2023-09-21 19:50"
    },

{
    "location": {
        "name": "London",
        "region": "City of London, Greater London",
        "country": "United Kingdom",
        "lat": 51.52,
        "lon": -0.11,
        "tz_id": "Europe/London",
        "localtime_epoch": 1695322219,
        "localtime": "2023-09-21 19:50"
    },

This is the first part of the "response body", and I imagine I do not need to add this to my code, I can just simply access the location.name in my code and it'll appear?

14 Replies

CDL•9mo ago

This is the initial code I have built (removed the API key)

let getLocation = async function (location) {
  try {
    let response =
      await fetch(`http://api.weatherapi.com/v1/current.json?key=&q=London&aqi=no
`);
    if (response.status !== 200) {
      throw "Error";
    }
    return await response.json();
  } catch (error) {
    console.error("Error:", error);
  }
};

let getLocation = async function (location) {
  try {
    let response =
      await fetch(`http://api.weatherapi.com/v1/current.json?key=&q=London&aqi=no
`);
    if (response.status !== 200) {
      throw "Error";
    }
    return await response.json();
  } catch (error) {
    console.error("Error:", error);
  }
};

ZomaTheMasterOfDisaster•9mo ago

You could use the fetch() and the response.json() to get the whole object returned

fetch('https://reqbin.com/echo/get/json', {
    method: 'GET',
    headers: {
        'Accept': 'application/json',
    },
})
   .then(response => response.json())
   .then(response => console.log(JSON.stringify(response)))

fetch('https://reqbin.com/echo/get/json', {
    method: 'GET',
    headers: {
        'Accept': 'application/json',
    },
})
   .then(response => response.json())
   .then(response => console.log(JSON.stringify(response)))

That's just a simple example I found To test you got a return Just change the url to yours

CDL•9mo ago

the url I have seems to be specific to London, I couldn't find a generalized URL I imagine If I try to search for Amsterdam through that URL, it won't work, as it only contains JSON for London

Jochem•9mo ago

what's the URL look like?

CDL•9mo ago

http://api.weatherapi.com/v1/current.json?key=&q=London&aqi=no Though I removed my api key after key=

Jochem•9mo ago

yeah, that's good to remove 🙂 sounds like you just need to change q=London to whatever city you're looking for so http://api.weatherapi.com/v1/current.json?key=&q=Amsterdam&aqi=no would give you results for Amsterdam something like

let url = `http://api.weatherapi.com/v1/current.json?key=&q=${city}&aqi=no`;

let url = `http://api.weatherapi.com/v1/current.json?key=&q=${city}&aqi=no`;

would work

CDL•9mo ago

oh I didn't think of that

const location = document.querySelector("app");
fetch(
  "http://api.weatherapi.com/v1/current.json?key=YOUR_API_KEY&q=London&aqi=no",
  {
    mode: "cors",
  }
)
  .then(function (response) {
    return response.json();
  })
  .then(function (response) {
    app.src = response.location.name;
  });

const location = document.querySelector("app");
fetch(
  "http://api.weatherapi.com/v1/current.json?key=YOUR_API_KEY&q=London&aqi=no",
  {
    mode: "cors",
  }
)
  .then(function (response) {
    return response.json();
  })
  .then(function (response) {
    app.src = response.location.name;
  });

I was trying to also mimic and old API project I've done but I think my lack of understanding around how the code works isn't going well 😄 I'm sure this is wrong on both the 1st line (const location = ) and the last line (app.src = response.location.name) Waaaait a minute

const app = document.querySelector("#app");

let city = "New York";

fetch(
  `http://api.weatherapi.com/v1/current.json?key=YOUR_API_KEY&q=${city}&aqi=no`,
  {
    mode: "cors",
  }
)
  .then(function (response) {
    return response.json();
  })
  .then(function (response) {
    app.textContent = `Location: ${response.location.name}`;
  });

const app = document.querySelector("#app");

let city = "New York";

fetch(
  `http://api.weatherapi.com/v1/current.json?key=YOUR_API_KEY&q=${city}&aqi=no`,
  {
    mode: "cors",
  }
)
  .then(function (response) {
    return response.json();
  })
  .then(function (response) {
    app.textContent = `Location: ${response.location.name}`;
  });

Jochem•9mo ago

that seems like it would work, yes 😄

CDL•9mo ago

Certainly does, I now just need to figure out how I implement the search function to pick whatever city you want instead of "let city = "New York";"

Jochem•9mo ago

you can use something like document.querySelector().value to get the value of an input nad pass that in. You would probably want to make sure the value only contains alphanumeric characters though, just to be safe

CDL•9mo ago

got it, thanks Jochem! crap I didn't do anything except git init this, I haven't used NPM or anything 😄 Question. I need to also include the temperature in C and F for the city chosen. Where would you put that? I was thinking adding it under here

    .then(function (response) {
      app.textContent = `Location: ${response.location.name}`;
      //add line's for C and F here
    })

    .then(function (response) {
      app.textContent = `Location: ${response.location.name}`;
      //add line's for C and F here
    })

main function:

function fetchWeather(city) {
  fetch(
    `http://api.weatherapi.com/v1/current.json?key=YOUR_API_KEY&q=${city}&aqi=no`,
    {
      mode: "cors",
    }
  )
    .then(function (response) {
      return response.json();
    })
    .then(function (response) {
      app.textContent = `Location: ${response.location.name}`;
    })
    .catch(function (error) {
      console.error("Error fetching weather data:", error);
      app.textContent = "An error occurred while fetching weather data.";
    });
}

function fetchWeather(city) {
  fetch(
    `http://api.weatherapi.com/v1/current.json?key=YOUR_API_KEY&q=${city}&aqi=no`,
    {
      mode: "cors",
    }
  )
    .then(function (response) {
      return response.json();
    })
    .then(function (response) {
      app.textContent = `Location: ${response.location.name}`;
    })
    .catch(function (error) {
      console.error("Error fetching weather data:", error);
      app.textContent = "An error occurred while fetching weather data.";
    });
}

Jochem•9mo ago

it really depends on where you have access to that data. if it's part of the response, they yeah, that would make sense

MarkBoots•9mo ago

i looked at the docs, and it should be in the response under response.current.temp_c and response.current.temp_f I got this from their api-explorer: https://www.weatherapi.com/api-explorer.aspx

CDL•9mo ago

yeah done that and it weorks I feel like this is a poor way to do it though? as it's all in a textContent

    .then(function (response) {
      return response.json();
    })
    .then(function (response) {
      app.textContent = `Location: ${response.location.name} & Temperature: ${response.current.temp_c}`;
    })
    .catch(function (error) {
      console.error("Error fetching weather data:", error);
      app.textContent = "An error occurred while fetching weather data.";
    });

    .then(function (response) {
      return response.json();
    })
    .then(function (response) {
      app.textContent = `Location: ${response.location.name} & Temperature: ${response.current.temp_c}`;
    })
    .catch(function (error) {
      console.error("Error fetching weather data:", error);
      app.textContent = "An error occurred while fetching weather data.";
    });

so I'm not really sure how I target them to now customize them in css Gotta sleep but if anyone is able to offer any insight into how I could go about maybe changing the app.textContent line so that I am able to use CSS to customize the layout of the response, that'd be great. I think I need to add a Class or ID to the response but am not sure how to go about doing it. (code in my message above)

Gaming

Programming

Weather APP using weatherapi.com