JSON Checker — a JSON validator built in React
You are putting the finishing touches on your web application. Your test cases with mocked data passed with flying colors. Now you point your local app to a server providing real data, and BAM! Your app is broken. You know it isn’t your fault, and as all of us developers do, we blame someone else.
It must be the API.
After copying the server response from the network tab, you hop over to JSON Checker to quickly validate your JSON syntax and see if there are any errors.
Naturally, the backend developer forgot to escape quotes (again). This isn’t the first time it has happened, nor will it be the last.
To help him or her achieve the correct response, let’s shoot them a quick example for what the resulting JSON should look like…
Much better, now hopefully they can quickly repair the API and my app will will be operational once again.
JSON Checker
This mini-project is meant to help you quickly catch those pesky JSON problems. It’s meant to be simple and useful. Let me know if you have feedback, or feature requests.
Common Errors
Unescaped quotes in a value.
Invalid
{ "foo": "bar "baz"" }Fixed
{ "foo": "bar \"baz\"" }In the above example, double quotes in the value are escaped using the backslash. Keys don’t often have double quotes in them, but that could also cause a validation error.
2. Trailing comma at the end of collection
Invalid Collection (aka Object)
{ "foo": "bar", }Fixed
{ "foo": "bar" }3. Trailing comma at the end of a list
Invalid List (aka Array)
[ "foo", "bar", ]Fixed
[ "foo", "bar" ]Why did I build yet another JSON validator?
This was one of my first forays into building something from start to finish in React. My goal was to build a miniature utility application to become comfortable using the framework. I’ve often found that you can read the documentation and do tutorials for hours, but there is no substituting real development. JSONChecker was just a fun little mini-project so I could get that great feeling of completing something.
Was React necessary?
Nope. No framework was really needed for this application, I just felt that I should probably hone my React skills, as it seems that React is winning the framework war. While it remains to be seen whether Vue or a new contender comes along to take the crown, it was just a little experiment. I challenged myself to build it as fast as I could, with minimal references to the documentation. It was somewhat challenging, especially because I did not realize “refs” in React had changed in version 16. I eventually caved and had to reread how refs worked. Next time perhaps I will try without internet connectivity.
How are you hosting it?
I’m currently hosting this as a static site on Google Cloud Storage. My code is on Gitlab, and uses Gitlab-CI to deploy changes automagically after each commit. I had difficulty finding a good post on hosting a React app on Google Cloud Storage at the time. Maybe I’ll write one later and talk about my CI script.