# Feature Showcase #1: Related Values

> Welcome to the first edition of a weekly showcase of some of the most useful features in [JSON Hero](https://jsonhero.io). Be sure to checkout our [Introduction to JSON Hero](https://blog.jsonhero.io/introducing-json-hero) first to find out what it's all about.

Stop me if this sounds familiar: you are working with JSON data and your code throws a `TypeError` or maybe you thought the field you are accessing only contains strings but one random instance has a number or array of strings.

Tracking down these types of issues in JSON can be cumbersome.  It doesn't help that this is the type of error message you are presented with:

```
TypeError: Cannot read properties of null (reading 'toUpperCase')
```

### Related Values to the rescue

JSON Hero makes finding these edge cases really easy using a feature called Related Values, which displays a grouped list of all other values at the selected path:

![Screen Shot 2022-05-13 at 10.08.26.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1652432912454/9ikpYonJG.png align="left")

You can also expand each related value and navigate to it's path:

![RelatedValuesOpen.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1652433216607/4XUJrX4ic.gif align="left")

Related Values really shines when you are looking for `undefined` or `null` values at a specific path:

![Screen Shot 2022-05-13 at 10.17.03.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1652433436877/kqx42fGvz.png align="left")

As you can see above there are 6 records that don't include the `Designer` array (and 14 that do).  This works for `null` values as well:

![Screen Shot 2022-05-13 at 10.18.33.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1652433528248/OroPY4ls9.png align="left")

It also gives you the ability to quick preview many different values efficiently:

![ScreenFlow.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1652433708896/9WCiZBINC.gif align="left")

### Objects in arrays in objects in arrays

Related Values comprehensively traverses your JSON to find all possible related values for the currently selected path. For example, let's say you have the following JSON data:

```json
[
  {
    "records": [
      {
        "images": [
          { "url": "https://i.imgur.com/HJRk15p.jpeg" },
          { "url": "https://i.imgur.com/SXVRTOW.jpeg" }
        ]
      }
    ]
  },
  {
    "records": [
      {
        "images": [
          { "url": "https://i.imgur.com/ABSS8nn.jpeg" },
          { "url": "https://i.imgur.com/sNVVC5i.jpeg" },
          { "url": "https://i.imgur.com/Gu9v4OW.jpeg" }
        ]
      },
      {
        "images": [
          { "url": "https://i.imgur.com/U7zFOe9.jpeg" }
        ]
      }
    ]
  }
]
```

> You can test this out on JSON Hero [here](https://jsonhero.io/j/kpfinxlP0i2z?path=%24.0.records.0.images.0.url)

When you select `$.0.records.0.images.0.url` you will see all 6 other Related Values because we basically "wildcard" the array parts (i.e. `$.*.records.*.images.*.url`).:

![Screen Shot 2022-05-13 at 10.36.02.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1652434573040/r3BBJsy2D.png align="left")

> If you liked this feature please [give us a ⭐️ on GitHub](https://github.com/jsonhero-io/jsonhero-web), or let us know what you think by reaching us on [Twitter](https://twitter.com/json_hero) or [Discord](https://discord.gg/ZQq6Had5nP).



