jsonata-js / jsonata-exerciser

Playground for trying out JSONata expressions

JSONata Exerciser

This allows you to test JSONata expressions against a JSON input structure. Paste the JSON data into the left hand pane, and type JSONata expressions into the top right pane. The result will appear below.

Running the app locally

• npm install
• npm start

The app is also available at try.jsonata.org

jsonata-exerciser's Issues

Exerciser highlight error

While trying this expression from the docs in the exerciser:
Account.Order.Product { Product Name: {"Price": Price, "Qty": Quantity} }
The highlight seems to break for Price. On the other hand this expression does not break the highlight:
Account.Order.Product { Product Name: {'Price': Price, "Qty": Quantity} }

Am I doing something wrong? Any plans to fix it?

Thanks

Feature request: UI for passing bindings object

I'm loving this library ever since I discovered it. Kudos to the developers.

Often, I spin up a JSONata exerciser tab to debug issues in my expressions, and most of the times I find the need to pass bindings object with multiple properties, and I end up declaring the variables individually in the JSONata expression itself. It would be nice and cool to have a UI to input the bindings as well.

error:0308010C:digital envelope routines::unsupported (deprecated md4)

Could you please bump webpack (>=5.54.0) to get rid of following error?

(node:298825) [DEP0111] DeprecationWarning: Access to process.binding('http_parser') is deprecated.
(Use `node --trace-deprecation ...` to show where the warning was created)
Starting the development server...
Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:67:19)
    at Object.createHash (node:crypto:130:10)
    at module.exports (/usr/local/jsonata-exerciser/node_modules/webpack/lib/util/createHash.js:90:53)
    at NormalModule._initBuildHash (/usr/local/jsonata-exerciser/node_modules/webpack/lib/NormalModule.js:386:16)
    at handleParseError (/usr/local/jsonata-exerciser/node_modules/webpack/lib/NormalModule.js:434:10)
    at /usr/local/jsonata-exerciser/node_modules/webpack/lib/NormalModule.js:466:5
    at /usr/local/jsonata-exerciser/node_modules/webpack/lib/NormalModule.js:327:12
    at /usr/local/jsonata-exerciser/node_modules/loader-runner/lib/LoaderRunner.js:373:3
    at iterateNormalLoaders (/usr/local/jsonata-exerciser/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
    at iterateNormalLoaders (/usr/local/jsonata-exerciser/node_modules/loader-runner/lib/LoaderRunner.js:221:10)
/usr/local/jsonata-exerciser/scripts/start.js:11
  throw err;
  ^

using Fedora 36, node v16.14.0, OpenSSL 3.0.2

Autocomplete

It would be awesome to see the editor have autocomplete. Seems like there is a package you could leverage here with a little bit of tweaking: https://github.com/Allam76/jsonata-code-completion

Versions dropdown not loading on try.jsonata.org due to CORS error

Hello!

The versions dropdown isn't loading on https://try.jsonata.org

From what I can tell, the versions are fetched here:
https://github.com/jsonata-js/jsonata-exerciser/blob/master/src/Exerciser.js#L100

The request has a CORS error from the API endpoint.

GET https://c40c296d.us-south.apigw.appdomain.cloud/api/versions
Status500
Internal Server Error

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://c40c296d.us-south.apigw.appdomain.cloud/api/versions. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

Otherwise, the exerciser is still working fine as it seems that the jsonata.min.js loads the most recent version if no version is passed.

Browser: Firefox v87 (latest at the time of writing)
OS: Ubuntu (Linux)

npm install fails

Fails on installing canvas dependency

npm ERR! code 1
npm ERR! path /Users/me/Projects/Other/jsonata-exerciser/jsonata-exerciser/node_modules/canvas
npm ERR! command failed
npm ERR! command sh -c node-pre-gyp install --fallback-to-build
npm ERR! Failed to execute '/usr/local/Cellar/node/19.3.0/bin/node /usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js configure --fallback-to-build --module=/Users/me/Projects/Other/jsonata-exerciser/jsonata-exerciser/node_modules/canvas/build/Release/canvas.node --module_name=canvas --module_path=/Users/me/Projects/Other/jsonata-exerciser/jsonata-exerciser/node_modules/canvas/build/Release --napi_version=8 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v111' (1)
npm ERR! node-pre-gyp info it worked if it ends with ok
npm ERR! node-pre-gyp info using [email protected]
npm ERR! node-pre-gyp info using [email protected] | darwin | x64
npm ERR! node-pre-gyp WARN Using request for node-pre-gyp https download
npm ERR! node-pre-gyp info check checked for "/Users/me/Projects/Other/jsonata-exerciser/jsonata-exerciser/node_modules/canvas/build/Release/canvas.node" (not found)
npm ERR! node-pre-gyp http GET https://github.com/node-gfx/node-canvas-prebuilt/releases/download/v2.6.1/canvas-v2.6.1-node-v111-darwin-unknown-x64.tar.gz
npm ERR! node-pre-gyp http 404 https://github.com/node-gfx/node-canvas-prebuilt/releases/download/v2.6.1/canvas-v2.6.1-node-v111-darwin-unknown-x64.tar.gz
npm ERR! node-pre-gyp WARN Tried to download(404): https://github.com/node-gfx/node-canvas-prebuilt/releases/download/v2.6.1/canvas-v2.6.1-node-v111-darwin-unknown-x64.tar.gz
npm ERR! node-pre-gyp WARN Pre-built binaries not found for [email protected] and [email protected] (node-v111 ABI, unknown) (falling back to source compile with node-gyp)
npm ERR! node-pre-gyp http 404 status code downloading tarball https://github.com/node-gfx/node-canvas-prebuilt/releases/download/v2.6.1/canvas-v2.6.1-node-v111-darwin-unknown-x64.tar.gz

Replace tabs with space characters

When formatting or typing the input data or expression, there can be a mix of tabs and spaces used for indentation. This causes some formatting issues when pasting example data/expressions into other online sites like Slack, Stack Overflow, and Google groups. Would it be difficult to always use 2 spaces when auto-indenting, or even when typing a tab to manually indent?

The textareas in the exerciser page provide intelligent code handling via the codemirror npm module. According to the online docs, keys like tab can be mapped to a function, like so:

Common example: map the Tab key to insert spaces instead of a tab character.

editor.setOption("extraKeys", {
  Tab: function(cm) {
    var spaces = Array(cm.getOption("indentUnit") + 1).join(" ");
    cm.replaceSelection(spaces);
  }
});

The goal (for me) is to ensure that all 3 textareas do not contain any tab characters. But in general, more consistent indentation handling would be a nice enhancement as well. For instance, in most IDEs (and the ACE editor) hitting the tab key anywhere in front of a line of code causes it to increase indention levels -- while hitting shifttab decreases the indention level. The current exerciser site does not work this way.

The example code above implies that if several lines were selected, they would be replaced by spaces. Obviously, this is not a desirable behavior. Instead, each of the selected lines should be indented one more level -- probably a much more involved piece of code. I'll see if I can find examples of indenting multiple lines, and add them to this issue.