How can to Set the Image Icon According to the City from Open Weather Map API

Questions about Thunkable
, ,
1

Hi,
Please help me with setting the icon from open weather map api. I am unable to get the code.

1 Like
2

Please show us what you have tried so far.

1 Like
3

This is code which I have tried till now: Thunkable
The main icon has to be set up on “detailScreen”

1 Like
4

Firstly, you need to make a list of possible cities in the Data Viewer Grid.

5

I could see a mistake in your code
image

Put I cannot be sure if this is the issue.

Please paste the response from the API to see if an image URL exists and where in the JSON text.

1 Like
6

Thanks
I did that change but still there is some error in the code
I can’t set the value of the main weather since it is in “main” array

1 Like
7

@codeswept
This is is the link to the database

8

Please supply a copy of the text in the response block. You are trying to retrieve icon from the response but it might not be in the location you are trying to get it from.

9

I changed your code this way and I can display the image
image

You can see the Thunkable Beaver because I do not have access to your Airtable data.
image

1 Like
10

When you get the “icon” property value, you have to join it with “.png”

https://openweathermap.org/weather-conditions

2 Likes
11

Here is the link to the Airtable data

12

@tatiang I tried the way you were telling
https://x.thunkable.com/copy/998c01a4e79f7ac7849b16158ff86938
But still the neither the picture is displaying nor the “Main Weather”
Please help me

13

@codeswept @muneer and @tatiang
I am not getting the output. Pls help me

1 Like
14

Please share you Airtable base not the table. Thunkable cannot connect to individual tables in foreign base. I cannot help you if you do not share your code and components.

1 Like
15

In the cityGrid screen I made these changes
image

The detailsScreen in now this way

image
image621Ă—516 34.6 KB

Check it and see

[Edit]
Add a label to the detailsScreen screen and place it anywhere you see it appreciate. It will be in place of label6 in the code to show Error or Status messages received from the API.

1 Like
16

@muneer What error should the API give?

1 Like
17

The API is a service in a remote server (computer) and could, at any time, stop responding and a good developer will always want to trap this case and deal with it, better than letting the app crash.

This is not only limited to the error but this is also true to the status. If you check your data, you’ll find that using “Bangaluru” as the city to check then you’ll find it will give an “error” in the “status” block to say city not found.

If you apply the blocks I shared as image then you should trap such condition and in the end your app will look more professional.

1 Like