New FREE Plugin - JSON Machine. Work with JSON direct on the page

marcosandrepennacout · 2021-03-07T20:08:10.718Z

As soon no awsers has been given to me, I returned after smashing my head in the screen until it works!
To take values within cells that are inside cells you need to go deeper and deeper into the hierarchy, obviously. But doing this isn’t as easy as it seems… so I’m going to play my workflow.

At each step in the hierarchy we must create a Group, or a Repeating Group to select the search space. So within this group we insert a ReadJson.Having taken the first level, we took another group or repeating group inside the first one.

Going into detail my assembly was like this:
1st group with User Type=User, Data Source= current User.
2nd within this Group we created a Repeating Group that will receive the ReadJson’s “Json variable from the beginning of the hierarchy” +get listOfJsonstexts" and a text with “current cell text” to get the value taken back.
3nd As I select the indexes that should be searched for by a Dropdown, I added within the latter a Repeating Group, type of content=text, and data source=Multidropdown Value’s.
4nd Still within this Repeating Group I put a readJson with key=current cell and json text=readJson of this same Repeating group + get list of Json texts.
5nd A Text will read this readJson value to draw it on the screen. A Text will read this readJson value to draw it on the screen.
6nd At each step in the hierarchy we add a Repeating group within the other with a readJson for each and a Text returning the d oReadJson values of the cell. At each step in the hierarchy we add a Repeating group within the other with a readJson for each and a Text returning the ReadJson values of the cell At each step in the hierarchy we add a Repeating group within the other with a readJson for each and a Text returning the d oReadJson values of the current cell

I hope this could help the comunitty, if yes, leave a Heart!

ezhang · 2021-03-18T15:39:39.423Z

Hi @jon2 ,

Thanks for the awesome plugin!

I’m trying to use the plugin to read something like this:
[{“Sales":"ezhangtest@gmail.com”,“Monthly Sale”:100000,“Month”:6},{“Sales":"ezhang@test.com”,“Monthly Sale”:200000,“Month”:4}]
In your example app, there is already a key “member” for the nested JSON text for the readjson element. Can you please provide some insights of how to read the JSON text above without a key?

Thanks,
Evan

jon2 · 2021-03-18T19:54:32.796Z

ezhang:

Can you please provide some insights of how to read the JSON text above without a key?

JSON Machine uses text which defines an object in Javascript. What you’ve got here is text which defines an array and JSON machine cannot work with that natively. You could try merging your array’s text with the necessary text to convert the array into an object.

something like:

{ "examplearraykey" : + ** your array text ** + }

which should produce this as the output:
{ "examplearraykey" : [{“Sales":"ezhangtest@gmail.com”,“Monthly Sale”:100000,“Month”:6},{“Sales":"ezhang@test.com”,“Monthly Sale”:200000,“Month”:4}] }

This has now been formatted as the proper JSON object, which can be worked on with JSON machine, just target ‘examplearraykey’.

ezhang · 2021-03-18T20:07:44.652Z

Hi @jon2

Thank you so much for your suggestion! That makes sense!

Evan

florian.briand · 2021-04-28T21:07:40.179Z

Hey @jon2 !

Thanks for the plugin, it is really good ! Except that I’m encountering a bug in the Update action, on the JSON_arr field which is expected as json_arr in the code
Could you fix it ?

florian.briand · 2021-04-28T21:12:26.989Z

And there is also a bug in the parseArrayOfJSONs function, where you are using for (let jsonItem in arr) instead of for (let jsonItem of arr) (so you’re iterating on indexes instead of array’s items themselves )

jon2 · 2021-04-28T21:58:13.226Z

Hi Florian,

Nice catch. I’m thinking I don’t code enough in ES5 to use that somewhat-confusing nomenclature reliably I’m surprised this hasn’t been mentioned before!

I’ll look at it.

jon2 · 2021-04-29T17:43:20.368Z

I’ve pushed a fix. Take a look and let me know if you have any problems

florian.briand · 2021-05-01T11:00:49.172Z

It seems ok, thanks !

I’ve published a complementary plugin, allowing to use JSONata on a JSON ! Feel free to enjoy it

[New Plugin] Simple JSONata : easily query and transform your JSON Showcase

