Trying to extract a nested list from a Web API

I am new to Thunkable and trying to correctly extract data from a Web API from AWS. I have scowered the forum but haven’t found much that was able to help me unfortunately. I’m not sure if I am just still a beginner or I am missing something small.

Basically I can correctly get the entire response and output that, but when I am trying to break apart the response into different categories so I can put it into a list viewer, I keep getting weird responses.

This image is what the JSON looks like that is being sent across.
thunk1

This image is what my Thunkable blocks look like. Currenty I am outputting the complete response string straight to an alert and trying to extract the “locations” information into text. But I have tried a few different variations of the objects blocks and haven’t been able to successfully get anything. Majority of the time I keep getting null and I have no idea why.

Here is my curent block setup.

Any help would be greatly appreciated, thanks!

The “locations” property is returning a list of objects (key:value pairs such as “name”: “string”). The List Viewer component in Thunkable requires a list of text strings.

You definitely need to [get object from JSON] from [response] and then from that, [get property “locations” of object]. You’ve done that for Alert1’s Title in the screenshot above so that should work to return that list of objects.

How are you wanting to parse the information below into a List Viewer? That is, what would the List Viewer look like if it did work?

thunk1

Can you post the full JSON response you’re getting as text?

1 Like

EDIT 1: Just reread your message and when I output this “You definitely need to [get object from JSON] from [response] and then from that, [get property “locations” of object]. You’ve done that for Alert1’s Title in the screenshot above so that should work to return that list of objects.” - I get [object Object]

Hey, thanks for replying. I am hoping to extract the name from each value in the locations array. But I am just currently working on outputting just the array from the locations. When I am trying to extract the JSON response as a text it comes out as:

I have tried also swapping the object blocks around as shown below and am also getting a null value from that. I am unsure of the right combination of blocks to extract things. I know I will need a list to output the locaitons array (although only a single value in there currently) as well.

thunk4

I also thought that since the locations bit of the JSON string had the square brackets that meant it was returning an array of objects.

Hello, can you try something like this?

2 Likes

you used a different list name in your get-first-from-list block. that probably will not work.

What I meant was that you should set a Text Input’s text to the green [response] block and then copy the text it generates and paste it here. With a screenshot, I’d have to type in all of that JSON just to play around with it.

It’s also really helpful if you format it using the Preformatted text button in the forums toolbar. That way, smart quotes don’t invalidate the JSON.

image

You’re correct about JSON brackets [ ] signifying an array/list. By the way, I have a JSON parsing tutorial here: API JSON Tutorial (Video)

I’m not sure using an Alert’s title is the best idea for debugging. I believe it has a pretty limited string length. Labels (or Text Inputs if you need to copy & paste) are generally better.

1 Like

Hey everyone, this was the solution that worked for my specific use case. Thanks so much @wei ! I am currently implementing the next steps to get the rest of teh location data and put them into a list viewer.

1 Like

To clarify, with this solution does that mean that every location item in the JSON array will now be in the location list we initialised? I’m trying to extract the data from each item in the list into the list viewer and I keep crashing the app. I’ve tried the following two methods and neither seem to work.

The first method crashes the app and restarts it, the second presents null when calling within the for loop. Is there a standard protocol for extracting the data correctly into a list viewer from a list?

It’s really hard to know how to answer that because you haven’t posted the full JSON response as text. In your screenshot, you’re showing a “locations” property with only one array/list item but then in your blocks, you’re trying to access list item #2 from “locations.” That would crash the app if the list is only 1 item long.

You’re also still trying to assign a list of objects (app variable locations) to a list viewer. That won’t work.

i learned something new today:
apparently those 2 variables are one and the same - i’ve always thought them as different. (the below prints true)

1 Like

Yes, they are the same. The [app variable “ “] block allows you to dynamically access variables by name.

1 Like

Here’s how you can extract the “locations” information in Thunkable with the use of a b2b API meaning:

  1. Parse the JSON Response:

    First, you need to parse the JSON response using the “JSON Text Decode” block. You can do this as follows:

Set parsedResponse to JSON Text Decode YourAPIResponse

  • Replace YourAPIResponse with the variable that holds the JSON response.
    • Access the “locations” Array:
      Now, you can access the “locations” array from the parsed response. Assuming you want to display the “locationName” values in a list viewer, you can loop through the array as follows:
      Repeat (count of list parsedResponse.locations) times
      Set locationObject to get # loop index of parsedResponse.locations
      Add item (get property locationObject.locationName) to ListViewer
  1. This code will loop through each element in the “locations” array and add the “locationName” to a list viewer.

Make sure to replace parsedResponse.locations, locationObject.locationName, and ListViewer with the appropriate variable names and component names you have in your Thunkable project.

By following these steps, you should be able to extract the “locations” information from your JSON response and display it in a list viewer or perform other operations as needed.