Working with JSON in JavaScript
Tags: json, javascript, lodash, webdev
Published: 2020-01-31 14:14:11

---
title: Working with JSON in JavaScript
published: true
date: 2020-01-29 14:14:54 UTC
tags: json, javascript, lodash, webdev
canonical_url: https://brian.olore.net/wp/2020/01/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](https://lodash.com/) 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](https://lodash.com/docs#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:

```javascript
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](https://lodash.com/docs#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.

```javascript
// 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](https://lodash.com/docs#has) returns a boolean if the path provided exists.

```javascript
// 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.

```javascript
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?

The post [Working with JSON in JavaScript](https://brian.olore.net/wp/2020/01/working-with-json-in-javascript/) appeared first on [The Brian Olore Story](https://brian.olore.net).