API results into a List Viewer

xuld · October 9, 2018, 9:36am

Hi All,

I have read a bunch of docs and other community articles today but I am finding a task (that I think should be simple) very frustrating! I am trying to get the results of an API into a listviewer to form a list of clickable links that will go to another page and use the relevant ID to load data from another API.

JSON response is as follows
[{“key”:“1”,“value”:“Jindabyne”},{“key”:“2”,“value”:“Cooma”},{“key”:“3”,“value”:“Berridale”},{“key”:“4”,“value”:“Bombala”},{“key”:“5”,“value”:“Adaminaby”},{“key”:“6”,“value”:“Anglers Reach”},{“key”:“7”,“value”:“Dalgety”},{“key”:“8”,“value”:“Michelago”},{“key”:“9”,“value”:“Delegate”},{“key”:“10”,“value”:“Bredbo”},{“key”:“11”,“value”:“Numeralla”},{“key”:“12”,“value”:“Nimmitabel”},{“key”:“13”,“value”:“Jerangle”},{“key”:“14”,“value”:“Craigie”},{“key”:“15”,“value”:“Charlottes Pass”},{“key”:“16”,“value”:“Thredbo”},{“key”:“17”,“value”:“Perisher”},{“key”:“18”,“value”:“Guthega”},{“key”:“19”,“value”:“Mt Selwyn”}]

This is what I have in the blocks.

So I think what is happening is:
When Screen 1 starts
Load data from the API URL
Set my variable ListContents to empty list
Then from the JSON object, insert the ‘name’ key into the list
Set the contents of the List Viewer to the variable ListContents

However all I get is a blank row in the list viewer. Where am I going wrong?

Secondly when the user clicks one of these items (once populated) how do I use the key (integer) with the button and pass it to the next screen?

Thanks!

Mark · October 11, 2018, 9:47pm

