Feature Showcase #1: Related Values

Feature Showcase #1: Related Values

Uncover edge cases in your JSON data

Eric Allam's photo
Eric Allam
·May 13, 2022·

2 min read

Welcome to the first edition of a weekly showcase of some of the most useful features in JSON Hero. Be sure to checkout our Introduction to 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')

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

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

RelatedValuesOpen.gif

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

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

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

ScreenFlow.gif

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:

[
  {
    "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

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

If you liked this feature please give us a ⭐️ on GitHub, or let us know what you think by reaching us on Twitter or Discord.

 
Share this