# How to display JSON Data in Glide **URL:** \ **Category:** Ask for Help\ **Tags:** json\ **Created:** [March 7, 2024, 6:40am UTC](https://community.glideapps.com/t/how-to-display-json-data-in-glide/71490 "2024-03-07T06:40:10Z")\ **Posts on this page:** 18\ **Page:** 1
**Author:** ![Eden](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/eden/32/18651_2.png) [@Eden](https://community.glideapps.com/u/Eden)\ **Post date:** [March 7, 2024, 6:40am UTC](https://community.glideapps.com/t/how-to-display-json-data-in-glide/71490/1 "2024-03-07T06:40:10Z")
Hi! We have multiple URL’s stored in a Text column which is essentially JSON. I wanna utilize the URL/link component in the glide app, but can’t figure out a way to show all the URL’s, I could use the Query JSON to break up the JSON into multiple columns, but it’s messy and it’s difficult to tell how many URL’s could be included for a given record. ---
**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\ **Post date:** [March 7, 2024, 6:44am UTC](https://community.glideapps.com/t/how-to-display-json-data-in-glide/71490/2 "2024-03-07T06:44:19Z")
Can you provide a sample of your JSON? ---
**Author:** ![Eden](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/eden/32/18651_2.png) [@Eden](https://community.glideapps.com/u/Eden)\ **Post date:** [March 8, 2024, 7:45am UTC](https://community.glideapps.com/t/how-to-display-json-data-in-glide/71490/3 "2024-03-08T07:45:41Z")
Here’s a sample JSON array ```auto [ "https://burchfabrics.com/seating/pivot/gunmetall", "https://burchfabrics.com/seating/pivot/silver", "https://burchfabrics.com/seating/pivot/bronze" ] ``` ---
**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\ **Post date:** [March 8, 2024, 8:07am UTC](https://community.glideapps.com/t/how-to-display-json-data-in-glide/71490/4 "2024-03-08T08:07:43Z")
Okay, that’s fairly straightforward. You can use a variation of the Miracle Method. You just need a helper table with enough rows to cover the maximum number of expected URLs. Then add a row index column, apply your JSON to every row, then extract a separate URL on each row. You could use a Query JSON column, but that would require an extra template column, so I’d probably use JavaScript. Like so: ```auto return JSON.parse(p1)[p2]; ``` ![CleanShot 2024-03-08 at 16.08.32@2x](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/2/d2c25198229fe525c215bd0130c9c99475930ac7.jpeg) ---
**Author:** ![Eden](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/eden/32/18651_2.png) [@Eden](https://community.glideapps.com/u/Eden)\ **Post date:** [March 8, 2024, 8:17am UTC](https://community.glideapps.com/t/how-to-display-json-data-in-glide/71490/5 "2024-03-08T08:17:05Z")
Aha, and which collection type would be the prettiest to present? I really like the link component, but that’s obviously on a column basis, not a collection ---
**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\ **Post date:** [March 8, 2024, 8:25am UTC](https://community.glideapps.com/t/how-to-display-json-data-in-glide/71490/6 "2024-03-08T08:25:45Z")
You could use the Link Component in a Custom Collection if you wanted to… ---
**Author:** ![Eden](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/eden/32/18651_2.png) [@Eden](https://community.glideapps.com/u/Eden)\ **Post date:** [March 8, 2024, 8:41am UTC](https://community.glideapps.com/t/how-to-display-json-data-in-glide/71490/7 "2024-03-08T08:41:41Z")
True… might be a bit spaced out, but could potentially work ---
**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\ **Post date:** [March 8, 2024, 9:03am UTC](https://community.glideapps.com/t/how-to-display-json-data-in-glide/71490/8 "2024-03-08T09:03:48Z")
Another alternative might be to use a HTML template in a Rich Text component. With a bit of inline styling you could probably make them look like Link Components. ---
**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:** [March 8, 2024, 12:43pm UTC](https://community.glideapps.com/t/how-to-display-json-data-in-glide/71490/9 "2024-03-08T12:43:43Z")
The link component works with arrays. You shouldn’t need a helper table or multiple rows to accomplish this. At most, you would only need 1 or 2 columns to convert the text to an array, and then make that array the source of a Link component. ---
**Author:** ![Eden](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/eden/32/18651_2.png) [@Eden](https://community.glideapps.com/u/Eden)\ **Post date:** [March 9, 2024, 5:07am UTC](https://community.glideapps.com/t/how-to-display-json-data-in-glide/71490/10 "2024-03-09T05:07:49Z")
Oh wow! My glide data source is a JSON column in SQL, but glide sees it as a text column. This is a sample array I currently have, what do you mean convert it into an array? [ “[https://burchfabrics.com/seating/pivot/gunmetall](https://burchfabrics.com/seating/pivot/gunmetall)”, “[https://burchfabrics.com/seating/pivot/silver](https://burchfabrics.com/seating/pivot/silver)”, “[https://burchfabrics.com/seating/pivot/bronze](https://burchfabrics.com/seating/pivot/bronze)” ] ---
**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\ **Post date:** [March 9, 2024, 6:19am UTC](https://community.glideapps.com/t/how-to-display-json-data-in-glide/71490/11 "2024-03-09T06:19:32Z")
It’s JSON, so it still needs to be parsed. What you could do is modify the JavaScript so that it returns a Joined List of URLs, eg: ```auto return JSON.parse(p1).join(',') ``` Then use a Split Text column to convert that to an array, and use that as the source of a Link Component. ![CleanShot 2024-03-09 at 14.17.43@2x](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/4/6/46bf3078c319683bb3394ad30b0637ac63cb506a.png) ![CleanShot 2024-03-09 at 14.18.38@2x](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/9/6/966792625b1e6a66385e2685fb6c9d3de3aedd44.png) One thing I should mention is that because in this case you’re returning everything on a single line, you could drop the JavaScript in favour of a Query JSON column: ```auto $join($,',') ``` ![CleanShot 2024-03-09 at 14.23.09@2x](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/5/25351c83ca184b0a7b7e210c726de88de1ccd265.png) ---
**Author:** ![Eden](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/eden/32/18651_2.png) [@Eden](https://community.glideapps.com/u/Eden)\ **Post date:** [March 12, 2024, 10:54pm UTC](https://community.glideapps.com/t/how-to-display-json-data-in-glide/71490/12 "2024-03-12T22:54:28Z")
ok so update, apparently it comes into glide as comma separated, not as an array… (even tho in PostgreSQL is a JSON column) so in theory it should be simpler, i’m using the split column to create an array, but when I’m trying to set the split column, it does not give me the option to reference it. I don’t know if it’s a limitation with SQL as a source or something else… ---
**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\ **Post date:** [March 12, 2024, 11:03pm UTC](https://community.glideapps.com/t/how-to-display-json-data-in-glide/71490/13 "2024-03-12T23:03:04Z")
> [@Eden](#): > > so in theory it should be simpler, i’m using the split column to create an array, but when I’m trying to set the split column, it does not give me the option to reference it. Can you clarify what you mean by “set the split column”? Do you mean in the links component? ---
**Author:** ![Eden](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/eden/32/18651_2.png) [@Eden](https://community.glideapps.com/u/Eden)\ **Post date:** [March 12, 2024, 11:09pm UTC](https://community.glideapps.com/t/how-to-display-json-data-in-glide/71490/14 "2024-03-12T23:09:42Z")
How it appears in Postgres > [ > “[https://www.hcontractfurniture.com/h-contract-dalton-dining-chair/hc5127-d-1844/iteminformation.aspx,https://burchfabrics.com/seating/kimono/sketch,https://burchfabrics.com/vinyl/outback/birch](https://www.hcontractfurniture.com/h-contract-dalton-dining-chair/hc5127-d-1844/iteminformation.aspx,https://burchfabrics.com/seating/kimono/sketch,https://burchfabrics.com/vinyl/outback/birch)” > ] How it appears in Glide > [https://www.hcontractfurniture.com/h-contract-dalton-dining-chair/hc5127-d-1844/iteminformation.aspx,https://burchfabrics.com/seating/kimono/sketch,https://burchfabrics.com/vinyl/outback/birch](https://www.hcontractfurniture.com/h-contract-dalton-dining-chair/hc5127-d-1844/iteminformation.aspx,https://burchfabrics.com/seating/kimono/sketch,https://burchfabrics.com/vinyl/outback/birch) So i’m using the split text column - ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/0/f/0f71bc4d4269e65a78c83ac0d7edeb5ece0f796f.png) to split it into an array so I could feed it to the link component. But the link component doesn’t give me the option to select this new column ---
**Author:** ![Eden](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/eden/32/18651_2.png) [@Eden](https://community.glideapps.com/u/Eden)\ **Post date:** [March 12, 2024, 11:15pm UTC](https://community.glideapps.com/t/how-to-display-json-data-in-glide/71490/15 "2024-03-12T23:15:32Z")
figured it out! it’s working ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/0/703899ae9a627ff11ec2f2e126dd6f9660de008d.png) ---
**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\ **Post date:** [March 12, 2024, 11:15pm UTC](https://community.glideapps.com/t/how-to-display-json-data-in-glide/71490/16 "2024-03-12T23:15:42Z")
![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/7/77798d03556f83c8e98160ddfb0d78ff63972346.jpeg) ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/b/eb62d423bfb72460fb2551af9a5d359f0b0b0672.png) Yeah, it’s working for me as well. ---
**Author:** ![Eden](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/eden/32/18651_2.png) [@Eden](https://community.glideapps.com/u/Eden)\ **Post date:** [March 12, 2024, 11:26pm UTC](https://community.glideapps.com/t/how-to-display-json-data-in-glide/71490/17 "2024-03-12T23:26:45Z")
Thank you!! Works beautifully. The next step will be to extract the preview URL to use it as the product image 😉 > **[LinkPreview API - Free Link Preview Service](https://www.linkpreview.net/)** > > Preview Web links with our reliable API service. Get Detailed JSON Response for any URL. ---
**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\ **Post date:** [March 12, 2024, 11:40pm UTC](https://community.glideapps.com/t/how-to-display-json-data-in-glide/71490/18 "2024-03-12T23:40:01Z")
Yeah, let me know if you need any further help.