Capture and Display Your JSON Data with Vanilla JavaScript
The tech world is replete with interoperable systems that communicate data back and forth. While each system has its own inner workings, two systems can talk to each other if they both use a common language. One of these languages is JSON (JavaScript Object Notation), a lightweight format for storing and sending data that consists of key-value pairs.
As a simple example, you may have an app that needs to download the following JSON data on two books from a content management website. The books may look like this:
{
"books":[
{
"title":"A Wrinkle in Time",
"author":"Madeleine L'Engle"
},
{
"title":"The Great Gatsby",
"author":"F. Scott Fitsgerald"
}
]
}One of the cleanest ways I have found for capturing JSON data has been with JavaScript promises. A promise is an object that will produce a result at some point in the future. If the promise is resolved, the result will be the requested value. If the promise is rejected, the result will be a failure message with a reason that can be printed.
Tutorial Steps
In this tutorial, we will ultimately build a method for capturing JSON data using promises and then print our JSON to the page in a readable way. To work up to it, we will do the following:
