How to display JSON Data in Glide

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.

Can you provide a sample of your JSON?

1 Like

Here’s a sample JSON array

[
    "https://burchfabrics.com/seating/pivot/gunmetall",
    "https://burchfabrics.com/seating/pivot/silver",
    "https://burchfabrics.com/seating/pivot/bronze"
]

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:

return JSON.parse(p1)[p2];

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

You could use the Link Component in a Custom Collection if you wanted to…

True… might be a bit spaced out, but could potentially work

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.

1 Like

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.

3 Likes

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/silver”,
https://burchfabrics.com/seating/pivot/bronze
]

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:

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.

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:

$join($,',')

2 Likes

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…

Can you clarify what you mean by “set the split column”? Do you mean in the links component?

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
]

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

So i’m using the split text column -

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

figured it out! it’s working

image

Yeah, it’s working for me as well.

Thank you!! Works beautifully.
The next step will be to extract the preview URL to use it as the product image :wink:

Yeah, let me know if you need any further help.