Displaying Firebase JSON data

[tatiang]

I’m looking for advice – and I realize this isn’t really a Thunkable question but it’s certainly related.

I’m storing data that users add to my app by saving it to Firebase and a local data source in Thunkable and displaying it to the user in a Data Viewer List (DVL). I dream of DVLs that connect to cloud data sources…

But my problem is actually going the other direction. I’d like to be able to share the data users are creating in the app in a Google Sheet or Airtable or really any other user-friendly format. I realize I can create rows in a database so that I always have the same data in multiple locations. I actually prefer not to do that if possible. Because the moment I change the Firebase structure, I have to then modify the columns in my Google Sheet/Airtable and then I have to replace all of the Data Source blocks in my project and then I have to reconnect dozens of blocks that get displaced, etc.

So if I just keep the data in Firebase which is so much faster and easier to work with (for me)…

What’s the best way to display JSON data from Firebase? Does Firebase have a pre-formatted web page I don’t know about? Beyond my current method of manually exporting JSON, converting it to a CSV and importing it into a Google Sheet, any suggestions?

I don’t need the JSON data to be displayed within the app. It’s perfectly fine if it’s a third-party cloud solution that’s browser-based.

[muneer]

I had a requirement to have the app to connect to Firebase whenever there is an internet connection and use the locally stored data is no connection is available. I started with Firebase and local tables but soon realized the difficulties when the data structure need to be modified so I had to do without local tables and instead I saved the JSON in a stored variable which worked much better for me and I use the same blocks to display data whether from the stored variables or Firebase.

However, I had to resort for cloning of rows and columns instead of the DVL. I maintained the data structure to be very similar to Google sheet just in case I need to upload it to a sheet in the future.

The structure is a list containing rows as lists.

[[col1, col2, col3, col4], [col1, col2, col3, col4], [col1, col2, col3, col4], [col1, col2, col3, col4]]

I created a Google Apps Script to store the full set to a sheet whenever I need but have not used it yet.

[tatiang]

I’m trying to avoid cloning but that makes a lot of sense. I really want to use Thunkable in its simplest form as much as possible. That means a DVL tied to a local data source. My go to data source is Firebase. I love it for the most part. So versatile and like I said, fast. I’m also not big on scripting so when I hear Google Apps Script it feels like another layer on top of Thunkable.

I may just have to give up on this idea of a “clean” Thunkable project and dive back into cloning. I used to use it a lot but for my purposes (not this app; a student directory app that I made a while back), it was too slow to display content.

I appreciate your expertise in this area!

[muneer]

See this sample app that I made to demonstrate the speed of cloning with API of 100 posts.

https://x.thunkable.com/projectPage/6329e61c508030239d477028

See the creation of the list without a wait block and compare it with the deletion of the entries with a wait block. The speed difference is CLEAR.

[tatiang]

Thanks for the demo. I have a couple questions about it:

1. How are you populating the data in the cloned components? The reason I don’t like to use clones unless I have to is that the blocks in the “do” section of the clone block are always very complicated. But yours are blank! So how does the JSON data actually get into the labels?

2. Is the wait block just for demonstration purposes or do you need it to successfully remove all of the components?

[muneer]

@tatiang

How are you populating the data in the cloned components?

I just reverse the sequence. I have a template that I first fill it with data from the current row then I clone the row/column with data already populated in the labels and therefore no need to use the then do block.

---

@tatiang

Is the wait block just for demonstration purposes

Yes, the components will be removed anyway with or without the wait block.

[tatiang]

But this set block, for example, is only going to populate a single label. It doesn’t know to use the newly-cloned label, does it? Are you relying on the name of the label to be the same after it’s cloned?

[muneer]

OK, I admit I can’t put what’s in my head in text but I will try.

With every iteration, I populate the template that I created then I clone it and the clone block will clone all components with the populated text then in the next iteration the next available data will be populated in the template and when all data is populated then the template will be again cloned with its data to be the next entry in the list and so on.

If I failed to explain then we can go on a zoom and I show you the process practically then you explain it in the post using your clear style of writing.

[tatiang]

Okay, I think I get it. It’s not how my mind would think to do it but it’s really the same process I use when I clone components, just in reverse order. As you mentioned!

[tatiang]

You know, I only need to display the Firebase data periodically so I can probably get away with exporting the local data source or Firebase values to a Google Sheet when the need arises. I just like the idea of a “live” system that’s always updated.

[tatiang]

@muneer, it might not be too hard to implement this javascript, right?

Convert JSON Data Dynamically to HTML Table using JavaScript

I suppose I could use this to publish the html to a website or display it in the Web Viewer.

[muneer]

I believe you can do it inside of Thunkable.
Start with a variable that has <table> and then loop through your JSON to create the required HTML tags and contents,

See this example that I used to loop through only 3 records out of the 100 sample posts

This is the initialized variable, followed by the loop that creates the header row

Followed by the loop that creates the content rows (in this example 3 rows)

This is the output from this process

