JSON Bound Data List Viewer - No More Cloning!

[drted]

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!

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

[flashag]

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!!

[Deluxe]

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/

[drted]

Glad to hear it!

[tmurachpx]

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!

[drted]

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

[tmurachpx]

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

[drted]

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

[kartik14]

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!

[bon.sosnowiczaninfi4]

Hi!

I try your idea with firebase, but I’m missing something.
App crashes at this point.

[muneer]

This is not an object this is why it fails

[bon.sosnowiczaninfi4]

I changed all pink to text 1234 and still not working.

[bon.sosnowiczaninfi4]

another version, same db structure.

‘no data’.

[mimostel]

Why do you use that “cloud variable” ?
Try “set stored variable MO_dawne to value” directly… whats the point of that cloud ?

[bon.sosnowiczaninfi4]

right. I returned to cloud variable.

I now have it almost working. It just crushes when gray block are added. :]

[mimostel]

just like @muneer already said, that is not an object. working on an example right now for you.

[mimostel]

[bon.sosnowiczaninfi4]

Ok, but that was the point, to eliminate numerous get db pings, reduce it to one chunk (JSON?) and then get all needed values.

[mimostel]

I was thinking your way…
On the other hand, you just can call Get once, with key user_id/MO, and put value into a variable
This way you get an object with all values in it, then refer to this object`s properties as needed like get object properties of/get object properties of (as many layers as you need to get to that you needed
(have some stuffs to do right now, but ill provide an example as soon as i can)

[mimostel]