Module to Display JSON data from a FILE

mhr320

I think it would be useful for the MagicMirror Community if there was a simple module to display JSON data from a file saved on the system. If the module could differentiate between the entries somehow, that would be great so it could show one entry for 10 seconds, then fade out and show the next entry for 10 seconds.

I was unable to find a module that displayed JSON data from a file. I have a JSON file from a web scraper I built, I am sure there is a way to get the information from the website using java script, but it’s mostly Greek to me.

Here is a look at the JSON file I have created:

{
    "TROY": [
        "Creamy Macaroni & Cheese ",
        "Mac-n-Cheese with Chicken Bowl ",
        "Vegetarian Entree Salad with Dinner Roll ",
        "Hot Honey Chicken Lettuce Wrap-Mystery Chef 2025 Recipe ",
        "PB&J Grape Uncrustable Combo Meal ",
        "Colorful Riviera Vegetable Blend ",
        "Garden Side Salad ",
        "Assorted Fresh Veggies ",
        "Seasonal Fresh Fruit ",
        "Assorted Flavors Fruit Sidekick Slushie ",
        "Garlic Twist  Breadstick ",
        "1% Milk ",
        "Nonfat Chocolate Milk ",
        "Red Pepper Hummus Cup ",
        "Variety of Condiments "
    ],
    "HIGHSCHOOL": [
        "Seasoned Chicken Strips ",
        "Savory Beef Meatballs ",
        "Vegetarian Salad with Banana Bread ",
        "Boar's Head Buffalo Chicken Sandwich ",
        "PB&J Grape Uncrustable Sandwich ",
        "Assorted Cereal Lunch ",
        "Fruit and Yogurt Parfait ",
        "Steamed Broccoli ",
        "Fresh Veggie Dippers ",
        "Classic Hummus ",
        "Marinara Sauce ",
        "Seasonal Fresh Fruit ",
        "Penne Noodles ",
        "Garlic Twist  Breadstick ",
        "1% Milk ",
        "Nonfat Chocolate Milk ",
        "Alfredo Sauce ",
        "Variety of Condiments "
    ],
    "LEARWOOD": [
        "Creamy Macaroni & Cheese ",
        "Mac-n-Cheese with Chicken Bowl ",
        "Vegetarian Entree Salad with Dinner Roll ",
        "Turkey Sub ",
        "PB&J Grape Uncrustable Combo Meal ",
        "Assorted Cereal Lunch ",
        "Fruit and Yogurt Parfait ",
        "Colorful Riviera Vegetable Blend ",
        "Garden Side Salad ",
        "Assorted Fresh Veggies ",
        "Seasonal Fresh Fruit ",
        "Assorted Flavors Fruit Sidekick Slushie ",
        "Breadstick ",
        "1% Milk ",
        "Nonfat Chocolate Milk ",
        "Red Pepper Hummus Cup ",
        "Variety of Condiments "
    ]
}

I would love for the module to display a heading of TROY and the meals for that day, then fade or switch to HIGHSCHOOL and display those meals, and so on. I think this module might be useful for others as well…maybe not.

Anyone interested in making a module? Thank you in advance.

mhr320

Enjoy the grandson, i am of no importance! Thank you!

sdetweil

@mhr320 there are at least 3 in the 3rd party list

you will have to load the file via
http://localhost:mm_port/… file
file has to be in the MagicMirror folder tree
you could use file links to reference a file outside the MagicMirror folder tree

go to the 3rd party list (in the menu) and put json in the search field

mhr320

Thank you for replying. I forgot to put in my post I had searched for this type of module already, by simply searching for json on the modules page. I attempted exactly what you suggested with no results.

The top of my config file looks like this:

let config = {
	address: "0.0.0.0", 	
	port: 8081,
	basePath: "/", 	
	ipWhitelist: [], 

	useHttps: false, 	
	httpsPrivateKey: "", 
	httpsCertificate: "", 

	language: "en",
	locale: "en-US",
	logLevel: ["INFO", "LOG", "WARN", "ERROR"],
	timeFormat: 12,
	units: "imperial",

I have attempted on four different modules [
MMM-ValuesByNotification,
MMM-JsonTable,
MMM-JsonValue,
MMM-json]

using all of these paths plus other variations with no loading of localhost json data:

"http://localhost:8081/MagicMirror/modules/file.json"
"http://localhost:8081/modules/file.json"
"localhost:8081/MagicMirror/modules/file.json"
"localhost:8081/modules/file.json"

"http://0.0.0.0:8081/MagicMirror/modules/file.json"
"http://0.0.0.0:8081/modules/file.json"
"0.0.0.0:8081/MagicMirror/modules/file.json"
"0.0.0.0:8081/modules/file.json"

Respectfully, thank you to anyone who provides advice or help.

sdetweil

@mhr320 ok, I put a file in MagicMirror/modules
fribble.json

{
 "items":[ {"test":"foo","xyz":"test"}]
}

and used this URL

http://localhost:8090/modules/fribble.json

and got this
Screenshot at 2025-05-21 12-07-02.png

so the path works…

using this JsonTable module,
then config would be

{
  module: 'MMM-JsonTable',
  position: 'top_right',
  header: 'HouseDB Sevensegment',
  config: {
    url: 'http://localhost:8090/modules/fribble.json', // Required
    arrayName: 'items' // Optional
  }
}

and got this
Screenshot at 2025-05-21 12-07-58.png

sdetweil

@mhr320 JsonTable expects a different format…

I didn’t try the others… some are more flexible, some not

i did not try with your data

mhr320

@sdetweil Ok, I’ll get back to trying it, I must have messed up an entry somewhere.

mhr320

@sdetweil So the path does indeed work, what was preventing me from seeing the data was the arrayName in the config. That does have to be set regardless of it saying it is optional.

So that problem is solved, do you think I can solve the sharing of screen time for each of the three array’s in the json file via css or will that take some javascript? That was really what was important because the information is for my three kids and they each attend a different school.

I really appreciate your help and patience.

sdetweil

@mhr320 yes , the arrayName has to be set. had the same problem

sharing

well that gets a bit more complicated . this module doesnt support multiple instances w different urls.

if it did, then you could make three files or use different arrayName settings

then you could also use mmm-pages and display 1 each per child

i can add that support later tonight, pretty easy but. have grandson duty for a while

mhr320

Enjoy the grandson, i am of no importance! Thank you!

sdetweil

@mhr320 rename the MMM-JsonTable folder out of the way
and

cd ~/MagicMirror/modules
git clone https://github.com/sdetweil/MMM-JsonTable.git
cd MMM-JsonTable
git checkout multiinstance
npm install

then in config.js
you can have multiple instances with the same url
and different arrayName (even the same,…)

then if you use MMM-Pages

   {
        module: "MMM-pages",
        config: {
            rotationTime: 1000 * 20,         // rotate every 20 seconds
            modules: [
                ["family"],                // page 1
                ["kid1 name"], // page 2
                ["kid2 name"], // page 3
                ["kid3 name"], // page 4
            ],
            fixed: [                         // modules that are always shown
                       "fixed"
            ],
        }
    },

then on each other module
add, after the module: line
classes:“xxxx”
xxxx one of the names above, family, kid1, kid2, kid3
for modules on every page use classes:“fixed”

above config has 20 seconds on each page… you can change that