JSON Crack

This is a quick example. On the left-hand side, we have JSON code using this online editor JSON Crack. It also validates your JSON if there is any syntax error. It will also raise some errors that specific colon or comma is missing. And on the right-hand side, you can see that there is a graphical representation of your JSON, starting with we have the squad named the hometown form. These are all global values. Members are actually a list of different indexes. In members, it will describe each of the index as a separate block. It is pretty convenient if you have a complex JSON structure. With the help of this tool, you can search for different blocks, or we should call them nodes and make decisions accordingly.

It has some features. As I mentioned, it supports JSON validation. On top of that, we can search the contents of the JSON data and go directly to the desired block to obtain some key-value pairs directly from that desired block. One good thing about this tool is that once the graph or the visual representation is generated, we can directly download it into a jpg or png image. We can use that JSON image directly in our documentation, proof of concepts, and also on our websites. It’s pretty helpful for the user. For example, you have a custom application where it supports a specific JSON schema and you want to explain how the schema works within the application. So when you use the JSON data as a PNG image in your POC, the user can get a pretty good idea of how the JSON works in your application. The last one is that it handles complexity as a JSON structure, structures request,s and responses for data analytics. It means that if you have 10,000 lines of JSON code, it will not throw any error that is quite big, or it cannot enter into an image or some representation. It will create a JSON structure for you into graphs without complaining about anything, but the graph would be quite complex. And that’s why the search feature is convenient. I’ll show you afterward how it can work.

There are two ways to set up. The quickest way is to use the online editor jsoncrack.com. Or you could use their public Docker image to run it locally on your local. I’ll be using the docket setup in this demo.

Okay, let’s go to the demo. I’ll be running a Docker container using the JSON Crack Docker image. As you can see, how we are having a landing page for JSON Crack. It also visualized an example as well as different features. Let’s go straight to the editor. So this is the JSON code, let us use a different one.

As you can see, on the right-hand side, it has immediately generated a graph for this demo. On the left-hand side, we have a demo project as a global block. Within that, we have ID region, and VTC ID as Google key-value pairs. Other than that we have a subset of blocks – demo app one, app two, app three, and so on. Each of them has a different type of values like this one, these are the global ones. One thing is that if you click one of the nodes, you can just go ahead and copy-paste or use it according to your requirements.

We have different demo apps here. You can see that each of them has different values. If I want to quickly identify what kind of image the demo app two is using, I can directly see it with my graphs here. Of course, you can also visualize from the JSON data itself, but if we are talking about a huge JSON structure, that could take you a while to figure out where the specific block is. It will also support different blocks. Since this is another block in the worker, and if you just search here, this one, so it is a nested JSON block within a JSON block, and it has shown the desired count of one. This was pretty straightforward with about 50 lines of JSON code.

What happens if I have 1000 or 2000 lines of code? Let’s see. For this, I’ll be using a JSON Syntax for the AWS CDK, where we are using one for one of our clients. Before copying it and pasting it’s about 1000 or 1100 lines of code.

As you can see, it has generated a complex representation. Here, you can see that from this block, it has an inheritance into different JSON blocks. You can see the complexity of this JSON, and it has generated it into a graphical representation. Here, if I want to go to a specific block, rabbit MQ, for example, it will point us to that specific block. From there, we can just check for rabbit MQ. We have these types of key-value pairs stored. We can just go ahead and copy this in our clipboard and make some changes and come back here and update the diagram accordingly.

What if we want to download this image? It’s gonna be transparent. Actually, the diagram is quite lengthy. If we open this up, you can see that it’s quite lengthy. We have to zoom in a couple of times in order to visualize your data. But in most cases, we don’t have this huge JSON context. But we can have this tool work with our JSON if we have a reasonable amount of JSON data, and it will cope according to the JSON Syntax and request and it will generate the diagram accordingly. Also, I have one more example. This was a sample one, as you can see that it has around 14 lines of JSON code and it has generated pretty, you know, readable diagrams and it is easier to consume from the users and more.