1

I'm trying to get data from https://wttr.in/?format=j1 to show on a webpage. I'm very new to Javascript so I hoped this would be easy but I'm struggling to get it to work, what am I doing wrong?.

<html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content= "width=device-width, initial-scale=1.0" /> </head> <body> <p id="temp"></p> </body> <script> const api_url = "https://wttr.in/?format=j1"; async function getWeather() { const response = await fetch(api_url); const data = await response.json(); const weather = data.results[0].current_condition[0]; let { temp } = weather.temp_C; document.getElementById("temp").href = "temp:" + temp; getWeather(); </script> </html>
Improve this question
5
  • 2
    First of all, you got a syntax error there (check the browser console, it will tell you about those!) - your function does not have a closing } anywhere. Commented Jul 11, 2022 at 12:51
  • 1
    Second, the JSON you will be receiving, does not contain a results property. You want to access data.current_condition[0] directly. Commented Jul 11, 2022 at 12:53
  • 2
    Third, let { temp } = - those curly braces here make no sense, remove them. Commented Jul 11, 2022 at 12:54
  • 1
    And finally, trying to set the href attribute of a paragraph, that makes little sense. Make that last line document.getElementById("temp").innerHTML = "temp:" + temp; Commented Jul 11, 2022 at 12:55
  • Done all those changes and it works perfectly! thanks for the help with this :) Commented Jul 11, 2022 at 12:57

2 Answers 2

Reset to default
1

As per the comments from CBroe (thanks for the help) the main issues with my code were a few things.

  • No closing bracket
  • Not accessing the correct part of the JSON array
  • Not setting the element correctly

The working code looks like this:

<html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content= "width=device-width, initial-scale=1.0" /> </head> <body> <p id="temp"></p> </body> <script> const api_url = "https://wttr.in/?format=j1"; async function getWeather() { const response = await fetch(api_url); const data = await response.json(); const weather = data.current_condition[0]; let temp = weather.temp_C; document.getElementById("temp").innerHTML = "temp:" + temp; } getWeather(); </script> </html>
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

You are not parsing the json response correctly. The data does not have any results array, it is an object.

So to get current_condition you need to do something like this:

 const currentCondition = data.current_condition[0];

Also, to get temp_C this is wrong:

let { temp } = weather.temp_C; //WRONG // reason is that this statement means that `temp_C` is an object, and it contains `temp` property, which is not the case here. Because temp_C is a string.

So to get temp_C you need to simply do this:

 let temp_C = currentCondition.temp_C;

Plus, worth mentioning here that if you are using the temp_C only for displaying purposes and not intending to reassign any value to it, then its better to use const instead of let

So it would become:

 const temp_C = currentCondition.temp_C;

And if you want to use 'destructuring' you need to write it like this:

 const { temp_C } = currentCondition;

Also your function is missing the closing paranthesis }.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.