Tutorial Highlights & Transcript
00:00 - What is JSON Crack
JSON Crack is a tool to visualize your JSON into graphs. It just creates a diagram out of your JSON, which will help you in decision-making as well as what kind of key-value pairs you have in a specific block. It also has an online editor, if you go to this website, jsoncrack.com. You can instantly get started using online editors.
01:17 - JSON Structure
02:20 - Features of JSON Crack
04:10 - Setup
04:32 - Demo of JSON Crack
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.
Yasir is a DevOps Support Engineer at nClouds. He has multiple technical certifications including AWS Certified Solutions Architect - Associate and Certified Kubernetes Administrator.