# How can we change image according to weather API array **URL:** \ **Category:** Questions about Thunkable X\ **Tags:** design, beginner\ **Created:** [May 30, 2021, 6:43pm UTC](https://community.thunkable.com/t/how-can-we-change-image-according-to-weather-api-array/1317229 "2021-05-30T18:43:07Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![priyanka19941n](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/priyanka19941n/32/77838_2.png) [@priyanka19941n](https://community.thunkable.com/u/priyanka19941n)\ **Post date:** [May 30, 2021, 6:43pm UTC](https://community.thunkable.com/t/how-can-we-change-image-according-to-weather-api-array/1317229/1 "2021-05-30T18:43:07Z")
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](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/3/4/34460d46f85a244bb692a69f3602778a550f0146.png) ![Code](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/d/a/da2d4c12f629c29ae226956e38941f44e971a37a.png) ---
**Author:** ![catsarisky](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/catsarisky/32/100661_2.png) [@catsarisky](https://community.thunkable.com/u/catsarisky)\ **Post date:** [May 30, 2021, 7:50pm UTC](https://community.thunkable.com/t/how-can-we-change-image-according-to-weather-api-array/1317229/2 "2021-05-30T19:50:11Z")
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. ---
**Author:** ![priyanka19941n](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/priyanka19941n/32/77838_2.png) [@priyanka19941n](https://community.thunkable.com/u/priyanka19941n)\ **Post date:** [May 31, 2021, 2:10am UTC](https://community.thunkable.com/t/how-can-we-change-image-according-to-weather-api-array/1317229/3 "2021-05-31T02:10:22Z")
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. ![app](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/5/3/538599e77fde2e77408f84509c9721e850ead2b3.png) ![Code](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/e/9/e94826323f47257bdbabaf2576191c7c5a4e29ae.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:** [May 31, 2021, 2:25am UTC](https://community.thunkable.com/t/how-can-we-change-image-according-to-weather-api-array/1317229/4 "2021-05-31T02:25:54Z")
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? ---
**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:** [May 31, 2021, 2:52am UTC](https://community.thunkable.com/t/how-can-we-change-image-according-to-weather-api-array/1317229/5 "2021-05-31T02:52:20Z")
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](https://openweathermap.org/weather-conditions)) but you can certainly use your own. ---
**Author:** ![priyanka19941n](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/priyanka19941n/32/77838_2.png) [@priyanka19941n](https://community.thunkable.com/u/priyanka19941n)\ **Post date:** [May 31, 2021, 4:24am UTC](https://community.thunkable.com/t/how-can-we-change-image-according-to-weather-api-array/1317229/6 "2021-05-31T04:24:20Z")
Its not working …Tried both method using icon directly and also with images ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/0/4/04857bef76beb7f7d64fb7a251f15f84a1791293.png) ---
**Author:** ![priyanka19941n](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/priyanka19941n/32/77838_2.png) [@priyanka19941n](https://community.thunkable.com/u/priyanka19941n)\ **Post date:** [May 31, 2021, 4:25am UTC](https://community.thunkable.com/t/how-can-we-change-image-according-to-weather-api-array/1317229/7 "2021-05-31T04:25:07Z")
Can you send me a sample how can i connect icons weather array with image please? ---
**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:** [May 31, 2021, 4:30am UTC](https://community.thunkable.com/t/how-can-we-change-image-according-to-weather-api-array/1317229/8 "2021-05-31T04:30:12Z")
> [@tatiang](#): > > 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? 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. > [@API JSON Tutorial (Video)](https://community.thunkable.com/t/api-json-tutorial-video/1140575): > > Using APIs in Thunkable and understanding how to parse JSON to get certain data from the API response is both a popular and a difficult aspect of using Thunkable. It’s not so much difficult because of Thunkable but because every API url format is different, every API documentation is different, every JSON response is different, etc. In this video, I spend a lot of time talking you through some best practices. It’s not a quick tutorial because if you rush through setting up an API in Thunkable, … ---
**Author:** ![priyanka19941n](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/priyanka19941n/32/77838_2.png) [@priyanka19941n](https://community.thunkable.com/u/priyanka19941n)\ **Post date:** [May 31, 2021, 5:38am UTC](https://community.thunkable.com/t/how-can-we-change-image-according-to-weather-api-array/1317229/9 "2021-05-31T05:38:58Z")
on mobile screen it is should the weather correctly but i m not able to connect the icons. Output shown on my mobile phone ![Screenshot_20210531-110658](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/6/0/60864aab901e455f7f5ee28c573e106a8d22c983.jpeg) ---
**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:** [May 31, 2021, 6:12am UTC](https://community.thunkable.com/t/how-can-we-change-image-according-to-weather-api-array/1317229/10 "2021-05-31T06:12:14Z")
Okay well, good luck. I’m sorry I can’t help you more but you’re not providing enough information. ---
**Author:** ![priyanka19941n](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/priyanka19941n/32/77838_2.png) [@priyanka19941n](https://community.thunkable.com/u/priyanka19941n)\ **Post date:** [May 31, 2021, 8:20am UTC](https://community.thunkable.com/t/how-can-we-change-image-according-to-weather-api-array/1317229/11 "2021-05-31T08:20:11Z")
I used API url [http://api.openweathermap.org/data/2.5/weather?q=delhi&units=imperial&APPID=](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. ![Code](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/a/8/a873120c44edac4da84904dd8e9a6e296461d65c.png) ![Screenshot_20210531-110658](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/6/0/60864aab901e455f7f5ee28c573e106a8d22c983.jpeg) ![app](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/5/3/538599e77fde2e77408f84509c9721e850ead2b3.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:** [May 31, 2021, 8:28am UTC](https://community.thunkable.com/t/how-can-we-change-image-according-to-weather-api-array/1317229/12 "2021-05-31T08:28:55Z")
You have to join the weather icon with a url path, according to the API [documentation](https://openweathermap.org/weather-conditions). Here’s how I did it: ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/b/8/b87e3e84c582315c3e9cdc69eb7fae9a86323c6f.png) This is what the icon looks like in my app: ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/1/b/1b1270359a48ca2292f50e7cdbc814ca2c46ff6a.png) ---
**Author:** ![priyanka19941n](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/priyanka19941n/32/77838_2.png) [@priyanka19941n](https://community.thunkable.com/u/priyanka19941n)\ **Post date:** [May 31, 2021, 8:47am UTC](https://community.thunkable.com/t/how-can-we-change-image-according-to-weather-api-array/1317229/13 "2021-05-31T08:47:49Z")
Its showing blank. before ![Screenshot_20210531-141450](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/8/8/88b395769ff7b6fd3264a0e495f61d2a9fc2cc92.jpeg) after clicking get F ![Screenshot_20210531-141332](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/1/7/17cb0846bdd492878d2551e6f0057c09dce6b785.jpeg) ---
**Author:** ![priyanka19941n](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/priyanka19941n/32/77838_2.png) [@priyanka19941n](https://community.thunkable.com/u/priyanka19941n)\ **Post date:** [May 31, 2021, 8:49am UTC](https://community.thunkable.com/t/how-can-we-change-image-according-to-weather-api-array/1317229/14 "2021-05-31T08:49:40Z")
Used this Code which you said to do ![Code](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/7/1/71c1f78a4368eb65859f531a4abe48e84e4645fb.png) ---
**Author:** ![priyanka19941n](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/priyanka19941n/32/77838_2.png) [@priyanka19941n](https://community.thunkable.com/u/priyanka19941n)\ **Post date:** [May 31, 2021, 9:02am UTC](https://community.thunkable.com/t/how-can-we-change-image-according-to-weather-api-array/1317229/16 "2021-05-31T09:02:06Z")
[https://x.thunkable.com/projects/60b4a3437889be001191d9e0/9f4ecbd5-fbfe-4932-8fe9-a04c82e4e851/blocks](https://x.thunkable.com/projects/60b4a3437889be001191d9e0/9f4ecbd5-fbfe-4932-8fe9-a04c82e4e851/blocks) Can you check this one and say where the error can go ---
**Author:** ![priyanka19941n](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/priyanka19941n/32/77838_2.png) [@priyanka19941n](https://community.thunkable.com/u/priyanka19941n)\ **Post date:** [May 31, 2021, 5:22pm UTC](https://community.thunkable.com/t/how-can-we-change-image-according-to-weather-api-array/1317229/17 "2021-05-31T17:22:54Z")
what did you use to show image. I tried in all the method still it is not showing ---
**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:** [May 31, 2021, 6:06pm UTC](https://community.thunkable.com/t/how-can-we-change-image-according-to-weather-api-array/1317229/18 "2021-05-31T18:06:30Z")
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? ---
**Author:** ![priyanka19941n](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/priyanka19941n/32/77838_2.png) [@priyanka19941n](https://community.thunkable.com/u/priyanka19941n)\ **Post date:** [June 1, 2021, 3:14am UTC](https://community.thunkable.com/t/how-can-we-change-image-according-to-weather-api-array/1317229/19 "2021-06-01T03:14:49Z")
When i’m clicking live test and write the place name screen shows blank ---
**Author:** ![priyanka19941n](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/priyanka19941n/32/77838_2.png) [@priyanka19941n](https://community.thunkable.com/u/priyanka19941n)\ **Post date:** [June 1, 2021, 3:34am UTC](https://community.thunkable.com/t/how-can-we-change-image-according-to-weather-api-array/1317229/22 "2021-06-01T03:34:40Z")
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. ![1](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/e/e/ee5e80fd1323263f61ad931fcbe6b6dc79a826f7.png) ![app](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/4/5/45bd6649854ca28cc5cc92dc44648e8b009cfa57.png) ---
**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:22pm UTC](https://community.thunkable.com/t/how-can-we-change-image-according-to-weather-api-array/1317229/23 "2024-11-08T13:22:09Z")