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
althepal78•8mo 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
Jochem•8mo 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
althepal78•8mo ago
yes I am confused. okay why would the fetch doc mess me up lol
Jochem
Jochem•8mo ago
so, you can work with promises two ways, using async...await, or using .then. You were using both
althepal78
althepal78•8mo ago
so if I did it with a promise I should not use async await?
Jochem
Jochem•8mo ago
exactly though async await is just syntactic sugar to handle promises, they're still promises in both situations
althepal78
althepal78•8mo ago
okay but I just get errors when I do it with the .then() so I am copyin gyour stuff now 🙂 Thank you 🙂
Jochem
Jochem•8mo ago
no worries, glad to help!
althepal78
althepal78•8mo 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
Jochem•8mo 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
althepal78•8mo 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
Jochem•8mo 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
althepal78•8mo ago
Yeah I am trying to make that a simple date but it gives me that date you just put lol
Jochem
Jochem•8mo 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
althepal78•8mo ago
oh okay so it is not a date?
Jochem
Jochem•8mo ago
it's a date and a time combined
althepal78
althepal78•8mo ago
so would i have to do Date(data.time)
Jochem
Jochem•8mo 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
althepal78•8mo ago
oh lmao I use to know how that felt I prefer .net mvc over react and all that I hate react lol
Jochem
Jochem•8mo 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
althepal78•8mo 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
Jochem•8mo ago
yup, that one's definitely important 🙂
althepal78
althepal78•8mo ago
so now it is time to extract everything and put it where I want it lol
Want results from more Discord servers?
Add your server