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.

Filter Expression

JSON Input

Filtered Output

---

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 1 - Object Key

Filter

people

Output

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

Example 2 - Array Index

Filter

people[0]

Output

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

Example 3 - 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 4 - Nested Object Key

Filter

people[0].city

Output

Melbourne

Example 5 - Object Key from ALL Array Elements

Filter

people[].name

Output

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

Example 6 - 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 7 - 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 8 - 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 9 - 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 10 - 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"
]