# \[Solved\] Showing nested json data from Firebase

**URL:** <https://community.thunkable.com/t/solved-showing-nested-json-data-from-firebase/1954832>\
**Category:** Questions about Thunkable X\
**Tags:** firebase, solved\
**Created:** [July 6, 2022, 8:05pm UTC](https://community.thunkable.com/t/solved-showing-nested-json-data-from-firebase/1954832 "2022-07-06T20:05:55Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![kristhorsteinssonf4y](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/kristhorsteinssonf4y/32/136014_2.png) [@kristhorsteinssonf4y](https://community.thunkable.com/u/kristhorsteinssonf4y)\
**Post date:** [July 6, 2022, 8:05pm UTC](https://community.thunkable.com/t/solved-showing-nested-json-data-from-firebase/1954832/1 "2022-07-06T20:05:55Z")

</div>

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:

 ![Screen Shot 2022-07-06 at 1.39.35 PM](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/b/4/b4e08812defa0e529e0c4da8e120039bedcea337.png)

Here’s the data structure in text form:

 ![Screen Shot 2022-07-06 at 1.41.29 PM](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/e/a/ea85a6cd4ea321563f193fe81fc4ea98e8c934cc.png)  
Here are my blocks:  
 ![Screen Shot 2022-07-06 at 1.28.49 PM](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/5/4/544587f370f359639f2650154df32a23503318cf.png)  
Here’s the app display, showing an error in Label1 and only a high level list in QuestionList1  
 ![Screen Shot 2022-07-06 at 1.33.27 PM](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/a/4/a4f3cc8d49770d9d4977945adb96aa94537b78b5.png)  
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

---

<div class="post-metadata">

**Author:** ![shrey](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/shrey/32/105637_2.png) [@shrey](https://community.thunkable.com/u/shrey)\
**Post date:** [July 6, 2022, 10:49pm UTC](https://community.thunkable.com/t/solved-showing-nested-json-data-from-firebase/1954832/2 "2022-07-06T22:49:31Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![kristhorsteinssonf4y](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/kristhorsteinssonf4y/32/136014_2.png) [@kristhorsteinssonf4y](https://community.thunkable.com/u/kristhorsteinssonf4y)\
**Post date:** [July 7, 2022, 12:12am UTC](https://community.thunkable.com/t/solved-showing-nested-json-data-from-firebase/1954832/3 "2022-07-07T00:12:13Z")

</div>

Thanks, that change the Label1 text to “undefined” instead of [object Object].  
 ![Screen Shot 2022-07-06 at 6.10.15 PM](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/9/1/91daccbbf5cf4901923510261b5025d0e0b889c8.png)

---

<div class="post-metadata">

**Author:** ![kristhorsteinssonf4y](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/kristhorsteinssonf4y/32/136014_2.png) [@kristhorsteinssonf4y](https://community.thunkable.com/u/kristhorsteinssonf4y)\
**Post date:** [July 7, 2022, 12:38am UTC](https://community.thunkable.com/t/solved-showing-nested-json-data-from-firebase/1954832/4 "2022-07-07T00:38:25Z")

</div>

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:

 ![Screen Shot 2022-07-06 at 6.35.17 PM](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/b/7/b7224648af1c039b2f15d09e9b6c4272b3efc00f.png)  
 ![Screen Shot 2022-07-06 at 6.36.22 PM](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/7/b/7b87ea3f58d725eb0c7f9e80bffcd317b7e35882.png)

---

<div class="post-metadata">

**Author:** ![shrey](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/shrey/32/105637_2.png) [@shrey](https://community.thunkable.com/u/shrey)\
**Post date:** [July 7, 2022, 12:46am UTC](https://community.thunkable.com/t/solved-showing-nested-json-data-from-firebase/1954832/5 "2022-07-07T00:46:30Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\
**Post date:** [July 7, 2022, 7:21am UTC](https://community.thunkable.com/t/solved-showing-nested-json-data-from-firebase/1954832/6 "2022-07-07T07:21:20Z")

</div>

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:  
 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/5/3/5338e972eab7498ee58222ebfeac96884eeec0d5.png)

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

---

<div class="post-metadata">

**Author:** ![kristhorsteinssonf4y](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/kristhorsteinssonf4y/32/136014_2.png) [@kristhorsteinssonf4y](https://community.thunkable.com/u/kristhorsteinssonf4y)\
**Post date:** [July 7, 2022, 11:40pm UTC](https://community.thunkable.com/t/solved-showing-nested-json-data-from-firebase/1954832/7 "2022-07-07T23:40:42Z")

</div>

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.

 ![Screen Shot 2022-07-07 at 5.37.46 PM](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/a/9/a9dd1ea9b36b24ba2608d9b9fb557005d726c1d3.png)

Am I on the right track? Thx, Kris

---

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [July 8, 2022, 5:12am UTC](https://community.thunkable.com/t/solved-showing-nested-json-data-from-firebase/1954832/8 "2022-07-08T05:12:25Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\
**Post date:** [July 8, 2022, 8:40am UTC](https://community.thunkable.com/t/solved-showing-nested-json-data-from-firebase/1954832/9 "2022-07-08T08:40:34Z")

</div>

> [@kristhorsteinssonf4y](#):
>
> but it doesn’t show anything in the list.

Use this to get the list from your JSON:  
 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/optimized/3X/4/c/4c9a5cee05b3e34cfd98f34d383535b5493043b9_2_690x48.png)

---

<div class="post-metadata">

**Author:** ![kristhorsteinssonf4y](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/kristhorsteinssonf4y/32/136014_2.png) [@kristhorsteinssonf4y](https://community.thunkable.com/u/kristhorsteinssonf4y)\
**Post date:** [July 8, 2022, 1:57pm UTC](https://community.thunkable.com/t/solved-showing-nested-json-data-from-firebase/1954832/10 "2022-07-08T13:57:37Z")

</div>

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…”,…}  
 ![Screen Shot 2022-07-08 at 7.50.20 AM](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/1/0/10eb94a15134444561f31f50468c62dc4c108108.png)

---

<div class="post-metadata">

**Author:** ![kristhorsteinssonf4y](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/kristhorsteinssonf4y/32/136014_2.png) [@kristhorsteinssonf4y](https://community.thunkable.com/u/kristhorsteinssonf4y)\
**Post date:** [July 8, 2022, 2:06pm UTC](https://community.thunkable.com/t/solved-showing-nested-json-data-from-firebase/1954832/11 "2022-07-08T14:06:25Z")

</div>

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

```auto
{"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)?"}
}
}
}

```

---

<div class="post-metadata">

**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\
**Post date:** [July 8, 2022, 3:14pm UTC](https://community.thunkable.com/t/solved-showing-nested-json-data-from-firebase/1954832/13 "2022-07-08T15:14:18Z")

</div>

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.

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/a/9/a9728382c65c81b4504a6b7ce3ef5de6ddf34663.png)

This works based on What you shared in your first post of how you retrieve data from Firebase  
 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/1/6/16649241826a83080312ae5e9c5c3991d6a4f174.png)

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

---

<div class="post-metadata">

**Author:** ![zander](https://avatars.discourse-cdn.com/v4/letter/z/ecb155/32.png) [@zander](https://community.thunkable.com/u/zander)\
**Post date:** [July 8, 2022, 3:19pm UTC](https://community.thunkable.com/t/solved-showing-nested-json-data-from-firebase/1954832/14 "2022-07-08T15:19:08Z")

</div>

I accidently deleted my post somehow lol  
Here is the project link again: [link](https://x.thunkable.com/copy/3354598932e8e2053df674e2e65159a5)

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/5/f/5f80fdc23b36e5d9c26091b64843a4562cc86ff6.png)

---

<div class="post-metadata">

**Author:** ![kristhorsteinssonf4y](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/kristhorsteinssonf4y/32/136014_2.png) [@kristhorsteinssonf4y](https://community.thunkable.com/u/kristhorsteinssonf4y)\
**Post date:** [July 8, 2022, 3:37pm UTC](https://community.thunkable.com/t/solved-showing-nested-json-data-from-firebase/1954832/15 "2022-07-08T15:37:56Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\
**Post date:** [July 8, 2022, 3:50pm UTC](https://community.thunkable.com/t/solved-showing-nested-json-data-from-firebase/1954832/16 "2022-07-08T15:50:13Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![kristhorsteinssonf4y](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/kristhorsteinssonf4y/32/136014_2.png) [@kristhorsteinssonf4y](https://community.thunkable.com/u/kristhorsteinssonf4y)\
**Post date:** [July 8, 2022, 3:50pm UTC](https://community.thunkable.com/t/solved-showing-nested-json-data-from-firebase/1954832/17 "2022-07-08T15:50:55Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\
**Post date:** [July 8, 2022, 3:51pm UTC](https://community.thunkable.com/t/solved-showing-nested-json-data-from-firebase/1954832/18 "2022-07-08T15:51:51Z")

</div>

You’re welcome.

---

<div class="post-metadata">

**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\
**Post date:** [July 8, 2022, 10:42pm UTC](https://community.thunkable.com/t/solved-showing-nested-json-data-from-firebase/1954832/19 "2022-07-08T22:42:02Z")

</div>

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](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.

---

<div class="post-metadata">

**Author:** ![kristhorsteinssonf4y](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/kristhorsteinssonf4y/32/136014_2.png) [@kristhorsteinssonf4y](https://community.thunkable.com/u/kristhorsteinssonf4y)\
**Post date:** [July 8, 2022, 11:24pm UTC](https://community.thunkable.com/t/solved-showing-nested-json-data-from-firebase/1954832/20 "2022-07-08T23:24:05Z")

</div>

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.

 ![Screenshot_20220630-211732](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/1/1/11bf0332fc6db41bb2c163cc5533ab29eb564dcc.jpeg)  
 ![Screenshot_20220630-211838](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/5/a/5aa10c7af4bf5d603c0619f98daa4ed7dddc439f.jpeg)  
 ![Screenshot_20220701-181627](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/1/8/18fe9cb4d2265b5533ec24b250de78cbe6ad87a8.jpeg)

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/0/f/0f59f292712368bce16ff80133ae10de8a6f27e8.png) [@system](https://community.thunkable.com/u/system)\
**Post date:** [October 6, 2022, 11:24pm UTC](https://community.thunkable.com/t/solved-showing-nested-json-data-from-firebase/1954832/21 "2022-10-06T23:24:43Z")

</div>

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.