DEV Community

Brian Olore
Brian Olore

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

Introducing jaycue – jq in your JS

jaycue logo
Shout out to my son for making the logo! Nice work Joseph!

Previously, I wrote about how useful lodash is when working with JSON in JavaScript. Then we took a look at how to deal with JSON from the command line using the power of jq.

It should come as no surprise where I’m headed here:
I want the power of jq filters in my JavaScript code!

Off we go

Instead of doing what I normally do: googling to see if it existed, then getting depressed that it wasn’t unique, I decided to just do it. I thought it would be a fun way to do a little test-driven development, which I kinda miss doing.

I figured that if I could find a way to write a test and run it against my code, grab the output, run it against jq proper, then compare the results, it’d prove that my code was doing what it should.

I’ve executed shell commands from Node.js before, so it seemed doable.

> const exec = require('child_process').execSync;
undefined
> let command = `echo '{"foo": 123}' | jq ".foo"`
undefined
> exec(command).toString();
'123\n'
Enter fullscreen mode Exit fullscreen mode

Cool. That was easy enough. So, in an attempt to make it more generic for a utility method that I can use in the tests, I should be able to do something like:

> let command = `echo '${json}' | jq "${filter}"`
Enter fullscreen mode Exit fullscreen mode

and pass any JSON string and any filter, then collect up the result, and compare!

My goal is to make a function that would allow me to perform an expectation like:

expect(myjq(jsonObject, filter))
    .toEqual(jq(jsonObject, filter));
Enter fullscreen mode Exit fullscreen mode

Check it out here: https://github.com/olore/jaycue/blob/master/tests/test-helper.js#L22

Now that we can test, let’s code!

Once that was in place, it was a matter of choosing which types of filters I wanted to support first. From the documentation, there are A LOT. I decided to go after the ones I would use most often, and expand from there. In particular, there was a single use case I wanted to solve. But to get there, I had to start with the basics.

The Basic filters could be serviced by lodash.get. For instance, both versionString and .versionString will work with

lodash.get("versionString");
Enter fullscreen mode Exit fullscreen mode

I would just need to chop off the leading period. Something like “name.firstName” would also work with lodash.get.

From there, I started down the list of Basic Filters. Adding in Array indexing and eventually Select filtering, which was the last piece of the puzzle for the use case I had in mind.

Here it is:

{
  "applicants": [
    {
      "identities": [
        {
          "type": null,
          "number": null
        },
        {
          "type": "SSN",
          "number": "987651234"
        }
      ]
    }
  ]
}

Enter fullscreen mode Exit fullscreen mode

We need to get the number whose type is “SSN”, if it exists.

We had code that looked like this:

const ssn = get(data, 'submit.applicants[0].identities', [])
  .reduce((accum, identity) => {
    if (identity.type === 'SSN' && identity.number) {
      accum = identity.number;
    }
    return accum;
  }, '');

Enter fullscreen mode Exit fullscreen mode

Whereas, a jq command like this would work:

cat test.json | jq '.applicants[0].identities[] | select(.type=="SSN") .number'
Enter fullscreen mode Exit fullscreen mode

Now that we had select functionality, the above JavaScript code could be replaced with:

const ssn = jq(data, '.applicants[0].identities[] | select(.type=="SSN") .number');
Enter fullscreen mode Exit fullscreen mode

And just like that, we’re successful!

Wrapping up

Please go install jaycue and let me know what you think:

npm install jaycue
Enter fullscreen mode Exit fullscreen mode

Checkout some more great JSON tools:
node-jq
JSONView (Chrome)
JSONovich (Firefox)

A big shout-out to my 13yo son for making the jaycue logo! It was a true, family effort. Nice work Joseph!

I hope you have found this useful. I’d love to hear about what features of jq you think should be added next. And as always, I’d love to have you contribute to the jaycue project!

The post Introducing jaycue – jq in your JS appeared first on The Brian Olore Story.

Top comments (0)