Feature Showcase #1: Related Values
Uncover edge cases in your JSON data

Founder at Trigger.dev, the open source background job framework. Creator of jsonhero.io.
Search for a command to run...
Uncover edge cases in your JSON data

Founder at Trigger.dev, the open source background job framework. Creator of jsonhero.io.
No comments yet. Be the first to comment.
We’ve tackled two major headaches we’ve had when using APIs: Figuring out what’s going wrong when using an API is painful Slow endpoints can dramatically reduce the speed of your site You only need to add a couple of lines of code in your JavaScrip...

The GitHub REST API is a useful behemoth, currently sitting at 878 endpoints (by our count) and growing. It contains all sorts of useful functionality, from searching for code to rendering markdown, and then some. You can also use it to interact with...

TLDR: this will take you less time than you think

API Hero in 60 seconds 6 months ago we released JSON Hero, in a bid to 10x the experience of JSON files over conventional methods. Today we're releasing API Hero, in a bid to 10x the experience of integrating APIs into the frameworks you know and lo...

It's been a little under 2 months since we launched JSON Hero and it's been received delightfully by the developer community. It's been visited by over 30k people who've created a total of 31k JSON documents. Our GitHub repo has reached 3.3k stars an...

API Hero blog
7 posts
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:

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

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

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:

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

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).:

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.