[New Plugin] JSON Machine Pro

The paid sequel to the original JSON machine.

Adds some very useful enhancements which are especially handy for
(a) working with JSON server-side
(b) storing a large number of states into a single JSON and saving to the user’s device

The original JSON Machine

Plugin Page

Demo Page:

Some benefits over JSON machine:

  • read/write unlimited JSON values in a single operation.
  • work with (read/write) JSON server-side OR locally.
  • Save to / Read from browser’s storage (session storage and local storage).
  • Basic ability to work with JSON-encoded arrays
3 Likes

Hey @jon2 , thanks for the plugin. Purchased and planning to work with this all week as I’m implementing a DB that was designed prior to choosing Bubble and is meant to work with arrays, so this saves me from ‘reinventing the wheel’.

I did want to ask if you had any pointers/examples re when local and server side implementations should be used. A bit of best practice.

And should I assume that what you wrote for the original plugin, “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.” still applies here?

Thanks,
Chris

1 Like

IMHO, JSON machine doesn’t fundamentally change the best practices of developing in bubble. It does gives you a simple method to work with JSON data structures without the need for custom code (via a custom plugin or the toolbox plugin). It does not change how bubble’s relational database works or give you some sort of advanced way to query the DB based on the content stored inside the JSON text.

That being said, you can use the server-side actions of JSON machine to perform repetitive actions which can be very useful when dealing with existing data structures to make them more useful.

Hey @jon2 , it could just be me but i’m finding the demo a bit difficult to follow. I’m trying to figure out how to read from the server, but the server demo seems focused on writing, with emphasis on read/write to the page. I’m not seeing values appear in the DB nor do I understand how to query the DB and parse the json.

Here’s where I’m at. I have manually entered a JSON value into a text field in my DB. I assume I need to have a “read/write JSON(bulk)” element on the page. At that point I’m lost. I don’t see anything in the demo that helps me to retrieve and parse a stored value. Is there anything in the workflow that must be done? I found the following but i’m not sure what is and isn’t necessary to be completed.

Update:
Taking a look at the custom states you have set, is “initial json” only to be used for writing, with the others for reading?

Important: Am I going to be able to access any of this dynamically inside of a repeating group?

I’m going to keep playing around with it but any additional documentation you might have would be helpful.

Thanks,
Chris

1 Like

The local and server-side demos are essentially the same except one is performed locally, the other is performed via a server-side workflow action. The output destination for each demo is the multiline field on the page. Nothing is saved to the database in the demo.

I’ve modified the demo page for clarity and make them more similar to each other so its clearer what the intent is. I renamed the confusing state that was called ‘initial JSON’ to just ‘JSON’ which is the both the source and the destination of the JSON for each workflow,.

The demo is built this way is on purpose and demonstrates how you can read from and write to the same JSON object using the same workflow action step, by simply modifying the read parameter,

What type of action (server or local) should you use?

