API - not able to retrieve and use the values from JSON

Discuss
,
#1

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:
image

Any help or guidance is much appreciated.

Thank you.

1 Like
#2

Is that the complete JSON? I am trying to view it in a structured format and I am getting an error.

Can you attach the entire response please.

1 Like
#3

Hello @cian,

I pasted the full API response in JSON format here: Kodular - API response - JSON issue - Pastebin.com

Thank you for your time and effort :slight_smile:

#4

i checked your json data and it looks like you have missing brackets

add this - ] } at the end of the json text and try again…

#5

Hi @techcvr,

There is the } ] almost at the end of the response:
150.jpg"}],"total":791011}
It’s at the end of the response, just before the last tag total.

It’s vice-versa than the combination ] } as you described. But, looking at the start of the JSON response:
{"totalHits":500,"hits":[{"largeImageURL - Why should there be] } (which is vice-versa than } ]) at the end if it actually starts with { [?

Thank you.

#6

You should go through the JSON and make a list of the value using the get list pairs, and then you will have a local list of each of the images.

You also create a list of your 20 image components, and then run a loop to set the image to the component. 20 large image components and large images on your device all loaded at once will probably crash it.

#7

@cian thank you!

By this:

You should go through the JSON and make a list of the value using the get list pairs, and then you will have a local list of each of the images.

Do you mean that I shall use this block?:
image

You also create a list of your 20 image components, and then run a loop to set the image to the component. 20 large image components and large images on your device all loaded at once will probably crash it.

Thank you, I will then try to load those 20 images perhaps by using maybe a Dynamic Image or something.

#8

Yes.

Make sure you read these:

And:

thunkableblocks.blogspot.com

#9