Kevin Powell - Community•4mo ago

working with api's using fetch

I am trying to figure out why this is not working properly. I keep getting undefine when I console.log(data)? and when I do something to mess it up on purpose the browser the .catch statment says it is wrong but I copied it from the docs and the only difference is that I put er instead of error

 async function getData() {

  const data = await fetch(url)
    .then((res) => {
      if (res.status === 200) {        
          return res.json();
      } else {
        throw new Error("Server Error");
      }
    })
    .then((deb) => {
      console.debug(deb);
    })
    .catch((er) => {
      console.error(er);
    });

    console.log(data)
 
}
 getData();

 async function getData() {

  const data = await fetch(url)
    .then((res) => {
      if (res.status === 200) {        
          return res.json();
      } else {
        throw new Error("Server Error");
      }
    })
    .then((deb) => {
      console.debug(deb);
    })
    .catch((er) => {
      console.error(er);
    });

    console.log(data)
 
}
 getData();

23 Replies

althepal78•4mo ago

my url is also okay but here it is

const url =
  "https://api.open-meteo.com/v1/forecast?latitude=28.483514077691396&longitude=-82.53872837487489&current=temperature_2m,apparent_temperature,precipitation,weather_code,wind_speed_10m,wind_direction_10m,wind_gusts_10m&temperature_unit=fahrenheit&wind_speed_unit=mph&precipitation_unit=inch&timeformat=unixtime&timezone=America%2FNew_York";

const url =
  "https://api.open-meteo.com/v1/forecast?latitude=28.483514077691396&longitude=-82.53872837487489&current=temperature_2m,apparent_temperature,precipitation,weather_code,wind_speed_10m,wind_direction_10m,wind_gusts_10m&temperature_unit=fahrenheit&wind_speed_unit=mph&precipitation_unit=inch&timeformat=unixtime&timezone=America%2FNew_York";

Jochem•4mo ago

you're mixing await and chaining promises

 async function getData() {

  const response = await fetch(url);
  if (response.status !== 200) {        
    throw new Error("Server Error");
  }
  const data = response.json();
  console.log(data)
}
getData();

 async function getData() {

  const response = await fetch(url);
  if (response.status !== 200) {        
    throw new Error("Server Error");
  }
  const data = response.json();
  console.log(data)
}
getData();

try this

althepal78•4mo ago

yes I am confused. okay why would the fetch doc mess me up lol

Jochem•4mo ago

so, you can work with promises two ways, using async...await, or using .then. You were using both

althepal78•4mo ago

so if I did it with a promise I should not use async await?

Jochem•4mo ago

exactly though async await is just syntactic sugar to handle promises, they're still promises in both situations

althepal78•4mo ago

okay but I just get errors when I do it with the .then() so I am copyin gyour stuff now 🙂 Thank you 🙂

Jochem•4mo ago

no worries, glad to help!

althepal78•4mo ago

I dont know what I am doing I thought I new how but when I start doing it I am like umm everything not working back to the drawing board lmao

Jochem•4mo ago

haha, that's very familiar, especially when you've mostly been using tutorials to learn! The step to making it yourself is pretty big and people underestimate it. Your best bet is to read the error messages and go from there, and don't hesitate to ask early and often!

althepal78•4mo ago

well that and I am trying to figure out how to get he data and I have not used api in over year and use to axios. I was trying hard to use fetch but it is a bit confusing I realized what I wanted was to do const data = await response.json(); and I get the data I need to parse lol also this api I am using is using time weird like a whole number

current
: 
apparent_temperature
: 
72.1
interval
: 
900
precipitation:0
temperature_2m:70.7
time:1710256500
weather_code:0
wind_direction_10m: 46
wind_gusts_10m:7.8
wind_speed_10m: 5.1`

current
: 
apparent_temperature
: 
72.1
interval
: 
900
precipitation:0
temperature_2m:70.7
time:1710256500
weather_code:0
wind_direction_10m: 46
wind_gusts_10m:7.8
wind_speed_10m: 5.1`

Jochem•4mo ago

that's a unix timestamp. Basically the number of seconds since January 1st 1970. A lot of computers work with that type of time, because it's much easier to do math on

althepal78•4mo ago

Yeah I am trying to make that a simple date but it gives me that date you just put lol

Jochem•4mo ago

so... Javascript is a little bit weird. Almost every other programming language uses seconds since 1970-01-01 0:00:00 UTC, Javascript uses _micro_seconds this should work and give you a reasonable time:

const date = new Date(data[time]*1000);

const date = new Date(data[time]*1000);

it's supposed to be 3:15pm today, so about 15 minutes ago in UTC

althepal78•4mo ago

oh okay so it is not a date?

Jochem•4mo ago

it's a date and a time combined

althepal78•4mo ago

so would i have to do Date(data.time)

Jochem•4mo ago

it's indicating a specific second on a specific day, namely the one 1.7billion (plus change) seconds since January 1st 1970 yes, correct. (also good catch on the syntax, I was not paying attention and writing PHP and JS mixed together!)

althepal78•4mo ago

oh lmao I use to know how that felt I prefer .net mvc over react and all that I hate react lol

Jochem•4mo ago

you're in good company on this server, most people here don't really like React either 🙂 if you just want to use a framework for fun, I'd recommend using Sveltekit. It's a lot more developer friendly

althepal78•4mo ago

I don't like the js frameworks they making a check hard like check to see if it is a password is like 15 lines all you ahve to do is

[passowrd]

[passowrd]

I will get into that after I get this down, I need to learn again I took like 7 months off and did a little css here and there and forgot a lot lol the date thing is crazy if I put Date(data.time) I get todays date, if I put new Date with the time I get the 1970 LOL what LOL i forgot the * 1000 lol

Jochem•4mo ago

yup, that one's definitely important 🙂

althepal78•4mo ago

so now it is time to extract everything and put it where I want it lol

Gaming

Programming

working with api's using fetch