It looks like your JSON response is a representation of a list (you can tell because it starts with a ‘[’ character). Consequently, your

block is returning a list. You’ll need to iterate (i.e. loop) over that list using:

36%20PM

and then use your

20%20PM

block on each of the items in the list, which you can access by using the

block that you will be able to find in the “Variables” category of the Blocks editor.

In that loop, you’ll want to just insert the ‘value’ property of each item ‘j’ into your ‘ListContents’.

I hope this helps.

-Mark

darren · February 10, 2019, 4:34am

Hey @Mark,
I’m taking a stab at an API project using your approach above without success.

From my understanding, this is how I would loop through a list of JSON objects returned through an API, but this is not returning any results:

Is this the correct approach or am I off base?

Thanks,
Darren

Appendix 1
Here is my data:

[{
“id”: 2928,
“name”: “Abita Brewing Co”,
“brewery_type”: “regional”,
“street”: “166 Barbee Rd”,
“city”: “Covington”,
“state”: “Louisiana”,
“postal_code”: “70433-8651”,
“country”: “United States”,
“longitude”: null,
“latitude”: null,
“phone”: “9858933143”,
“website_url”: “http://www.abita.com”,
“updated_at”: “2018-08-11T21:37:28.656Z”,
“tag_list”:
}, {
“id”: 5130,
“name”: “Habitat Brewing Co”,
“brewery_type”: “micro”,
“street”: “174 Broadway St”,
“city”: “Asheville”,
“state”: “North Carolina”,
“postal_code”: “28801-2305”,
“country”: “United States”,
“longitude”: “-82.5533973”,
“latitude”: “35.5986648”,
“phone”: “7047018141”,
“website_url”: “http://www.habitatbrewing.com”,
“updated_at”: “2018-08-24T15:41:50.670Z”,
“tag_list”:
}]

Appendix 2
Through my struggles, I was able to brute force the result I was looking for:

Mark · February 10, 2019, 8:31pm

Darren,

If you look carefully at my post above, you’ll note that I am using the 'get object from JSON' block directly on the 'response' block. You need to do that because the 'response' is not itself a list. It is JSON text which represents a list. I know it’s a little confusing because in this case the 'get object from JSON' block isn’t returning an object - it’s returning a list.

Once you have the list you can iterate over it an each item j will be one of the objects that you are interested in and that you can get the name of. I.e., you will simply do a 'get property name of object j'.

Does that make sense?

-Mark

darren · February 10, 2019, 8:52pm

@Mark,

Thanks for your response. I got it working now!

The issue is the 'get object from JSON' block will not connect to the 'for each item j in list' block as depicted here:
Not%20Connecting

However if I save the 'get object from JSON - response' block in a list variable 1st, I am then able to connect the variable to the 'for each item j in list' block. Glad to have this working, and I’ve added my final solution below.

Thanks,
Darren

The following shows how to loop through a JSON List that is returned through an API response.
Multiple%20Objects%20Working

Mark · February 11, 2019, 1:39am

Darren,

I’m glad its working now! And I’ve reported the bug that you found whereby you couldn’t connect the 'get object from JSON' block to the 'for each item j in list' block.

-Mark

bobbyj12 · February 12, 2020, 10:40pm

WHere do you find the “Get” block with the “Response” in it? I only see Value and Error when I pull from the Realtime component.

Mark · February 12, 2020, 11:35pm

The 'get object from JSON' block is in the Object drawer. You would plug the Value block in to that to create an object from the JSON response.

-Mark

bobbyj12 · February 12, 2020, 11:44pm

Thanks @Mark. I was referring to the “In OpenBrewery” call block.

Mark · February 13, 2020, 6:45pm

Sorry, I meant to say that you would plug the response block (from your 'In OpenBreweryDB get' call) into the 'get object from JSON' block.

bobbyj12 · February 13, 2020, 8:42pm

Hi @Mark. I followed the blocks above but parsing the db does not seem to work. Here are my blocks for pull the data for my ToDo list. It seems to save it to the db just fine. but will not display it in the listview. Also, since the data does not seem to be writing to my variable, it gets over-written when I exist the screen (this is when the list is saved to the DB. Any suggestions would be very appreciated.

jared · February 13, 2020, 9:05pm

I have been trying this today with no luck as well.

Following

eoinparkinson · February 13, 2020, 9:13pm

Something like this? I believe the issue you are facing is something like one I had.

alexey.ben · November 30, 2020, 8:06pm

Hey , tried to do what you suggested here but with no luck unfortunately .
Here is my data (Would be very thankful for any one who can help ) :
“results”: [

    {

        "business_status": "OPERATIONAL",

        "geometry": {

            "location": {

                "lat": 32.4747588,

                "lng": 34.9713922

            },

            "viewport": {

                "northeast": {

                    "lat": 32.4760607302915,

                    "lng": 34.9726427302915

                },

                "southwest": {

                    "lat": 32.4733627697085,

                    "lng": 34.9699447697085

                }

            }

        },

        "icon": "https://maps.gstatic.com/mapfiles/place_api/icons/v1/png_71/generic_business-71.png",

        "name": "Central Veterinary pets Pardes Hanna",

        "opening_hours": {

            "open_now": false

        },

        "photos": [

            {

                "height": 4160,

                "html_attributions": [

                    "<a href=\"https://maps.google.com/maps/contrib/114373861275704723265\">יערה בקר</a>"

                ],

                "photo_reference": "ATtYBwLb1k7mSuRy6mMRGcWuDkEvxXrvDGopTHGb7gC_bQcg6bYxlElEDh3Enl3uVDAmkOGCbn_MZuaXM5SC10qSMM_pOgcbyAwyudhqs2VrmDlUS-Ux6PxhQQZsXSZ5Z-0HDeRgV0SfIrRIbDwgr1amVbiWGzSG7e0VzV9K1qiNr-6D1oK-",

                "width": 3120

            }

        ],

        "place_id": "ChIJ8eHKNNUIHRUR6Ce4t9iy8YY",

        "plus_code": {

            "compound_code": "FXFC+WH Pardes Hanna-Karkur, Israel",

            "global_code": "8G4PFXFC+WH"

        },

        "rating": 4.8,

        "reference": "ChIJ8eHKNNUIHRUR6Ce4t9iy8YY",

        "scope": "GOOGLE",

        "types": [

            "veterinary_care",

            "point_of_interest",

            "establishment"

        ],

        "user_ratings_total": 147,

        "vicinity": "HaOranim Street 18, Pardes Hanna-Karkur"

    },

    {

        "business_status": "OPERATIONAL",

        "geometry": {

            "location": {

                "lat": 32.471729,

                "lng": 34.973782

            },

            "viewport": {

                "northeast": {

                    "lat": 32.4730747802915,

                    "lng": 34.97513418029149

                },

                "southwest": {

                    "lat": 32.4703768197085,

                    "lng": 34.9724362197085

                }

            }

        },

        "icon": "https://maps.gstatic.com/mapfiles/place_api/icons/v1/png_71/generic_business-71.png",

        "name": "ד\"ר תמר וטרינרית",

        "opening_hours": {

            "open_now": true

        },

        "photos": [

            {

                "height": 2500,

                "html_attributions": [

                    "<a href=\"https://maps.google.com/maps/contrib/113764155770280100997\">ד&quot;ר תמר וטרינרית</a>"

                ],

                "photo_reference": "ATtYBwLRR-1lw5O3rpFEKRTQuDW_o8TfnM3E7I2q23BtZe5sA-MBN0YmiCYLCgRKPJEzhofawhBFCY8hunKw3kobocr0rFLZHKzwn2HVNBIq_LqyssXwX2Vih3zn8kwvZ0-5FB3lntfJlSEmfhc_TZLO4TN5bQsZ7SNFuOKfTVNP8TwViCtF",

                "width": 3750

            }

        ],

        "place_id": "ChIJucOIFTwOHRURXGwQdE1jWRU",

        "plus_code": {

            "compound_code": "FXCF+MG Pardes Hanna-Karkur, Israel",

            "global_code": "8G4PFXCF+MG"

        },

        "rating": 4.8,

        "reference": "ChIJucOIFTwOHRURXGwQdE1jWRU",

        "scope": "GOOGLE",

        "types": [

            "veterinary_care",

            "health",

            "point_of_interest",

            "establishment"

        ],

        "user_ratings_total": 16,

        "vicinity": "העצמאות 8 פרדס חנה כרכור"

    },

tatiang · November 30, 2020, 9:08pm

@alexey.ben Which data item(s) are you wanting to get from that JSON response?

alexey.ben · December 1, 2020, 6:54am

@tatiang I`m sorry , forgot to explain my self.
I actually want to get a list of “lat” property .
I know how to get a specific lat property inside the (for example #2 index) but I want it to run and get a list with “lat” propertys .

tatiang · December 1, 2020, 7:13am

I can help you create a loop to do that. What do your blocks look like that work to get a single lat property?

tatiang · December 1, 2020, 4:45pm

Based on the blocks you sent me, it looks like your JSON response is just an array/list of businesses at the top level. So you should be able to use a “for each i in list [get property ‘results’ of object [get object from JSON [app response]]]” block and replace the “1” with i. The “for each” block would go around the entire function contents except the return block. You’d need to store the value you get in a list within the loop, using the “insert in list [app listviewer data] as last […the entire set of function blocks except the return block]”. Then, use the “app listviewer” as the value for your list viewer text items.

Try that and if you need a screenshot of the blocks, I can make that for you.

alexey.ben · December 6, 2020, 5:04pm

kindly , if you can please add a screenshot with the blocks (want to be sure i did the right thing)

tatiang · December 8, 2020, 3:18am

@alexey.ben Try this:

Topic		Replies	Views
API Data in List Viewer Questions about Thunkable api , listviewer	8	1461	January 7, 2019
Do a ListView by getting data from firebase Questions about Thunkable firebase	5	577	November 4, 2019
Parsing Data From an API into a List of Unknown Size Questions about Thunkable design , beginner , help	4	476	May 29, 2023
Get requested API data into local Data Source and Data Viewer List Questions about Thunkable	9	796	July 16, 2021
List viewer empty after iterating through list of strings Questions about Thunkable listviewer	1	726	August 22, 2020

API results into a List Viewer

Related Topics