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

mhr320

Absolutely Brilliant! Since I downloaded the multi-instance version of MMM-JsonTable from you, I assume it will not be available when updating. I will diff the original from yours and learn what you did to make it multi-instance and send that off to the author of MMM-JsonTable as a feature request. I really appreciate your help. It was nice to have a pleasant experience in a forum for a change, does not always go that way.

sdetweil

@mhr320 I submitted pull request
https://github.com/timdows/MMM-JsonTable/pull/98

sdetweil

@mhr320 said in Module to Display JSON data from a FILE:

It was nice to have a pleasant experience in a forum for a change, does not always go that way.

I am glad to hear that it worked out, and sad to hear the other.
as the moderator here, I am interested in feedback on how to make it better most of the time…

mhr320

@sdetweil Hard to say how to improve things from our interaction. 5/5 Stars. I am new-ish to actively using this forum and wanted to give you props for your efforts, not sure if I did through any formal process, I tried to show the answer as the solution and attempted to upvote, but not sure if I did. But if you are the mod and jumped in to help me, that is a great way to make the forum better. Take care and enjoy the grandchild!

sdetweil

@mhr320 no… you said in " a " forum for a change, does not always go that way.

I wanted to know what that was… was that HERE?

we try hard to make sure everyone gets supported in some way

sdetweil

@mhr320 said in Module to Display JSON data from a FILE:

and attempted to upvote, but not sure if I did

upvote/downvote are restricted to user that have reputation 2 or above (means someone liked/upvoted your contribution twice)
this was we know reputation is not tainted with transient (mostly down) voters…

same as having all posts reviewed before live posting, til you rep is 2 or above.

mhr320

@sdetweil Oh, in “a forum” was relative to another forum, this is the first time, in a long time, i’ve used this forum. HERE has been great every time so far, sorry for the misunderstanding.

sdetweil

@mhr320 the author accepted my change request

so you could go to the old folder (if you just renamed it) and git pull to get the update
then swap(rename) the folders and retry with his code again
and then delete mine

mhr320

Whoa, that was fast on both of your parts. I went to his github page and saw several old open “issues” i figured he’d be asleep on the project, but wow! It worked, great job sir! I really look forward to my next issue.

timdows

@sdetweil

Thanks for the PR

Just approved the it, it did fail some prittier checks that I’ll fix later
Hope you’ll find it usefull over here!

https://github.com/timdows/MMM-JsonTable