Extracting Values from a Messy JSON File

At a glance

Hey hey 😁

I know this is very use case specific. I assume this is outside the scope of Webstudio's support. If anyone could help out with this or knows someone that could, I'd be willing to pay.

I can drill into this json file JSON.locales.[0].data. until that point. Then I get a list of IDs such as audio_21C02D84_643F_B414_41B0_c31, while I want:

The output of "value" such as 26-02-2016 that comes after the ID.
If possible, filter only data that contains panorama_.

I understand the JSON file is messy, but that's something I'm trying to deal with.

If that's possible within the expression editor, amazing.

Attachments

8 comments

TTony

Hey there. i fI understand your problem well, here are the step you would need.

Since data is an object, you'd first have to convert it in an array
When converted, you'll be able to :

Filter it
Transform each subobject the way you want to get the value

It could look something like this

Plain Text

Object.keys(JSON.locales[0].data)
  .filter(key => key.includes("panorama_"))
  .map(key => JSON.locales[0].data[key].value)

TTony

First line transforms the object in an array of ids
Second line only keeps in the array the ids containing panorama
Third line retrieves each value from the ids in the array

TTony

You should obtain an array of all the values in data 😉

OOleg Isonen

If you want to server render this data, you will need a backend that transforms / filters all that, because we don't have yet custom filtering options inside expressions

OOleg Isonen

If you would be ok with client-side rendering for this, then you can output the data as a javascript variable and then filter like Tony suggests.

RRonald from 360Creators

First of all, big thanks for helping. Very much appreciated! 🙏

I believe you understand the problem very well. However, I'm not yet understanding where to place your solution.

I've assumed to place it in the Collection item's Data, as I could reach the JSON there.

In the expression editor I've copy pasted your code which gives me the error code that Functions are not supported.

I think I've misunderstood something.

Attachment

RRonald from 360Creators

So if I understand correctly, I should use that code in a code editor before using it inside Webstudio?

OOleg Isonen

@Ronald from 360Creators that solution only works if you output that json on the client and then use it on the client in html embed, not in the expression editor

Add a reply

Join the Webstudio community

Extracting Values from a Messy JSON File