I’d like to introduce JSON machine. A simple way to work with JSON data inside your app. Read & Write JSON any sort of data to a DB text field, a page state, & more.
I built this to reduce calls to the DB for many types of queries by wrapping the entire data structure into a single, fast, text object that can be parsed and used. I found built-in solutions like regex and conditional text to be kludgy and other JSON plugins were purpose built for other purposes (like my other plugin jsoNest). I’m surprised this plugin hasn’t been done sooner (or maybe it has but I can’t find it). In either ease this is my attempt.
Demo App;
You’ll want to take a look here to see implementation strategies JSON Machine
JSON machine lets you work with JSON directly on the page. Load and Save complex structured data in JSON and work with the output data in dynamic expressions.
Work with JSON data inside your app. Read & write. Store complex data structures easily a single text field.
Why use this?
-Make use of JSON to store complex data structures in a string.
-Store JSON anywhere such as a database text field, a page state, browser cookle/localstorage, accept json input from users, the list goes on.
-Improve scaling and simplify /speed up complex DB calls – Working with the Bubble DB, especially on advanced queries with multiple related types, can be slow and have large server overhead. By reading from and writing to a single text field you can save significant overhead.
-If you are using complex / limiting Regex to parse JSON.
Why not use this.
No backend workflow support yet to work with JSON
Although this is a flexible solution, it is coloring outside of the lines somewhat. Bubble doesn’t have a way to search JSON values inside the DB for example.
Looking forward to checking this out…I store a lot of JSON data in text fields and reference via backend workflow to speed things up. I also parse a lot of stuff in Run Javascript, so looking forward to see what this is.
Thats great! I’m working on adding more features including backend support to a paid version. I’d love some feedback. PM-met if you are interested in a free beta & final version.
Hey @jon2
This looks like a really handy plugin indeed! One that I could certainly make use at the moment.
I’m currently attempting to handle some large geojson files located at the following link but I keep on getting a console error after I’ve pasted the contents straight into the readJSON A element.
I want data from items and entrys arrays to be within the same line on a repeating group
my goal is to make a data base on bubble that on one row has data members from items and data members from entry
Unfortunately I can’t modify the JSON response for those to be within the same array, I was wondering if this plugin had functionality with dealing with this issue
I really appreciate your help with this, and again, thanks for making this plugin
If I understand you correctly json.items is an array of data (texts, numbers, etc). There is corresponding data at json.includes.entry which, I presume is another array of the same length and index values.
For example: json.items[23] would have its corresponding data at json.includes.entry[23]
Data can be structured in many ways, JSON Machines supports more conventional JS object structures, which this is not, unfortunately. This may be a candidate for custom JS to loop through and pair up your data. You can PM me if you are interested in having something custom built.
As a work-around perhaps, you could build your RG off of JSON.items (with its data and index) and then use RG row index to target the other node (json.includes.entry) using that index thus pulling out your corresponding values from the other node. There are some limitations with this and it may not be elegant, but I can’t see why it wouldn’t work in theory
@jon2, I love this plugin, so thank you for the contribution. That said, I’m struggling and hoping you or someone else on this thread might be able to help me. My use case: I’m trying to pass a list of JSON objects into a repeating group and show different templates based on one of the parameters. However, it seems the Read JSON element must be visible for the plugin to function. Any thoughts on how to work around?
Plug-in page elements do need to be shown (at least once) so their code can be loaded. The read element, however, is not visible to the user, even if it set to be ‘visible’.
I assume you could put the read element directly in the RG row so it is always “visible” when the row loads. You could then add different groups in the RG row (for your different templates) which are ‘siblings’ to the read element inside the RG row. Set those groups default visibility to hidden on page load and set a conditional to show each template based on the read element’s value.
I am able to use Json Reader to populate the text and status for a repeating group with checkboxes denoting the state of an given list item in the json list. Where I am having trouble is updating my input json by just toggling the check boxes. I setup the modify json to be triggered when the value of the checkbox changes. Watching the debugger I see the modif json correctly pull in the input json indentify the correct key for the cell and the correct value but I dont see the update occur in the textbox where the json is stored. Is there something I am doing that would prevent me from seeing update?
Your text box appears to be a thing in the database.
Your workflow shows that after checking or unchecking the row’s checkbox you run a single step which is the ‘update JSON’ action for the JSON machine element called ‘modifyJSON A’
Unless I’m missing something. It looks like you are missing the workflow step to actually update the thing that is the source of what is displayed in your text box.
It may. There may be unforeseen limitations depending on exactly what the API returns. JSON machine works best when you control the data structure–storing and retrieving JSON ‘you make’.
Can you use the GraphAPI? or blockspring / zapier? I’d take a look at this thread.
If you have more questions about the Fb API, I’d start a new thread on that
I want to avoid hijacking the thread since others use it for support issues for JSON machine. I can answer your JSON-machine question.
JSON machine takes JSON text can can do some basic parsing on it and return values that you can use in your bubble application. If you want to take a stab at it, take a look at the demo app. You can even try copying it and making changes to the JSON data returned by the api
Hy jon2.
I am stuck in a simple task to readJson ! I am quite noob in Bubble and programing stuff´s… so… I would really apreciate a help. I am trying to repeat the example sample, but it doesn´t work…
Could you make a step by step tutorial ?
I have a lot of questions: how store the Json ( i believe it´s stored in a Data User called in the example " json", where I could see the Json texts… ) . It has to be a User type?
And after those stored json text, how do whe read it in a whay whe could ask for only some cells? I could not ready any value…
Sorry again for my noobish state… I has a lot of dificult to understand how to do whithout a step by step created for almost idiotic people !
Could not copy the example in the right way…
I’m a bit strapped for time, and it’s unlikely that I will get around to a step by step tutorial in the near future. You can try loading the demo application in “debug mode” from the editor and running the workflows in ‘step by step’ mode to see what’s going on. Good luck!
The text box is initially populated by an API call. The JSON reader is then reading the content of the textbox. My thought was to use the textbox as a place to store the updated json before sending the blob back through my API. Should I just be sending the updates directly to the API instead of trying to update the textbox?
Unfortunately, I can’t speak to what to do with your data into or out of the plug-in.
What I can say is that I don’t see any workflow step that actually does something to with the JSON you updated. From what I can tell, It looks like it is just sitting in the output state of the json machine element.
