How can we change image according to weather API array

hi,
@Darren Can you help me with this. I’m trying to create weather app where when we write the city name its shows what type of weather it is using JSON api.openweathermap . Let say weather is Rain i want it should show rain image which i have uploaded but still it is not sowing can anyone help me.
app

Your image is nearly illegible, but I don’t see where you’re setting the ‘weather’ variable, which is why the if statements aren’t giving the expected result.

2 Likes

Attaching other clear picture of my doubt. So my doubt is if I have connected weather text input box with JSON box to show the api of weather once that is done it should show the image according to that image on the app is it possible.


The next step is to post the full JSON response that you’re getting when using your API url in a browser.

Because we need to make sure that the first list item of the “weather” property of the JSON object has a “main” property with something like “Rain” or “Partly Cloud” (I doubt that’s spelled correctly) as a value.

Also, when you preview your blocks on a mobile device, what is the value of “weather’s Text” that you’re seeing?

Lastly, what is the value of the green Error block if you set a label to it?

By the way, I know this is all possible because I did this in my Air Quality app I built last year. I used the API’s graphics (Weather Conditions - OpenWeatherMap) but you can certainly use your own.

Its not working …Tried both method using icon directly and also with images

Can you send me a sample how can i connect icons weather array with image please?

You didn’t answer my questions so it’s really hard to help you.

You need to type out the entire API url and paste it into a web browser. If you can, share that URL with me. You can blank out the API key if you like so no one else can use it. I have my own. After you visit that url in a web browser, copy the full results you see and paste it here.

I can’t help you without the JSON response. But if you’d rather not post more details, you can watch my tutorial video where I explain how to do all of this – not how to get weather icons, but it should help you figure out how to use an API correctly.

1 Like

on mobile screen it is should the weather correctly but i m not able to connect the icons. Output shown on my mobile phone

Okay well, good luck. I’m sorry I can’t help you more but you’re not providing enough information.

1 Like

I used API url http://api.openweathermap.org/data/2.5/weather?q=delhi&units=imperial&APPID= {API_KEY} and its not showing error when i kept the green error in if statement. i think icons cant be shown using weather API when i click on button image is getting disappeared.


You have to join the weather icon with a url path, according to the API documentation. Here’s how I did it:

This is what the icon looks like in my app:

2 Likes

Its showing blank.
before

after clicking get F

Used this Code which you said to do

https://x.thunkable.com/projects/60b4a3437889be001191d9e0/9f4ecbd5-fbfe-4932-8fe9-a04c82e4e851/blocks
Can you check this one and say where the error can go

what did you use to show image. I tried in all the method still it is not showing

You’re setting Image’s picture to the value for the icon. To debug this, set a label’s value to that same value that you’re generating.

What is that label’s value when you preview?

1 Like

When i’m clicking live test and write the place name screen shows blank

Did a silly mistake inside the list instead of writing get #1 i was writing get #3.
Thank you so much for your help i really appreciate all the help you gave. replying to all my queries and help me in all.


2 Likes