Local JSON step to work with JSON client-side (such as saving a bunch of user data to a page state (or local storage). You could then ship that data to the database one time based on an action. thus saving a bit on sever overhead constantly writing to the DB.

Server-side actions would typically be associated with API workflows. So if you need to work with JSON on a recurring basis or as part of a multi-step API workflow to help speed up page responsiveness.

Side note about server-side
All bubble server-side actions (including this one) have a nice benefit of simplicity in how they are configured in workflows. This is because subsequent workflow steps after the action has completed have the ‘result of step x’ available to them and you can select the JSON output from the plugin in subsequent steps. The downside of building your workflows this way with client-side workflows is that you tie up your server resources and must wait for the step to complete on the server. You’ll notice that the demo takes a moment to complete because of this.

Take a look and compare how client-side and server side actions work with subsequent steps after the JSON machine action has completed. You can then save your data to the DB after this.

1 Like

Hey @jon2 thanks for answering those questions.

Are you planning to add how to read DB-stored JSON data to the demo in the near future? I can see that you have described some steps on the plugin page but it’s not enough detail for me to follow (visual learner). I want to use this and have a lot of uses for it but I’m struggling to implement. If a demo update is in the works I’d be better-off working on other parts of my app and coming back to implementing JSON machine in a couple weeks.

Also, can you access stored JSON data dynamically inside of a repeating group? If you can’t that does cut down the number of applications I have for the plugin.

Edit: For example, I learned in your comment here that I need a “read element directly in the RG row”. However, this element isn’t used in the demo (unless i’m blind) so I’m not sure how/when to fill in and draw upon these fields.

Thanks,
Chris

1 Like

So I’ve updated the demo again.

One of the benefits of JSON Machine Pro is the ability to dynamically change what actions the workflow step will take so you don’t have to have separately configured reads and writes (you can use the same workflow action step for both). However, the logic of how this works in this demo is hidden inside dynamic expressions that are placed in the workflow steps. I can see how it might be difficult to follow for someone unfamiliar with it.

So here’s what I’ve done:

  • I added a ‘database’ as a source and destination for both the local and server-side demos.
  • I separated the local and server-side workflows into separate folders inside the editor so you can see which belongs to which
  • I created 4 separate individual workflows for the server-side demo rather than sharing a single workflow (therefore relying on dynamic expressions and conditional steps in that workflow). And so the result is, depending on which dropdowns are selected, 1 of the 4 workflows will be triggered and you can see explicitly what the steps are doing without any sort of conditional logic buried inside the workflow with dynamic expressions.
1 Like

how can i use this in a repeating group? Is it even possible?

2 Likes

Hello @jon2 , I am having issues storing/reading JSON data from API workflow another website.

{
“calenderlist”: [
{
“calendarDate”: “20 Apr 21”,
“itemIndex”: 0,
“is_offDay”: false,
“durationSum”: [
4,
4
],
“params”: [
{
“class_name”: “CRE”,
“lesson_name”: “CRE L3”,
“class_color”: “#2d0ab7”,
“repetition”: 0,
“lesson_duration”: 4,
“lesson_spacing”: 0,
“lesson_flexibility”: 0,
“offDay”: false,
“classID”: “1618508662351x189962403075063800”,
“lessonID”: “1618508982175x529848368548282400”
},
{
“class_name”: “History”,
“lesson_name”: “His L1”,
“class_color”: “#1fd8d2”,
“repetition”: 0,
“lesson_duration”: 4,
“lesson_spacing”: 0,
“lesson_flexibility”: 0,
“offDay”: false,
“classID”: “1618508945961x100065777376559100”,
“lessonID”: “1618508967129x736282414062239700”
}
]
}
]
}

Here is what I have done:

Make sure the JSON you are supplying is valid. For example: The JSON you provided in your post fails the validation at JSONLint.com, so the plugin wouldn’t be able to process it.

… raw data

I think the JSON is OK this is how it looks in bubble. I had posted just a small part from the console.

By the way, what is the purpose of the field json text when reading data from API workflow?

Hey @jon2. First of all thanks for developing the plugin. It really helps when you need to bulk input a lot of data in a JSON! It may be me but I´ve tried to use the update action after populating a JSON and I´ve got the following error message:
JSON Machine Error
It is basically a flow helping users to create a resume…it adds up the info to a JSON and then generates a PDF to them. The first part is working fine but when an update is done I´ve got this…

I didn´t find any update workflow in the documentation to try to understand what I´m missing so I´d appreciate any input!

Have you verified your Raw JSON text by displaying it on your page? This error indicates that Javascript can’t parse it. You can google JSON validators. Based on the exact error, it appears like it may be blank.

@jon2 . I got the JSON validated as below:
JSON Validated

I´ve tried to add the JSON validated text directly in the JSON Input (to update) input in the action´s workflow and I´ve got the same error message!

I then tried to create a custom state with the exactly same JSON text and then added the state as JSON Input (to update) input in the action´s workflow and it worked:

My idea was not to use the custom state but it seems it solved the problem. I really didn´t catch up why I´ve got the error message…I just wanted to let you know about it.

I can’t speak to it specifically, but JSON machine relies on Javascript’s JSON.parse() method. If you are receiving an unexpected token error this is because the plugin is not receiving the correct (or any) JSON data when the plugin step is run. This could be for any number of reasons.

Bubble (and its underlying javascript) are event driven, runtime environments meaning the data needs to be ready before plugin workflow step is run so the plugin has something to work on. Even though workflow steps are sequential , sometimes assumptions are made that data is ‘ready’, when it is actually not.

In many cases, bubble should take care of that for you, meaning that predefined values ought to be loaded before page workflows are triggered. However, I’m not 100% sure how this works in each instance,. I would say deeper troubleshooting is needed to fully understand the issue. I do know the way that you call up data predefined page values, from the database, or external API values can affect how they load and are ready for workflow steps.

Thanks @jon2 . I really appreciatte you help. I´ve used the custom state along with the plugin and it is working fantastic. Congrats on the great plugin you´ve built!

1 Like

Folks, after paying for the plugin and reviewing the documentation, I’m excited by the possibilities, but positively flummoxed by how to implement. Can anyone with experience using this plugin offer up a simple 30 second video tutorial? I’m afraid the existing demo is simply not very helpful in getting oriented.

1 Like

Hi there,
I’m sorry that you didn’t find the demo page helpful. Question: did the demo page work for you in runtime at all? or was it just the editor that you found confusing ?

The demo crams a lot of features into the UI and isn’t likely how you’d set it up in real life. It’s simply to showcase all the features.

You mentioned in your other message that you are attempting to create a reusable element to parse text. This is a neat concept and I’d love to see how that works.

Have you tried creating a blank test page to play around and learn? I say this because embedding in a reusable element might add some complexity that can make it more difficult to get familiar.

JSON machine pro is powerful, but it can take some getting used to.

The big concept to ‘get’ is that there is (A) a workflow action to read or write JSON and there is (B) a companion page element where output JSON text (from the workflow action) is exposed , as well as other states and actions originate from. You need both to make it work.

I haven’t made an explainer video. Perhaps some other enthusiasts may have one.

2 Likes

Update:
I am now having some issues with the plugin not parsing JSON properly at runtime (or maybe I’m just mucking it up). Recorded another quick video in the hope that you or someone else here on the forum might be able to steer me in the right direction. Thanks!

Original Post:
Thank you for the quick reply, Jon. I am starting to learn my way around the plugin, but still struggling. It seemed to me that the demo is not functioning very well and gets stuck while executing some of the operations.

Mostly, it wasn’t immediately clear to me which of the settings in the editor are necessary and which are optional. For instance, I didn’t immediately realize that, when in read mode, one is supposed to specify the key but leave the value blank. It makes sense, just not necessarily intuitive why you have that option.

Likewise, I didn’t realize at first that one must specify a storage option and that the option needed to be enclosed in double quotes. (It seems that this is necessary.)

Now, I am able to perform some basic JSON parsing. However, I am still struggling with a number of things:

  • I’m curious why it’s necessary to execute a workflow to parse multiple JSON keys at once, while it’s possible to parse a single key with just the JSONRead element?
  • Also, when would it be preferable to use the JSONRead or JSONModify element as opposed to the workflow route?
  • When does the setting for “storage name” come into play? Might be a simple answer, but it’s not clear to me, since we access the parsed JSON by referring to the JSON Read element.
  • How are we to handle arrays? I have been toying with this. I set up my JSON read element on the page. I configured the action to parse an array of texts from a JSON blob supplied in an input and then tried to pass this list of texts to a repeating group. However, for the life of me, I can’t seem to get it to work when using the bulk action. (The simple JSONRead element method works like a charm.)

Lets try tackling these issues one at a time. Some basic troubleshooting:

Verify your JSON is Valid

From what I can see, it looks like your JSON might not be valid syntax. JSON Machine cannot do anything if the JSON is malformed. Your loom video is a bit too blurry to read, unfortunately so I can’t be sure. Have you tried copying the exact JSON in your step-by-step debugger and pasting into a JSON validator tool? (see google if needed for this).

Once we can establish that its valid JSON we’ll have a place to start from. After you’ve verified the JSON, Can you PM me the version-test link to your app and temp credentials (if required), I can take a look.

2 Likes