DEV Community

Brian Olore
Brian Olore

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

2 3

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.

Heroku

This site is built on Heroku

Join the ranks of developers at Salesforce, Airbase, DEV, and more who deploy their mission critical applications on Heroku. Sign up today and launch your first app!

Get Started

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay