MMM-json

A Module for MagicMirror designed to display parts or the whole JSON response from an api.

Preview

Installation

#  Clone the repository into MagicMirror/modules directory and install the dependencies
cd ./modules
git clone https://github.com/DanielHabenicht/MMM-json.git
npm install

2. Create an entry in 'config/config.js' with your url and any config options.

Example

Basic Example:

{
  module: 'MMM-json',
  position: 'bottom_left',
  config: {
    url: "https://jsonplaceholder.typicode.com/users/1", // Path to your json api
    styleRules: [ // Provide custom style rules for any value
      {
        match: (value) => value == 1,
        style: "color: red;",
        class: "large"
      }
    ]  
  }
},

Fetch-Options Example

{
  module: "MMM-json",
  position: "bottom_left",
  header: "JSON example POST",
  config: {
    url: "https://jsonplaceholder.typicode.com/posts",
    fetchOptions: {
      method: "POST",
      body: {
        "search": "something"
      }
    }
  }
},

JQ

You can preprocess the json response with jq-node:

{
  module: "MMM-json",
  position: "bottom_left",
  header: "JSON example jq",
  config: {
    url: "https://jsonplaceholder.typicode.com/users",
    headerIcon: "fa-cube",
    jq: 'keyBy("name") | mapValues(a => [a.address.street,a.address.suite,a.address.city].join(", "))'
  }
},

JSONPath

With JSONPath you can select the values you want to display:

{
  module: "MMM-json",
  position: "bottom_left",
  header: "JSON",
  config: {
    url: "https://jsonplaceholder.typicode.com/users",
    headerIcon: "fa-cube",
    values: [
      {
        title: "Name",
        query: "$[1].name"
      },
      {
        title: "Coordinate 1",
        query: "$[?(@.id==2)].address.geo.lat",
        prefix: "LAT",
        suffix: "°"
      },
      {
        title: "Coordinate 2",
        query: "$[?(@.name=='Ervin Howell')].address.geo.lat",
        prefix: "LON",
        suffix: "°"
      }
    ]
  }
},

Multi Value Example

{
  module: "MMM-json",
  position: "bottom_left",
  header: "JSON example POST",
  config: {
    url: "https://jsonplaceholder.typicode.com/users/1",
    values: [
      {
        title: "Address",
        query: ["$.address.zipcode", "$.address.city", "$.address.street"],
        suffix: ["", ","]
      },
      {
        title: "Geo",
        query: ["$.address.geo.lat", "$.address.geo.lng"],
        suffix: ["LAT", "LNG"]
      }
    ],
  }
},

Configuration

Property	Description
url	The url where to get the json response from. Type: string Default: https://jsonplaceholder.typicode.com/users
refreshInterval	The interval with which the url is queried and your values are updated. Type: int (seconds) Default: 300000 => 5 minutes
headerIcon	The Icon for your Header Type: string any FontAwesome Icon Default: (none)
fetchOptions	Custom parameters for the fetch call. For example method, headers, body. Type: object Default: {} No additional parameters.
jq	Custom jq.node command to apply to the data. Used to convert JSON data. Type: string Default: '.' Use value as received.
values	Custom Configuration of the values you want to display (see below) Type: array Default: [] Which means it displays all first level attributes (or the first element of an array).
styleRules	Custom Style Rules matching for applying styles to any value (see below) Type: array Default: [] No style rules are applied.

Value Configuration

Value-Property	Description
title	The Title of the Property displayed on the screen Type: string Default: The attribute name
query	The jsonpath to the value of your json response you want to display. Here you can test your expression Type: string Example: $[?(@.name=='Ervin Howell')].address.geo.lat
suffix	String that will be displayed behind your query value Type: string Example: %
prefix	String that will be displayed in front of your query value Type: string Example: EUR

styleRules Configuration

Value-Property	Description
match	The matching rule determining if the style Type: function (with the value as parameter and returning a boolean) Example: (value) => value > 10
style	The style that should be applied to the value element. Type: string Example: color: ref Default: (none)
class	A string that will be appended to the class attribute of the value element. Type: string Example: class-name Default: (none)

Testing

echo '{
   "test": {
     "id": 1,
     "title": "json-server",
     "author": "typicode",
     "test": ["test1", "test2"]
   }
 }
' > db.json
npm install -g json-server
json-server --watch db.json

Attribution

Attribution of some basic work and inspiration goes to https://github.com/qistoph/mmm-json.