[Solved] Showing nested json data from Firebase

[kristhorsteinssonf4y]

Hi,
I managed to retrieve an object from the json file, and show the “tags” at a high level, but need to show the values of the tags, one being a single item from “equipDescription” to be shown in Label1, and the other being an array of question#s and questions from “equipQuestions” to be shown in QuestionList1.
Here’s the basic data structure from Firebase:

Here’s the data structure in text form:

Here are my blocks:

Here’s the app display, showing an error in Label1 and only a high level list in QuestionList1

I understand that working with Firebase Get blocks is not preferred, but I was trying to replicate the approach I used in AI2.
Thanks for your help, Kris

[shrey]

Try removing the ‘list’ block (list block with a gear) just before the value block and then check.

[kristhorsteinssonf4y]

Thanks, that change the Label1 text to “undefined” instead of [object Object].

[kristhorsteinssonf4y]

A clunky trial approach calling the database twice returns the Label1 text “App introduction” properly and a list of question numbers but no questions as follows:

[shrey]

I won’t be able to help you right now as I currently do not have access to a computer. I will try to help you when I can.

[muneer]

Welcome to Thunkable

When you retrieve data from Firebase they will be in a form of object. This object holds properties which holds the values.

So, to display the required values in Label1 you need the following:

You will need to do the same thing for the List Viewer.

[kristhorsteinssonf4y]

Thanks, that worked great for the Label. For the List Viewer I’ve put together the following block from another solved Thunkable question but it doesn’t show anything in the list. I even tried changing the set of questions to a simple list [“aaaa”, “bbbb”, …], not an array {“Q1”:“aaaa”, “Q2”:“bbbb”, …} to see if that would be returned, but it didn’t show up in the list view either.

Am I on the right track? Thx, Kris

[tatiang]

If you’re able to, I recommend posting the full JSON as text (not a screenshot as above). I find it hard to work with partial JSON or screenshots of JSON. But if I have the full text, I can run tests on it to see which blocks work best and then make a recommendation for you.

If you do post JSON text, be sure to use the pre-formatted text option (</>) in the forum toolbar to avoid problems with smart quotes.

[muneer]

@kristhorsteinssonf4y

but it doesn’t show anything in the list.

Use this to get the list from your JSON:

[kristhorsteinssonf4y]

Thanks, That shows the question numbers, and in the correct order. Now I just need the actual questions to show up after the numbers. Each question is in the json following the number like {“Q01”:“Is the…”,“Q02”:“What is…”,“Q03”:“Is there any…”,…}

[kristhorsteinssonf4y]

Thanks for your help, Here’s a sample of the json format:

{"Questions":{
	"Intro": 
	{
	"plantType": "InitialScreen",
	"equipItem": "Intro",
	"equipDescription": "App Introduction",
	"equipQuestions": {"Q01":"Planned General Inspections are f equipment.", "Q02":"Observe all safety re authorization.", "Q03":"Obtain required.", "Q04":"Do not bring sified areas.", "Q05":"The itemsant specific equipment.", "Q06":"These itensive list.", "Q07":"This PGI App is intendecal judgement.", "Q08":"Do NOTriving.", "Q09":"The user acceps disclaimed."}
},

"LiftingBarrier":
{
	"plantType": "LiftingEquip",
	"equipItem": "LiftingBarrier",
	"equipDescription": "Lift Warning Signs",
	"equipQuestions": {"Q1":"Are all workinstalled?", "Q2":"Are vehicplicable?"}
},
"LiftingBoom":
{
	"plantType": "LiftingEquip",
	"equipItem": "LiftingBoom",
	"equipDescription": "Crane Boom",
	"equipQuestions": {"Q1":"Is documentatvailable?", "Q2":"Are there ng hoses?", "Q3":"Are there any obvhe boom?", "Q4":"Are booually?"}
},
"LiftingCab":
{
	"plantType": "LiftingEquip",
	"equipItem": "LiftingCab",
	"equipDescription": "Crane Cab Documentation",
	"equipQuestions": {"Q01":"Do craneut-off device?", "Q02":"Is the onurrent?", "Q03":"Is thable and legible?", "Q04":"Is the din the cab?", "Q05":"Is the mthe cab?", "Q06":"Is th the cab?", "Q07":"Is a the cab?", "Q08":"Is the wer provided?", "Q09":"Is the cran cab?", "Q10":"If a cab roofimpact?"}
},
"LiftingCntrwght":
{
	"plantType": "LiftingEquip",
	"equipItem": "LiftingCntrwght",
	"equipDescription": "Counter-weight",
	"equipQuestions": {"Q1":"Is the coaded?", "Q2":"Is the couble)?"}
}
}
}

[muneer]

That is very positive. Now you need to loop through to get the value of each question. Using the loop you can decide to display only the questions or both the number and the text.

This works based on What you shared in your first post of how you retrieve data from Firebase

If you changed it then you need to adjust the blocks accordingly.

[zander]

I accidently deleted my post somehow lol
Here is the project link again: link

[kristhorsteinssonf4y]

Thanks, that will show the questions as hoped for. Actually I’m surprised they show up in correct order, as retrieving from Firebase json files in the past (AI2 and Swift) has resulted in random order, then needed additional coding to sequence them properly! Now I need to only drill down as far as Intro, then from that object show the equipDescription in a separate text box at the same time as the List View of equipQuestions.

[muneer]

Any code based in Java will most probably use the Set or the Map, also called HashMap to store info in a list/array.

It is knows that both do not maintain insertion order and you need to take care of that yourself.

However, when the Java List, also called ArrayList is used then the insertion order is maintained.

Hope this makes it clear.

[kristhorsteinssonf4y]

Perfect, Thanks again. I think a light bulb has finally gone off about handling nested json structures with property blocks.

[muneer]

You’re welcome.

[muneer]

I was just looking at the JSON text you made available in the post and noticed you have more than Intro, so I made a quick project to show you how to provide information of other categories dynamically.

https://x.thunkable.com/projectPage/62c8a8ea9b5d0e001238d5b8

The project has two List Viewers. The categories will show in the top List Viewer and when the user select one then the bottom List Viewer will be populated with the relevant questions.

Hope this helps.

[kristhorsteinssonf4y]

Thanks for further assistance. In the code I substitute a variable block for the “Intro” text block, which is set each time a user clicks (hopefully touches) on a sprite on the graphic. This then shows the equipment description and the list of questions. Here’s how it works in the AI2 version. I was hoping to make an iOS version, hence learning Thunkable.