Manipulating JSON Objects

Isokinetic spheres as a metaphor for parsing and stringifying data

Image of Hoberman’s isokinetic sphere expanding

Working with JSON objects can be a mystifying process. What exactly is a JSON object? What methods can we use on JSON objects, and when might we use them? For starters, JSON stands for Javascript Object Notation — JSON objects store data in key-value pairs, which can be accessed, manipulated, and transferred. There is some debate about the pronunciation, but any variation of “jason” or “jay-sahn” is acceptable. JSON objects are language-neutral or language-agnostic, meaning they are able to be read by virtually any browser or programming language. For the purposes of this article, we will focus on Javascript methods.

“JSON objects are just a way to store and transfer data”

There is no need to be intimated by JSON objects if you remember that they are just…objects. JSON objects are essentially just a way to store and transfer data. While the structure inside of a JSON object may vary, e.g. an array of objects, or a nested object, we can perform methods on and iterate through JSON objects just like we would with any other object. When we are working with JSON objects, we want to be able to transfer the data between the browser and server —in Javascript we have two essential methods to handle this process, JSON.stringify() and JSON.parse() object methods.

JSON.stringify()

JSON objects can take up thousands of lines of code. Transferring this data in its original form would not be

To understand the JSON.stringify() method, let’s use a metaphorical representation of what it means to stringify an object using Chuck Hoberman’s iconic children’s toy, the Hoberman sphere. If we ask a simple question — which version of this sphere would be easier to package up, store, and ship? The answer is the smaller, contracted version. By getting rid of extra whitespace and converting the object into a string, we make the data much easier to send. Here is an example of a stringified object that pairs iconic children’s toys with their creators.

[{"name": "Jenga","creator": "Leslie Scott"},{"name": "Candy Land", "creator": "Eleanor Abbott"}]

We can see that the object is an array of nested objects containing key-value pairs, separated by commas.

(Image description: a moving image of a isokinetic sphere shrinking)

Imagine that all of the connected nodes of the sphere are like all of the key-value pairs in a JSON object; the object is the same object, just in a different form. When we stringify a JSON object, we are simply making that data much easier to transport and store. Looking at the code for a stringified JSON object, it looks like a jumbled mess to us but is much more compact and easier to transport.

JSON.parse()

So the JSON object has arrived at its destination — it is now time for us to unpack the object so that we can access the data again. JSON objects need to be “unpacked” after they have been say, passed through a fetch request. This process of “unpacking” is calling “parsing” the data. Here is an example of the parsed JSON object — much easier to read.

{
   "famous toys": [

      {
         "name": "Jenga",
         "creator": "Leslie Scott"
      },

      {
         "name": "Candy Land",
         "creator": "Eleanor Abbott"
      }
   ]
}

We see that the extra space has returned to the object, such that it is much more readable for humans, and now we can select whichever value or key we want from the object.

(Image description: a moving image of an isokinetic sphere expanding)

Just like how this isokinetic sphere expands, when we parse a stringified JSON object, we are “unpacking” the object so that it returns to its normal size — from there, we can use Javascript to iterate through the object and grab different key-value pairs.

Photo by Timothy Dykes on Unsplash

JSONView Chrome Extension

If you are working with JSON objects in your programs, I highly recommend using the JSONView Extension for Google Chrome. This will automatically parse and beautify your JSON objects and make them more readable instead of a condensed mess of code.

While understanding JSON object methods can be confusing, metaphorical representations of the methods can help with comprehending data.