New plugin: JSONtools

[eftomi]

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

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.

[ryanellman]

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

[eftomi]

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.

[jpascuet]

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

[eftomi]

Hmmm, it’s been a while that I thought about the reverse GetJSON element (PutJSON ) 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).

[mattblake]

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.

[eftomi]

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

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

...
</script>

[natserrano]

can I use this plugin to take an API Response that is a Json response and use it as input for another API call that uses json as input?

[emile.elie]

where do you see the Json that has been generated?
I’ve put the element on my page but nothing appears

[keith]

It publishes the result to an exposed state named “value” (so JSONtools’s value).

This plugin is extremely minimal/naive, so doesn’t trigger an event or anything when its output is ready. There are probably more useful JSON-related plugins.

[emile.elie]

Thanks, I’ve found how to use it.

Indeed it doesn’t help me. The JSON output is not clean, so it doesn’t really help.