This plugin allow to use JSONata syntax to query or transform a JSON. I made it to perform operations on complex data structures. For example, if I have list of values (from inputs in Repeating Group for example), I use JSON Machine to store all the data, then perform JSONata query/transformation to, for example, sum the values. More examples are available on the demo page. It is very usefull combined with other JSON plugins like JSON Machine. This plugin offers a better stability and a simp…

florian.briand · 2021-05-01T11:43:20.841Z

I’ve found another bug, in the readJSON operator, in the function getValue(key) function declaration.

The following “if / else” (used when you have a key containing some . separators) is not working to get “non object” results.

		if (key.split('.').length > 1){
			let foundObj = obj;
			for (let thisKey of key.split('.')){
				if (typeof foundObj[thisKey] == 'object'){
					foundObj = foundObj[thisKey]
				}
				else {
					return foundObj;
				}
			}
			return foundObj;
		}

Indeed, if the last item targeted by the key is not an object (so if typeof foundObj[thisKey] == 'object' is false), it’s the foundObj which is returned (which is the object from the previous iteration) instead of foundObj[thisKey].

So, in fact, I think you should do a return foundObj[thisKey]; here. (I think the return is here to interrupt the loop if you reached a non-object point ?).

jon2 · 2021-05-01T12:23:28.365Z

Are you experiencing an unexpected behavior at runtime?

florian.briand · 2021-05-01T13:17:38.171Z

Yes, for example :

Input JSON :

{
  "firstLevel": {
    "secondLevel": "value"
  }
}

Key : firstLevel.secondLevel

Expected result :

"value"

Current result :

{
  "secondLevel": "value"
}

basel.3adel · 2021-08-21T21:40:18.029Z

Great plugin!

I’m facing a similar issue because of the dot thing (.) In the key itself

I have an key called ‘topics.topic-level1’ that the plugin doesn’t recognize as a key or return any values … this an external service and I don’t have control of the key naming conviction. Tried to add " or ’ but didn’t work as well.

Any solution for that?

mgozalbo · 2021-09-06T18:45:56.410Z

Hi all!
I’ve published a new plugin after fighting a lot with JSON Machine and other json related plugins. I think I took all the best things in one plugin, which easily stores and reads json data as well as support JsonPath format for reading.

Bubble

JSON Manipulator Plugin for Bubble, by Opground

JSON Manipulator Plugin page on Bubble, by Opground. Add JSON Manipulator in one click to your app. Bubble lets you build web apps without any code.

@jon2 Feel free to update JSON Machine plugin with my code if you find something useful.
Have fun!

jon2 · 2021-09-08T14:35:04.442Z

Great to see the community working to improve JSON support!

mgozalbo:

Feel free to update JSON Machine plugin with my code if you find something useful.

I may do this if I find the time. JSON machine was initially built out of a personal need but clearly has many, many more use cases and a lot of room for improvement and I’m glad to see an effort made to do just that!

I’ve since stopped active development of JSON machine and am only making bug-fix updates and even that isn’t where I’d like it to be.

Congrats on the launch!

ricky · 2022-02-15T00:34:20.679Z

Does anyone have instructions on how to just display a list in RG from a field thats holding the json, i’m not having any luck, not sure why it would be so difficult to do a simple task.

jon2 · 2022-04-30T13:45:13.841Z

(better late than never) have you looked at the example app? this shows a repeating group that is sourced from a JSON. If you target a readJSON element to an array value it will produce a list of text, number, etc value that can be read by an RG

JSON machine will only work with JSON data that is structured as an Array (list) to produce a list in bubble. It won’t know what to do with a bunch of unorganized key/value pairs.

jon2 · 2022-04-30T13:53:27.438Z

Hi there,

New update:
Improved ability to get nested values from JSON. This was only partially functional before.
Example:

With the JSON
{ “hair” : { “color” : “brown” } } }

you can now access the value for color by using hair.color as your key to read from.

the example app now shows the source JSON in ‘pretty print’ to make it easier to follow along

ihsanzainal84 · 2022-06-22T09:10:01.793Z

Maybe it’s just me but even when following your template, I can’t modify any json values.

Is this a bug or am I doing it wrong?

JohnMark · 2022-08-19T15:13:48.456Z

@jon2 some doc indicate “json machine pro” isn’t working with Backend Workflows. It is working?