Dear fellow Kodulars,
I have been trying to use the API for displaying images in my app.
When I create a call from Web component to get the result in JSON, it gets the response, but then I want to set the Image components to display the images based on the values in JSON under largeImageUrl
attribute/tag.
Example of the JSON response that I get from API:
{"totalHits":500,"hits":[{"largeImageURL":"https://pixabay.com/get/ea37b50e2ff11c22d2524518b7454196e571e7d104b0144493f6c17fa0eeb1_1280.jpg","webformatHeight":426,"webformatWidth":640,"likes":1506,"imageWidth":6000,"id":324175,"user_id":2,"views":475776,"comments":233,"pageURL":"https://pixabay.com/photos/japanese-cherry-trees-flowers-spring-324175/","imageHeight":4000,"webformatURL":"https://pixabay.com/get/ea37b50e2ff11c22d2524518b7454196e571e7d104b0144493f6c17fa0eeb1_640.jpg","type":"photo","previewHeight":99,"tags":"japanese cherry trees, flowers, spring","downloads":207033,"user":"Hans","favorites":1318,"imageSize":2613829,"previewWidth":150,"userImageURL":"https://cdn.pixabay.com/user/2019/01/29/15-01-52-802_250x250.jpg","previewURL":"https://cdn.pixabay.com/photo/2014/04/14/20/11/japanese-cherry-trees-324175_150.jpg"},{"largeImageURL":"https://pixabay.com/get/ed34b4062ef3003ed1584d05fb1d4f91e371e4d01dac104490f6c779a1eab6bc_1280.jpg","webformatHeight":426,"webformatWidth":640,"likes":59,"imageWidth":7087,"id":4159671,"user_id":3764790,"views":4046,"comments":46,"pageURL":"https://pixabay.com/photos/landscape-vias-railway-clouds-4159671/","imageHeight":4724,"webformatURL":"https://pixabay.com/get/ed34b4062ef3003ed1584d05fb1d4f91e371e4d01dac104490f6c779a1eab6bc_640.jpg","type":"photo","previewHeight":99,"tags":"landscape, vias, railway","downloads":3326,"user":"enriquelopezgarre","favorites":22,"imageSize":7901849,"previewWidth":150,"userImageURL":"https://cdn.pixabay.com/user/2019/04/15/15-57-03-90_250x250.jpg","previewURL":"https://cdn.pixabay.com/photo/2019/04/27/10/06/landscape-4159671_150.jpg"}
I have been trying to use the JSON Tools extension to parse and load values from the API response (JSONTools Extension)
The problems:
1.) The Web components gets the response, but the JSON Tools is not able to find largeImageURL
tag and provide the value of it (which should be the direct link of an image).
2.) I am not able to dynamically assign the values to each Image component. Basically, I want 20 Image components to show the images under the largeImageURL
tag, one by one.
Example: First Image = First largeImageURL; Second Image = Second largeImageUrl, and so on…
Here are the blocks that I’m trying to use:
Any help or guidance is much appreciated.
Thank you.