# How can to Set the Image Icon According to the City from Open Weather Map API **URL:** \ **Category:** Questions about Thunkable X\ **Tags:** beginner, webapi, weather\ **Created:** [July 19, 2021, 12:05pm UTC](https://community.thunkable.com/t/how-can-to-set-the-image-icon-according-to-the-city-from-open-weather-map-api/1403386 "2021-07-19T12:05:47Z")\ **Posts on this page:** 18\ **Page:** 1
**Author:** ![rahulg2916uwyke](https://avatars.discourse-cdn.com/v4/letter/r/3be4f8/32.png) [@rahulg2916uwyke](https://community.thunkable.com/u/rahulg2916uwyke)\ **Post date:** [July 19, 2021, 12:05pm UTC](https://community.thunkable.com/t/how-can-to-set-the-image-icon-according-to-the-city-from-open-weather-map-api/1403386/1 "2021-07-19T12:05:47Z")
Hi, Please help me with setting the icon from open weather map api. I am unable to get the code. ---
**Author:** ![codeswept](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/codeswept/32/87755_2.png) [@codeswept](https://community.thunkable.com/u/codeswept)\ **Post date:** [July 19, 2021, 12:07pm UTC](https://community.thunkable.com/t/how-can-to-set-the-image-icon-according-to-the-city-from-open-weather-map-api/1403386/2 "2021-07-19T12:07:07Z")
Please show us what you have tried so far. ---
**Author:** ![rahulg2916uwyke](https://avatars.discourse-cdn.com/v4/letter/r/3be4f8/32.png) [@rahulg2916uwyke](https://community.thunkable.com/u/rahulg2916uwyke)\ **Post date:** [July 19, 2021, 12:08pm UTC](https://community.thunkable.com/t/how-can-to-set-the-image-icon-according-to-the-city-from-open-weather-map-api/1403386/3 "2021-07-19T12:08:35Z")
This is code which I have tried till now: [Thunkable](https://x.thunkable.com/copy/998c01a4e79f7ac7849b16158ff86938) The main icon has to be set up on “detailScreen” ---
**Author:** ![codeswept](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/codeswept/32/87755_2.png) [@codeswept](https://community.thunkable.com/u/codeswept)\ **Post date:** [July 19, 2021, 12:11pm UTC](https://community.thunkable.com/t/how-can-to-set-the-image-icon-according-to-the-city-from-open-weather-map-api/1403386/4 "2021-07-19T12:11:08Z")
Firstly, you need to make a list of possible cities in the Data Viewer Grid. ---
**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\ **Post date:** [July 19, 2021, 1:08pm UTC](https://community.thunkable.com/t/how-can-to-set-the-image-icon-according-to-the-city-from-open-weather-map-api/1403386/5 "2021-07-19T13:08:08Z")
I could see a mistake in your code ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/2/b/2b1f0ac28885d7dbccb52aaf05c32164e8cb437d.png) 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. ---
**Author:** ![rahulg2916uwyke](https://avatars.discourse-cdn.com/v4/letter/r/3be4f8/32.png) [@rahulg2916uwyke](https://community.thunkable.com/u/rahulg2916uwyke)\ **Post date:** [July 19, 2021, 1:35pm UTC](https://community.thunkable.com/t/how-can-to-set-the-image-icon-according-to-the-city-from-open-weather-map-api/1403386/6 "2021-07-19T13:35:09Z")
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 ---
**Author:** ![rahulg2916uwyke](https://avatars.discourse-cdn.com/v4/letter/r/3be4f8/32.png) [@rahulg2916uwyke](https://community.thunkable.com/u/rahulg2916uwyke)\ **Post date:** [July 19, 2021, 1:36pm UTC](https://community.thunkable.com/t/how-can-to-set-the-image-icon-according-to-the-city-from-open-weather-map-api/1403386/7 "2021-07-19T13:36:55Z")
@codeswept This is is the link to the database > **[Grid view - Airtable](https://airtable.com/shrb9YZ0Z907IFlSP)** > > Explore the "Grid" view on Airtable. ---
**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\ **Post date:** [July 19, 2021, 1:38pm UTC](https://community.thunkable.com/t/how-can-to-set-the-image-icon-according-to-the-city-from-open-weather-map-api/1403386/8 "2021-07-19T13:38:37Z")
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. ---
**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\ **Post date:** [July 19, 2021, 1:58pm UTC](https://community.thunkable.com/t/how-can-to-set-the-image-icon-according-to-the-city-from-open-weather-map-api/1403386/9 "2021-07-19T13:58:26Z")
I changed your code this way and I can display the image ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/9/0/909b45cb7e526be0cb0e8243a4bf6e64895190c0.png) You can see the Thunkable Beaver because I do not have access to your Airtable data. ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/5/d/5db31f117832173d431cddcc3c941843d5331ae9.png) ---
**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\ **Post date:** [July 19, 2021, 6:08pm UTC](https://community.thunkable.com/t/how-can-to-set-the-image-icon-according-to-the-city-from-open-weather-map-api/1403386/10 "2021-07-19T18:08:50Z")
When you get the “icon” property value, you have to join it with “.png” [https://openweathermap.org/weather-conditions](https://openweathermap.org/weather-conditions) ---
**Author:** ![rahulg2916uwyke](https://avatars.discourse-cdn.com/v4/letter/r/3be4f8/32.png) [@rahulg2916uwyke](https://community.thunkable.com/u/rahulg2916uwyke)\ **Post date:** [July 20, 2021, 3:54am UTC](https://community.thunkable.com/t/how-can-to-set-the-image-icon-according-to-the-city-from-open-weather-map-api/1403386/11 "2021-07-20T03:54:51Z")
Here is the link to the Airtable data > **[Airtable | Everyone's app platform](https://airtable.com/invite/l?inviteId=invbWYykQeoSFr3Nv&inviteToken=91265a744433d8dff9d9b6f743e746e2d05a5520a1bb5d08674b3bd6f4e51316&utm_source=email)** > > Airtable is a low-code platform for building collaborative apps. Customize your workflow, collaborate, and achieve ambitious outcomes. Get started for free. ---
**Author:** ![rahulg2916uwyke](https://avatars.discourse-cdn.com/v4/letter/r/3be4f8/32.png) [@rahulg2916uwyke](https://community.thunkable.com/u/rahulg2916uwyke)\ **Post date:** [July 20, 2021, 4:03am UTC](https://community.thunkable.com/t/how-can-to-set-the-image-icon-according-to-the-city-from-open-weather-map-api/1403386/12 "2021-07-20T04:03:17Z")
@tatiang I tried the way you were telling [https://x.thunkable.com/copy/998c01a4e79f7ac7849b16158ff86938](https://x.thunkable.com/copy/998c01a4e79f7ac7849b16158ff86938) But still the neither the picture is displaying nor the “Main Weather” Please help me ---
**Author:** ![rahulg2916uwyke](https://avatars.discourse-cdn.com/v4/letter/r/3be4f8/32.png) [@rahulg2916uwyke](https://community.thunkable.com/u/rahulg2916uwyke)\ **Post date:** [July 20, 2021, 9:52am UTC](https://community.thunkable.com/t/how-can-to-set-the-image-icon-according-to-the-city-from-open-weather-map-api/1403386/13 "2021-07-20T09:52:48Z")
@codeswept @muneer and @tatiang I am not getting the output. Pls help me ---
**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\ **Post date:** [July 20, 2021, 10:09am UTC](https://community.thunkable.com/t/how-can-to-set-the-image-icon-according-to-the-city-from-open-weather-map-api/1403386/14 "2021-07-20T10:09:49Z")
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. ---
**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\ **Post date:** [July 20, 2021, 10:54am UTC](https://community.thunkable.com/t/how-can-to-set-the-image-icon-according-to-the-city-from-open-weather-map-api/1403386/15 "2021-07-20T10:54:57Z")
In the `cityGrid` screen I made these changes ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/e/f/efd5f589792cad29ff85ae5f99fdf68ba1c41f72.png) The `detailsScreen` in now this way ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/2/e/2ec9dcb9aa36dad024075671b9cd0738832cb171.png) 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. ---
**Author:** ![rahulg2916uwyke](https://avatars.discourse-cdn.com/v4/letter/r/3be4f8/32.png) [@rahulg2916uwyke](https://community.thunkable.com/u/rahulg2916uwyke)\ **Post date:** [July 22, 2021, 4:18pm UTC](https://community.thunkable.com/t/how-can-to-set-the-image-icon-according-to-the-city-from-open-weather-map-api/1403386/16 "2021-07-22T16:18:04Z")
@muneer What `error` should the API give? ---
**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\ **Post date:** [July 22, 2021, 6:16pm UTC](https://community.thunkable.com/t/how-can-to-set-the-image-icon-according-to-the-city-from-open-weather-map-api/1403386/17 "2021-07-22T18:16:05Z")
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. ---
**Author:** ![ioannis](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ioannis/32/146956_2.png) [@ioannis](https://community.thunkable.com/u/ioannis)\ **Post date:** [November 8, 2024, 1:19pm UTC](https://community.thunkable.com/t/how-can-to-set-the-image-icon-according-to-the-city-from-open-weather-map-api/1403386/18 "2024-11-08T13:19:41Z")