JSON Bound Data List Viewer - No More Cloning!

If you have been thunking for a while, you may have learned a few things:

  1. Data List Viewers and Data Grid Viewers are easy to design and execute quickly on devices
  2. Data List Viewer and Data Grid Viewer components cannot be bound to JSON
  3. All sorts of Web APIs and Firebase RealtimeDB (aka cloud variables) use JSON
  4. Airtable and Google Sheet data sources are generally slower and less reliable than Firebase/Cloud Variables
  5. Creating or cloning components for JSON lists are progressively slower and are largely unuseable after 20-40 components

I wanted the best of both worlds:

  1. Speed and reliability of JSON
  2. Speed and reliability of Data List Viewers

And behold, a Christmas miracle: the JSON Bound Data List Viewer! :partying_face:

The Blocks

The Discussion
When creating the Data List Viewer (or Grid) click the Add button and scroll past the existing data sources a click the Add New button. From the available options, select “Create Your Own Table.” This will create a local DB that is not connected to anything external source (Airtable or Google Sheets).

The magic happens in the fill button. I set the APP variable LocalJSONHolder to a JSON list. Then for each object in the list, create a new row in the data list viewer local data source (JSONConverter). Adding the waiting blocks is critical, otherwise you can get unpredicable results. That’s it!

In this demonstration, I created a simple JSON object list. This could be substituted for any RealtimeDB, cloud variable, or JSON WebAPI response.

The Display
You can use the same technique for both the data list and data grid viewers (list on left, grid on right)

The Project
https://x.thunkable.com/copy/8be008e87a0e0ed5984b9d1e417b4200

5 Likes

O
M
G
!!!
This is what I need!! Finally! It’s really a miracle! I’ll definitely try it in my project because I use API and firebase db and apply the cloning method to create lists and I think it works slow and unusable. Thank you, Santa!!

I just want to thank you for sharing this approach. I just updated my DeluxeTube player tech-demo by replacing the legacy list with data list viewers and it already looks so much better! Check it out here: http://community.thunkable.com/t/deluxetube-a-youtube-video-player-tech-demo/

1 Like

Glad to hear it!

First: Thank your very much! This is really helpful. I already gave up on using the new data view components as iam using external json.

I got it to work with a webApi and on desktop it looks good. On my android device in preview it does produce some problems. As iam trying to solve them, could you please elaborate on the “Waiting” block? I could not figure out what kind of variable or component it is. It used an app variable for it, but maybe thats wrong.

Thanks alot!

@ tmurachpx,
The waiting block was created by defining a loop and renaming the variable. It effectively creates a “SCREEN” level variable.

Thanks for the quick answer. Iam sorry, Iam new to thunkable. Which component creates a loop? I can’t find it

I create the Waiting variable with the COUNT WITH block. After creating the variable, you can delete the COUNT WITH block.
image

Hi, @drted! Thank you for referring your post to my question

I would like to know how would I incorporate a search option with this idea - can you shine some light? I am a bit confused…

Thanks!