Get related web api data by ID property

Hi there,

After playing around quite successfully with Thunkable I do have a question.

I am fiddling around with the JSON Placeholder API. I managed to generate a list view of Users displaying the name of each user. This using API object property ‘name’. So far so good.

When I click on a user it navigates to the next screen in which I want to show the todo’s of each user.

This is where I get stuck. In order to get the todo’s of a specific user I need to filter the Todo API call using the user ID (API property ‘id’) but this property is not part of the listviewer component. It only has the name.

So how can I ‘store/save’ the id property of the user alongside the name property in the list view, but only show the name of the user in the listviewer.

Thanks for the help.

1 Like

this is not difficult you just have to use a little of imagination ! If you show me an example with blocks to see how are you coding I’ll help you

1 Like

Hi @Daniel_Coglitore,

Thanks for your reply. See below the details. If you need more info, please let me know.

Variables:
image

API Call:


API Endpoint:
https://jsonplaceholder.typicode.com/users

Navigate to user details with overview of todo’s (screen still empty):
image

1 Like

Hi there,

It seems like the ‘id’ of the first item in this result is 1, for the second item it’s 2, etc.
So the lazy answer is that the ‘index’ of the item you click will be the id :grin:

If the id was, say, a random string of letters, you could still use the index block to say “get property ID of (in list [user response] get #index)”

Or, in your loop where you add the ‘name’ properties to a list, you can also add the ‘id’ properties to another list. This can just be stored as a variable, it doesn’t need to be displayed in a List Viewer. (It can also be saved in a Local DB, if you feel like it!)

Then when a name is selected from the List Viewer, the corresponding ID is #index of the id list.

Does that help?

Hi @jane,

Thanks for reply and clear examples. Id is just a number, but because I do sorting on nae it is not always the case that index equals Id. Also when the data source changes and records are deleted this option will not be a usable workaround unfortunately.

I will try to also set a variable (list) with the id’s using the same sorting to synchronize the indexes of both the list viewer and the list variable. When clicking on a listviewer item I will set a selected_id variable to use in the next screen. Just like you show in your example.

But I am wondering if this approach does not have a negative effect on performance, using multiple list (variables) especially when the data set becomes larger?

I will post my findings here.

1 Like

If the names are not in the same order as the results, you can use the latter two methods using the ‘in list [list] find first occurrence of [item]’ block. This number will be used instead of the index block.

image

If you don’t want to save an extra list of data in your app, you can also get the position of the result you’re looking at using another loop. Find the position of the item in the result where ‘name’ = [name user selected], return the property ‘id’.

idfromname

1 Like

Hi all,

I think I did it. I will explain what I did to come up with my solution and I would like to hear your opinon of it.

First Implementation: Local DB
To be able to get both ID and Name of the user I stored the API response in a local DB, with the columns id and name. From the Local DB I fill the List Viewer Component Alphabetically

To get the ID on click I did the following:
I search for the first occurence of the column (name) that equals the selected item in the list viewer.


Although I don’t understand why it works, it does give me the correct ID in the a_show_id label. What I don’t understand is that while I select column “name” an “Id” value is shown. When I change column to “id” it won’t work. Maybe someone can explain this?

This gave me another idea based on something mentioned in another topic.

Implementation 2: Search object in JSON response and get id property

Here I generate the list viewer the same as before:

Then on button click I loop through the items in the API response and when I find an object of which the name equals my selected item in the listviewer, I set the the variable b_selected_id to the value of the id property of the selected object.

This works like a charm, but I do wonder:

  1. Which of the both approaches is best to use?
  2. Is there another more efficient way to do this?

Thanks again.

1 Like

https://x.thunkable.com/projects/5d61a77f0b06820763d6dc42/04c4e0e4-b86e-413d-9d69-65b3c6e8e521/blocks

Let me know if this is what you wanted try it

1 Like

Wow! was the same I did but you did it first :laughing:

1 Like

Thanks @Daniel_Coglitore,

In your example I do see more options to process JSON so I will look into it in more detail. I also like the fact that you create a object variable for the selected users so that you directly have all the details. I will update my implementation.

2 Likes

Navigation works perfectly. I retrieve the whole object on item click and save this as app variable object: selected_user_obj. I use this object again in my second screen.

One question. I do notice that when I go back from the second screen to the users overview, each user gets added again. This is obvious because I don’t check on existing items.

I believe I have to solve this with a condition, like: if user name item does not exists in results list add user name to result list. But I don’t n ow exactly how to set this up. Is there a basic example someone can provide?