# Help displaying JSON data

**URL:** <https://community.glideapps.com/t/help-displaying-json-data/68439>\
**Category:** Ask for Help\
**Created:** [December 6, 2023, 9:28pm UTC](https://community.glideapps.com/t/help-displaying-json-data/68439 "2023-12-06T21:28:23Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![yohann\_rougier](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/yohann_rougier/32/66867_2.png) [@yohann\_rougier](https://community.glideapps.com/u/yohann_rougier)\
**Post date:** [December 6, 2023, 9:28pm UTC](https://community.glideapps.com/t/help-displaying-json-data/68439/1 "2023-12-06T21:28:23Z")

</div>

Hi everyone,

I’m trying to make a simple app that would take a picture of a recipe from a book and have ChatGPT extract only the ingredient part and send it to a collumn so I could display it, ideally as a list.

ChatGPT works well, and I can display the text in my page. But I’d like to have all the ingredients displayed as a list, so after I could extract them and do a shopping list for example. I asked ChatGPT to format in JSON for example but I can’t find a way to display the ingredients in a list.

Here is a screenshot of my collumn:

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/4/7/47ebccd9a7028403f0f3d43fea7b2c4705b7371f.png)

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [December 6, 2023, 9:58pm UTC](https://community.glideapps.com/t/help-displaying-json-data/68439/2 "2023-12-06T21:58:19Z")

</div>

Use the javascript column to unpack the JSON…

Paste that JSON here… someone will give you a code for that.

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [December 6, 2023, 10:58pm UTC](https://community.glideapps.com/t/help-displaying-json-data/68439/3 "2023-12-06T22:58:14Z")

</div>

To get you started, try something like this in a Query JSON column.

```auto
ingredients.($.ingredient & '
')

```

---

<div class="post-metadata">

**Author:** ![yohann\_rougier](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/yohann_rougier/32/66867_2.png) [@yohann\_rougier](https://community.glideapps.com/u/yohann_rougier)\
**Post date:** [December 7, 2023, 10:13pm UTC](https://community.glideapps.com/t/help-displaying-json-data/68439/4 "2023-12-07T22:13:56Z")

</div>

Thanks guys for your help.

First I changed Chat GPT model, and swichted to GTP4 Vision. And used a better prompte to end up with a clean JSON Object. (sceenshop provided)

I used your advice of using a JSON Queries. I extract the Title with one query, the instruction in an other. But for the ingredients and there recipe I do the same but it ca be a lot of ingredients so a lot of collums. I stoped at 5 ingredients to test.

Everything is working but it feels like a lot of computing and I feel there is a better way to use JSON Objects?

Prompt

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/1/d18df26fc1a91d648cecfc605e9ee7d555935a53.png)

ChatGPT model:

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/4/a477644712c0a465a16850c1ce69f4f0014f7e5d.png)

Actual JSON Object result:

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/0/b/0b6f60c366eb6a1c664b8cdd689314e91b5f07c1.png)

THe loooong list of Qty and Ingredients

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/8/e893c75721aa647a16788c5a2d0d52a350f63bf2.png)

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [December 7, 2023, 10:18pm UTC](https://community.glideapps.com/t/help-displaying-json-data/68439/5 "2023-12-07T22:18:18Z")

</div>

You need a helper table to unpack that JSON into a list… I would use Javascript for that…  
paste that JSON here… I will give you the code…

 ![Screenshot 2023-12-07 at 5.57.29 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/3/4/34bbca215713fea6635a117ee46ad96eab65ae9c.jpeg)

 ![Screenshot 2023-12-07 at 6.00.44 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/b/e/bee3edc0a413f7aaf79f893d2162842a7ade9e52.jpeg)

try it…