Convert value of firebase to list

Dear Thunkers
I want to get data from a real-time database and put that value in a list. I tried both methods that you will see below in a picture, but the first one of @darren didn’t filter out all the punctuation marks and the last one gave me a blank screen, all my objects of that screen didn’t show. Do you have some ideas to convert the value to a list?

Darren’s method:


Result:

Other method:

You need to use the second method, but correctly. See my examples on the scrJSON screen
in the project

https://x.thunkable.com/projects/5d70f93f8a62b4079eedaff2/project/properties/designer/

See the JSON structure in the examples and how properties are obtained from them

1 Like

Dear Actech
I did your JSON code but I still got the same result, this was the code that I ended up with:


Maybe I did something wrong with the code, I really don’t know.

Can you copy the text that is in the value block and show it to me?

Well yes and no, I can show you now but for example if I put in a new task there will be a task added so the text will be different. I need the list to display all the titles of the created tasks. So the saved data on the real-timeDB will always be different.

The problem is not that the data is different, but that you need to learn how to get these different data. If you also change the data structure, this will significantly complicate the decision. But there are solutions for this case, too.

First, you need to understand what you are going to convert to a list from Firebase - a set of objects or a list of objects. These are different concepts.

I want to convert a set of objects, I think. What I imagine is if you created a task or more, the titles will show up in a list and when you click on a title, you go to another screen to see the other data that is linked to that title. I think I need to convert a set of objects, my real-time database looks like: LISTS/[USERID]/[NAME]/[TITLE]/[DATA]
(everything between brackets are user inputs)
So what I want to get is the title and on that other screen I need to get the data that is linked to that title.

Firebase handles very well the lists, objects, lists of objects, objects with embedded lists etc…
The only issue I’ve found comes only from the way Thunkable handle the lists saved to Firebase. But, there is a simple solution to it. Here is how I manage my lists.

  1. Save a list not stored in a variable: It is stored as an array in Firebase. And then it is restored as a list when queried through RealtimeDB component
  2. Save a list that is stored in a variable but NOT manipulated in the blocks: Same than before
  3. Save a list that is stored in a variable AND manipulated in the blocks: It is stored as a JSON object in Firebase with a special property “_scopeVariableInfo”. And this special property is itself a JSON object with properties “scope” and “variableName”. This JSON is, unfortunately, not restored as a list when queried through RealtimeDB component.

(Remark : the “NonManipulatedStoredList” key in the blocks corresponds to “SimpleStoredList”)

It is the 3rd case that makes things hard on Thunkable. Nevertheless, here is a very simple solution: get the JSON from the list and regenerate back the list so that it is no more understood as a variable but as a simple list.

The complete code to make comparisons:

The results of the complete code is shown above (ListResult figure).

4 Likes

Here is a sample app that may answer your request:
https://x.thunkable.com/copy/0b82ffbe8b35c4431b2e7e54f02ba6f0

Here is the result on Firebase:

1 Like

First, I recommend that you put Firebase aside and figure out how to work with a set and array of objects. To do this, JSON data must be written to a text block and then extracted from it. But it is better to use the service for training https://jsonpath.com/

Sample

{
  "Data":{    
  "firstName": "John",
  "lastName" : "doe",
  "age"      : 26,
  "address"  : {
    "streetAddress": "naist street",
    "city"         : "Nara",
    "postalCode"   : "630-0192"
  },
  "phoneNumbers": [
    {
      "type"  : "iPhone",
      "number": "0123-4567-8888"
    },
    {
      "type"  : "home",
      "number": "0123-4567-8910"
    }
  ]
  }
}

For JSONPath

$['Data']['phoneNumbers'][0]['type']

result

[
  "iPhone"
]

Then use your own data structure and build paths to it. Note that in thunkable X, list indexes start with 1, not 0 as in this resource.

When you understand JSON, then you can go to Firebase, because you will understand what a set of objects is and what a list of objects is

The scrFirebase screen in my demo application shows an example of a set of objects and a list of objects. Watch it to better understand the difference between them and the way they work.

The question of Jens is more about storing/restoring information using Firebase than the difference between sets and arrays.
The simple difference between sets and arrays is that sets are unordered and contain “unique” values. The fact that each item of a set is referenced through a key makes of the set a dictionary.
In JSON, arrays are either noted with brakets “[…]”. If you add a property to an array, it is transformed to an object using the braces “{…}” and numbered keys “0, 1, 2 …”.
That’s why, with Firebase, the array conversion is broken when a variable is directly saved on the RealtimeDB. It is because of the key “_scopeVariableInfo” that is added after the numbered keys.

Coming back to Jens, the core problem is how to handle lists using Firebase. And I hope that this discussion will lead him to the solution.

You are right, working with Firebase has its own peculiarities, but this is a special case of the basic task-the ability to work with JSON and arrays/lists. If the user understands this, they will be able to understand Firebase, Quinta DB, and other services that work with the JSON format.

Firebase distorts data and is this a problem? No, the real problem is that the user doesn’t understand data structures well enough. And here is a huge problem with visual development: users are taught not to program, but to connect blocks. As a result, he will constantly ask the same questions.

Thanks @topniz. I found the sample app really helpful - not just for the scopeVariableInfo workaround but also for how you work with lists in general. I liked how you used the list viewer itself to store additions to the list before saving the updated list to your DB, another little thing I didn’t realise was possible.

Reading these posts, I realised that I didn’t understand the difference, but hopefully now I do. This is my understanding now:
In Thunkable a list is understood to be like a real-world list of items, but those items can be very different kinds of things - objects, properties of objects, bits of text, numbers, variables. These can be shown in a list viewer, selected etc. The items can be searched, added to, removed etc.
The list can be saved in Airtable (for example) as a row object, in Firebase as a value.
But, the problem we’re looking at here arises because a Thunkable list is such a multi-purpose object. Or that’s how it seems to me.
I dug a little deeper into arrays and objects and found a simple explanation on StackOverflow
Arrays contain things that are the same type of thing - eg apples, oranges, bananas is an array of fruit.
On the other hand seed(dark), skin(green), flesh(pale) are properties(with their own properties) of the object apple.
Does this sound about right?

Yep - in your example you are defining a list of objects, and the objects in this case are fruit.

Just to expand on the ideas you mentioned, you could also have an array of Strings:

[“apples”,“oranges”,“bananas”]

And the props associated with these strings would be things like length i.e. the number of characters in each word. These properties then have their own individual values, in this example 6, 7 and 7.

Thanks @domhnallohanlon