Forum Documentation Showcase Pricing Learn more

New plugin: JSONtools

In recent project I needed to import a list of things coming from an API call into HTML / javascript elements, so I developed a small plugin to translate a thing or a list of things into a JSON. I decided to polish it up and share it with others. The name of the plugin is in plural since there might be some other tools in it in the future :slight_smile:

The plugin has an element GetJSON which converts a thing into a JSON string resulting in {“fieldName”:“value”, …} structure. It converts a list of things into an array of objects of the same structure, i. e. [{“fieldName0”:“value0”,“fieldName1”:“value1”, …},{…}, …].

Usage:

  • put the element on the page or any grouping element
  • set the DataType property to the data type of the thing(s) to convert
  • set the data source in appropriate property - a Thing to convert or a List to convert.

If you set both the thing and the list source, the JSON of the list will be returned.

The returned JSON is sanitized, so it should be safe to transfer data including backslashes, quotation marks etc.

In HTML or javascript element you use the syntax:

<script>
var myStr = "GetJSON Name's value";
var myThing = JSON.parse(myStr);

alert(myThing.myFieldName);
</script>

to get the value of the fieldname of a thing, or

<script>
var myStr = "GetJSON Name's value";
var myThings = JSON.parse(myStr);

alert(myThings[0].myFieldName);
</script>

to get the value of the fieldname of the first thing in the list.

Plugin doesn’t recurse on the lists within fields, but if somebody needs this and the time will permit, it can be done.

8 Likes

Hi @eftomi, this looks like a great tool and may be exactly what I need for a particular problem I have! I do have a question based on your statement that the plugin currently “does not recurse on the lists within fields.” Does this mean that, if the Thing I am converting to JSON has a list of Things, that I would not be able to access the properties of the sub list. This feature would be very helpful to me as I am trying mimic some features of a relational database using data stored in bubble.

Thanks!
Ryan

Hi @ryanellman, I’m very busy at the moment to add this functionality, but as a quick workaround you can use one GetJSON element to pick a thing (e. g. Current User), and another GetJSON element to pick related list of things (as ‘List to convert’) with appropriate expression (e. g. Current User's Invoices or Search for Invoice [constraint: Customer = Current User]). Then you use two variables in javascript and combine the results, if needed. I hope this helps.

Hi,

How can I walk in reverse way? I have a RG type text and I want to fill another RG type Thing(in my DB), but I dont find how to move each item un text RG to each item in typed with 1 field RG.

Can this tool help me?

Regards

Hmmm, it’s been a while that I thought about the reverse GetJSON element (PutJSON :sunglasses:) but essentially Bubble has actions to save data to the DB, so I dropped the idea. Also, usually you get JSON from some API call, so it should be processed there (here’s help on that).

Is it possible to exclude / just include specific fields. For example my data item is Person with all different contact detail fields but I am only wanting to create a JSON of First name and List name.

This is not supported, but in HTML/JS element you can use a direct syntax as in:

<script>
var myStr = "Person's FirstName";

...
</script>