<table><tr><th>userId</th><th>id</th><th>title</th><th>body</th></tr><tr><td>1</td><td>1</td><td>sunt aut facere repellat provident occaecati excepturi optio reprehenderit</td><td>quia et suscipitsuscipit recusandae consequuntur expedita et cumreprehenderit molestiae ut ut quas totamnostrum rerum est autem sunt rem eveniet architecto</td><tr><td>1</td><td>2</td><td>qui est esse</td><td>est rerum tempore vitaesequi sint nihil reprehenderit dolor beatae ea dolores nequefugiat blanditiis voluptate porro vel nihil molestiae ut reiciendisqui aperiam non debitis possimus qui neque nisi nulla</td><tr><td>1</td><td>3</td><td>ea molestias quasi exercitationem repellat qui ipsa sit aut</td><td>et iusto sed quo iurevoluptatem occaecati omnis eligendi aut advoluptatem doloribus vel accusantium quis pariaturmolestiae porro eius odio et labore et velit aut</td></tr></table>

This is how it looks in the browser (without styling)

Of course, you need to use an HTML file with the Thunkable code to pass the HTML text generated to the file and get it displayed in the web viewer.

[tatiang]

Can I see your JSONList value? I’ve tried a few things and I’m not getting the expected results.

This is the JSON I tried:

{ “bob”: { “age”: 29, “car”: “honda” }, “ryan”: { “age”: 30, “car”: “toyota” }, “jewel”: { “age”: 19, “car”: “jeep” } }

[muneer]

I sue the following API sample
JSON Plaeholder

Your code does not look like a sheet. I mean it starts with name as key so I need to change the way the JSON is parsed into HTML.

[Update]
I changed the parsing process and got the following output

[muneer]

I started initializing the variables and used your sample JSON as one of the variables

In the function to build the HTML I started the first loop to give a paragraph heading using the names in the JSON you supplied. Just below the name, I created the table and filled in the headers of the table

The next step is to go through the content of the keys and fill in the data part of the table

Of course you can display the content differently but this is one way of doing it.

[tatiang]

Oh my gosh! Progress:

The JSON I had posted above was invalid. The product of trying too many different online CSV to JSON converters. I went back to basics and used the default settings here to convert my Google Sheet’s CSV download to JSON. And your code worked!

I have to do a bit more modifying since that’s not really the JSON structure I have. Mine is like this:

…where each date key (“10-1-2022”) has a list of items which each have an object (“date”, “item”, “note”). Ideally, the HTML table would have a date and then a bunch of rows containing the object values and then the next date and then a bunch of rows, etc…

If you have any suggestions for how to parse that, I’d appreciate it! But I also recognize you’ve done a lot to help already so I understand if you can’t.

Here’s sample JSON from my Firebase realtime database:

{"Journal":{"10-1-2022":[{"date":"10-1-2022","item":"Orange chicken w/chili garlic sauce","note":""},{"date":"10-1-2022","item":"Veggie chow mein","note":""},{"date":"10-1-2022","item":"BBQ Pork fried rice","note":""},{"date":"10-1-2022","item":"Toast w/butter and jelly","note":""}],"10-10-2022":[{"date":"10-10-2022","item":"Scrambled eggs, hash browns and ketchup","note":""},{"date":"10-10-2022","item":"Almond milk vanilla latte","note":""},{"date":"10-10-2022","item":"Mango iced tea","note":""},{"date":"10-10-2022","item":"Kung Pao Chicken w/white rice","note":""}]}}

[muneer]

What do you think of this output

Initialization

Your new JSON has two things different than the last ones.

• It has a master key Journal.
• The entries under the date is actually a list.

Therefore I had to adjust the blocks

Hope this helps.

[tatiang]

Thanks again! I’ll look at this when I get a chance but that formatting should be fine.

@muneer Edit: I was able to get the same output as you. Thank you so, so much!

I like the formatting of yours. When I save the tableHTML string to a .html file in BBEdit and open it in Chrome, it looks like this:

Do you happen to know why? Do I need to add something to the .html file besides what those blocks generate?

[tatiang]

Looks like I need to learn CSS. This is a start…

Click to view HTML table formatting

<head>

<style type="text/css" media="screen">

table{
border-collapse:collapse;
border:1px solid #FF0000;
}

table th {
	border:1px solid #FF0000;
	// text-align: left;
	}

tr:nth-child(even) {
  background-color: #D6EEEE;
}

table td{
border:1px solid #FF0000;
padding-top: 3px;
padding-bottom: 3px;
padding-left: 10px;
padding-right: 10px;
}
</style>

</head>

<div><H3>10-1-2022</H3><table><tr><th>date</th><th>item</th><th>note</th></tr><tr><td>10-1-2022</td><td>Orange chicken w/chili garlic sauce</td><td></td></tr><tr><td>10-1-2022</td><td>Veggie chow mein</td><td></td></tr><tr><td>10-1-2022</td><td>BBQ Pork fried rice</td><td></td></tr><tr><td>10-1-2022</td><td>Toast w/butter and jelly</td><td></td></tr><tr></tr></table></div><div><H3>10-10-2022</H3><table><tr><th>date</th><th>item</th><th>note</th></tr><tr><td>10-10-2022</td><td>Scrambled eggs, hash browns and ketchup</td><td></td></tr><tr><td>10-10-2022</td><td>Almond milk vanilla latte</td><td></td></tr><tr><td>10-10-2022</td><td>Mango iced tea</td><td></td></tr><tr><td>10-10-2022</td><td>Kung Pao Chicken w/white rice</td><td></td></tr><tr></tr></table></div>

[muneer]

I was actually adding the style you pointed out in the link you provided as I thought you would relate.