JSON Parse & Filter

A simple JSON parser and that acts like jq and can be used in the browser.

ALL processing is done client side using JavaScript. No data is sent to any server nor stored in local or session storage.

JSON Input

Filter Expression

Filtered Output

---

Functions Supported

• String.parseInt() can be called on Strings to convert a value to a Integer.
• String.parseFloat() can be called on Strings to convert a value to a Float.
• String.json() can be called on Strings to parse it into an Object.
• Object.toString() can be called on Arrays, Objects, & Numbers to convert it to a String.
• Object.key() can be called on an Object to create a new Array with the Object’s key names as elements.
• Object.values() can be called on an Object to create a new Array with the Object’s values as elements.
• Array.sort() can be called on an Array to Sort it.
• Array.reverse() can be called on an Array to Reverse it.
• Array.flat() can be called on an Array to create a new Array with all sub-array elements concatenated into it.

---

Example Filter Expressions

Sample JSON Input

{
  "people": [
    {
      "name": "John",
      "city": "Melbourne"
    },
    {
      "name": "Greg",
      "city": "Hobart"
    },
    {
      "name": "Ben",
      "city": "Adelaide"
    }
  ],
  "metadata": [
    {
      "key": "version",
      "value": "1.1"
    },
    {
      "key": "tags",
      "value": ["people", "cities", "json", "filtering"]
    }
  ]
}

Example - Object Key

Filter

people

Output

[
  {
    "name": "John",
    "city": "Melbourne"
  },
  {
    "name": "Greg",
    "city": "Hobart"
  },
  {
    "name": "Ben",
    "city": "Adelaide"
  }
]

Example - Array Index

Filter

people[0]

Output

{
  "name": "John",
  "city": "Melbourne"
}

Example - Negative Array Index

• -1 means the last Array element.
• -2 means the second to last Array element.
• etc.

Filter

people[-1]

Output

{
  "name": "Ben",
  "city": "Adelaide"
}

Example - Nested Object Key

Filter

people[0].city

Output

Melbourne

Example - Object Key from ALL Array Elements

Filter

people[].name

Output

[
  "John",
  "Greg",
  "Ben"
]

Example - New Object with Custom Keys

Creates a new Object with the specified custom keys. The values for these key are expressions that will be evaluated.

Filter

{names: people[].name}

Output

{
  "names": [
    "John",
    "Greg",
    "Ben"
  ]
}

Filter

people[]{person: name, home: city}

Output

[
  {
    "person": "John",
    "home": "Melbourne"
  },
  {
    "person": "Greg",
    "home": "Hobart"
  },
  {
    "person": "Ben",
    "home": "Adelaide"
  }
]

Filter

metadata[]{value}

Output

[
  {
    "value": "1.1"
  },
  {
    "value": [
      "people",
      "cities",
      "json",
      "filtering"
    ]
  }
]

Example - String.parseInt()

Calls the parseInt() method which parses a string argument and returns an integer in base 10.

• MDN Web Docs - parseInt()

Filter

{result: metadata[0].value.parseInt()}

Output

{
  "result": 1
}

Example - String.parseFloat()

Calls the parseFloat() method which parses a string argument and returns a floating point number.

• MDN Web Docs - parseFloat()

Filter

{result: metadata[0].value.parseFloat()}

Output

{
  "result": 1.1
}

Example - JSON

Calls the JSON.parse() method with the current data as input, constructing the JavaScript value or object described by the string.

• MDN Web Docs - JSON.parse()

Input

{"obj":"{\\\"name\\\":\\\"John Smith\\\"}"}

Filter

obj.json()

Output

{
  "name": "John Smith"
}

Example - Array Function (Sort)

Calls the sort() method on the Array to sort the elements of the Array. The default sort order is ascending, built upon converting the elements into strings, then comparing their sequences of UTF-16 code unit values.

• MDN Web Docs - Array sort()

Filter

people[].name.sort()

Output

[
  "Ben",
  "Greg",
  "John"
]

Example - Array Function (Reverse)

Calls the reverse() method on the Array. The first array element now becoming the last, and the last array element becoming the first. In other words, elements order in the array will be turned towards the direction opposite to that previously stated.

• MDN Web Docs - Array reverse()

Filter

people[].name.sort().reverse()

Output

[
  "John",
  "Greg",
  "Ben"
]

Example - Array Function (Flat)

Calls the flat() method on the Array to create a new array with all sub-array elements concatenated into it.

• A single call to flat() will only perform this to a depth of 1. The function can be called multiple times if required.
• MDN Web Docs - Array flat()

Filter

metadata[].value.flat()

Output

[
  "1.1",
  "people",
  "cities",
  "json",
  "filtering"
]

Example - Object toString()

Calls the JSON.stringify() method with the current data as input. Converts a JavaScript value to a JSON string.

• MDN Web Docs - JSON.stringify()

Filter

{output: people.toString()}

Output

{
  "output": "[{\"name\":\"John\",\"city\":\"Melbourne\"},{\"name\":\"Greg\",\"city\":\"Hobart\"},{\"name\":\"Ben\",\"city\":\"Adelaide\"}]"
}

Example - Object Keys

Calls the Object.keys() method with the current object as input. Returns an array of the given object’s own enumerable string-keyed property names.

• MDN Web Docs - Object.keys()

Filter

people[0].keys()

Output

[
  "name",
  "city"
]

Example - Object Values

Calls the Object.values() method with the current object as input. Returns an array of the given object’s own enumerable string-keyed property values.

• MDN Web Docs - Object.values()

Filter

people[0].values()

Output

[
  "John",
  "Melbourne"
]