DEV Community

Brian Olore
Brian Olore

Posted on • Originally published at brian.olore.net on

Working with JSON in JavaScript

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
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

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

The post Working with JSON in JavaScript appeared first on The Brian Olore Story.

Oldest comments (0)