For four years, I have been building Android applications that talk with other systems via JSON APIs - usually one-way or two-way handshakes between my app and a Drupal site or database using JavaScript Object Notation (JSON) as the common language.
I first started using JSON in the Spring of 2012 after taking a web development course. Before then, my programs were pulling in XML content files. They got the job done, but they felt a bit clunky.
When I started using JSON, I quickly found it to be more lightweight and user-friendly while still being about as flexible as XML.
I started by using jQuery for my JSON requests. As I started moving away from jQuery, I moved to writing requests simply with regular JavaScript.
While I initially started using callbacks for handling the result of a JSON request, I ran into the common issue with this method - that if you build up too many requests, callbacks ultimately became cumbersome and hard to maintain. As JavaScript matured, I then decided to learn promises and how to use them with async / await syntax, which was relatively new at the time. Taking that approach revolutionized how I wrote JSON-facing code and I gradually ended up replacing most of my purely callback-oriented code with async functions.
While I have been writing tutorials for about a year and a half, I have felt hesitant about writing one about how I approach JSON requests because a tutorial on it did not feel self-contained enough. Additionally, I was not sure where to pull sample JSON code from.
This changed once I discovered JSON Placeholder, which has free placeholder JSON you can pull from. This fake API resource proved to be perfect for my tutorial on Capturing and Displaying JSON with Vanilla JS.
In this tutorial, I start by introducing JSON to the uninitiated. I then give a brief primer on callbacks before explaining why they are often not ideal. I finally break down how to write a simple GET request and then wrap it in a promise.
One thing that surprised me about the tutorial was how my section on how to print the retrieved JSON became such a significant part of it. While writing it, I ended up introducing two pieces of JS syntax I recently started using to traverse a JSON object: for...of loops for arrays, and for...in loops for objects. I really find these great for traversing arrays and objects in a clean-looking, easy-to-read way.
You'll also see I make liberal use of try / catch blocks with my asynchronous calls, because once you go outside your own system, you just never know.
While I only cover GET requests in the above tutorial, you can use a similar approach for POST, PUT, and PATCH requests.
As systems continue to evolve, they will only get more communicative. JSON will often be their common language of choice as the big internet mash-up takes on more breadth. I realize a lot of applications rely on libraries or frameworks for server requests, but it can empowering to know how to write an easy-to-use JSON request simply with Vanilla JS.
I hope you found this article helpful. Thanks for reading!
Top comments (0)