Working with JSON in JavaScript

January 29, 2020 | By Brian | Filed in: work.

As software developers, we spend a lot of time parsing JSON, like, A LOT. There are many tools and libraries available to make our development lives easier. This is the first of a 3 part series where I’ll dig a bit into tools and libraries that I use every day.

Enter lodash

lodash is a phenomenal JavaScript library that provides incredibly useful functions, most of which should exist in the standard library. So what can it do for JSON? Let’s take a look at the get, set and has functions.

First up, lodash.get is the standard for picking through JSON data, or, in fact, any JavaScript object. It allows for easy and safe traversal of nested objects and arrays. get is “safe”, meaning you won’t get the dreaded Cannot read property 'whatever' of undefined that can occur when some nested properties are missing. In this case, get will simply return undefined.

Let’s look at some examples:

const object = {
  "blog": {
    "name": "The Brian Olore Story",
    "articles": [
      {
        "title": "First Post",
        "published": true,
        "tags": ["new", "blog", "post"]
      },
      {
        "title": "Why you should TDD",
        "published": false,
        "tags": ["tdd", "dev"]
      }
    ]
  }
}

// simple path traversal
_.get(object, 'blog.name');
// => 'The Brian Olore Story'

// traverse into arrays
_.get(object, 'blog.articles[1].tags');
// => ["tdd", "dev"]

// path doesn't exist
_.get(object, 'blog.name.rating');
// => undefined

// provide a 3rd parameter to be returned if any part of the path is undefined
_.get(object, 'blog.rating', 100); 
// => 100

Next, let’s take a look at lodash.set. set works the same way as get, but will modify the object passed in. The 3rd parameter is a value to insert/update into the given object. Similar to get, it’s “safe”, meaning: if a portion of the path doesn’t exist, it will be created. Remember: set mutates the object passed in.

// change the blog name
_.set(object, 'blog.name', 'My Story');

// set the rating (that didn't previously exist)
_.set(object, 'blog.rating', 88);

// create a whole new path
_.set(object, 'blog.followers.count', 21);

Finally, while slightly less used and often overlooked, lodash.has returns a boolean if the path provided exists.

// has a name?
_.has(object, 'blog.name');
// => true

// has a rating? (that doesn't exist)
_.has(object, 'blog.rating');
// => false

// has a deeply nested value (that doesn't exist)
_.has(object, 'blog.followers[0].name');
// => false

Another great thing about lodash is that you can choose to bring in all lodash functions, or just individual functions.

const _ = require('lodash');  // all lodash functions (npm install lodash)

const _get = require('lodash.get');  // just the get function (npm install lodash.get)

What tools do you use to traverse the gobs of JSON data we deal with every day?


One comment on “Working with JSON in JavaScript

  1. […] I wrote about how useful lodash is when working with JSON in JavaScript. Then we took a look at how to deal with JSON from the […]

Leave a Reply

Your email address will not be published. Required fields are marked *