• Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
MagicMirror Forum
  • Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
A New Chapter for MagicMirror: The Community Takes the Lead
Read the statement by Michael Teeuw here.

Display values from a JSON file hosted online

Scheduled Pinned Locked Moved Development
10 Posts 4 Posters 5.2k Views 4 Watching
Loading More Posts
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • L Offline
    looolz
    last edited by Mar 2, 2017, 2:29 PM

    Want to display two fields from this file:

    https://www.dropbox.com/s/k1t6mjjc3knxp3a/dataset.json?raw=1

    Kind of like this:

    Customers today - Astronomy department:
    88

    The file looks like this:

    {
    "graph": {
    "title" : "Customers today",
    "total" : true,
    "datasequences" : [
    {
    "title" : "Astronomy department",
    "datapoints" : [
    { "title" : "Amount", "value" : 88 }
    	] } ] } }
    

    I want to display the amount value (88 in the example), and the titles, (Customers today and Astronomy department in the example).

    The module I have so far looks like this:

    
    
    Module.register("MMM-backlog",{
    
    
    
    	// Default module config.
    	defaults: {
    		text: "test text"
    	},
    
    	// Override dom generator.
    	getDom: function() {
    		var wrapper = document.createElement("div");
    		wrapper.innerHTML = this.config.text;
    		return wrapper;
    	}
    });
    
    
    

    Anybody able to help me get it working?

    1 Reply Last reply Reply Quote 0
    • Y Offline
      yawns Moderator
      last edited by yawns Mar 2, 2017, 3:37 PM Mar 2, 2017, 3:26 PM

      Quick and dirty, but should get you going :)

      You have to use the node_helper, because using XMLHttpRequest would result in an “origin error”.

      MMM-backlog.js

      /* global Module */
      
      /* Magic Mirror
       * Module: MMM-backlog
       *
       * By Stefan Krause http://yawns.de
       * MIT Licensed.
       */
      
      Module.register('MMM-backlog',{
      
      	defaults: {
      		units: config.units,
      		animationSpeed: 1000,
      		updateInterval: 1000 * 3600, //update every hour
      		refreshInterval: 1000 * 60 * 10, //refresh every minute		
      		timeFormat: config.timeFormat,
      		lang: config.language,
      
      		initialLoadDelay: 0, // 0 seconds delay
      		retryDelay: 2500,
      
      		fileUrl: "https://www.dropbox.com/s/k1t6mjjc3knxp3a/dataset.json?raw=1"
      	},
      
      	// Define required scripts.
      	getScripts: function() {
      		return ["moment.js"];
      	},
      
      	// Define requird styles
      	getStyles: function() {
      		return ["font-awesome.css"];
      	},
      
      	start: function() {
      		Log.info('Starting module: ' + this.name);
      
      		this.loaded = false;
      		this.sendSocketNotification('CONFIG', this.config);
      	},
      
      	getDom: function() {
      		var wrapper = document.createElement("div");
      
      		if (!this.loaded) {
      			wrapper.innerHTML = this.translate('LOADING');
      			wrapper.className = "dimmed light small";
      			return wrapper;
      		}
      
      		if (!this.data) {
      			wrapper.innerHTML = "No data";
      			wrapper.className = "dimmed light small";
      			return wrapper;
      		}
      
      		var t = this.data.graph;
      		var content = document.createElement("div");
      		content.innerHTML = "";	
      		
      		for (var i in t.datasequences) {
      			content.innerHTML += t.title  + " - " + t.datasequences[i].title + "<br />";
      			for (var j in t.datasequences[i].datapoints) {
      				content.innerHTML += t.datasequences[i].datapoints[j].title + ": " + t.datasequences[i].datapoints[j].value + "<br />";
      			}
      		}
      		
      		wrapper.appendChild(content);
      
      		return wrapper;
      	},
      
       	socketNotificationReceived: function(notification, payload) {
          		if (notification === "STARTED") {
      				this.updateDom();
      			}
      			else if (notification === "DATA") {
      				this.loaded = true;
      				this.processData(JSON.parse(payload));
      				this.updateDom();
          		}
      	},
      
      	/* processData(data)
      	 * Uses the received data to set the various values.
      	 *
      	 * argument data object - tide information received form worldtides.info
      	 */
      	processData: function(data) {
      
      		if (!data) {
      			// Did not receive usable new data.
      			// Maybe this needs a better check?
      			return;
      		}
      
      		this.data = data;
      
      		this.loaded = true;
      		this.updateDom(this.config.animationSpeed);
      	}
      
      });
      

      node_helper.js

      'use strict';
      
      /* Magic Mirror
       * Module: MMM-backlog
       *
       * By Stefan Krause http://yawns.de
       * MIT Licensed.
       */
      
      const NodeHelper = require('node_helper');
      var request = require('request');
      
      module.exports = NodeHelper.create({
      
      	start: function() {
      		this.started = false;
      		this.config = null;
      	},
      
      	getData: function() {
      		var self = this;
      		
      		var myUrl = this.config.fileUrl;
      				
      		request({
      			url: myUrl,
      			method: 'GET',
      		}, function (error, response, body) {
      			if (!error && response.statusCode == 200) {
      				self.sendSocketNotification("DATA", body);
      			}
      		});
      
      		setTimeout(function() { self.getData(); }, this.config.refreshInterval);
      	},
      
      	socketNotificationReceived: function(notification, payload) {
      		var self = this;
      		if (notification === 'CONFIG' && self.started == false) {
      			self.config = payload;
      			self.sendSocketNotification("STARTED", true);
      			self.getData();
      			self.started = true;
      		}
      	}
      });
      
      
      1 Reply Last reply Reply Quote 2
      • L Offline
        looolz
        last edited by Mar 2, 2017, 4:26 PM

        wow! This looks great! I cant wait to try this out!

        Thank you so much! 👍🏻

        1 Reply Last reply Reply Quote 0
        • L Offline
          looolz
          last edited by Mar 3, 2017, 10:20 AM

          @yawns HAVE MY BABIES!

          It works! Thank you so much! I’ll now start to play around with the CSS! Thank you so much! :)

          Y 1 Reply Last reply Mar 3, 2017, 11:24 AM Reply Quote 0
          • Y Offline
            yawns Moderator @looolz
            last edited by Mar 3, 2017, 11:24 AM

            Glad it gets you going. Of course you can add more divs/spans or even a table to place your output and adjust proper css to single lines or values.
            If you need explanation of single commands or routines just let us know.

            @looolz said in Display values from a JSON file hosted online:

            @yawns HAVE MY BABIES!

            I doubt my wife would be happy with that :rofl:

            1 Reply Last reply Reply Quote 1
            • L Offline
              looolz
              last edited by Mar 3, 2017, 1:19 PM

              You are very kind!

              I’ve got a couple of issues so far:

              1: The module doesn’t seem to survive a manual refresh. For some reason, if I hit CTRL R to refresh, all other modules load, but this one is stuck at “loading…” If I do CTRL Q, quit the Magic Mirror and try again, it works. Even more strangely, it does correctly update on it’s own, when the JSON file changes. Just a minor thing.

              2: I’ve been trying to create en separate class for the value, so that I can style the number individually. So I tried to create an element that I can style with xlarge from the css file. But so far I’ve only been able to style the titles. I tried to read up on this on w3schools.com, but it’s evident that I lack a pillar of information to understand the syntax completely.

              How would change the code to make the numbervalue an element I can style in the CSS?

              1 Reply Last reply Reply Quote 0
              • Y Offline
                yawns Moderator
                last edited by Mar 3, 2017, 2:15 PM

                1: This is a know issue. If the module uses a node_helper, it does not survive a manual refresh of the webpage. It requires a restart of the magic mirror process. If someone knows how to get rid of this, I am more than happy to learn. @Module-Developers

                2:

                	getDom: function() {
                		var wrapper = document.createElement("div");
                
                		if (!this.loaded) {
                			wrapper.innerHTML = this.translate('LOADING');
                			wrapper.className = "dimmed light small";
                			return wrapper;
                		}
                
                		if (!this.data) {
                			wrapper.innerHTML = "No data";
                			wrapper.className = "dimmed light small";
                			return wrapper;
                		}
                
                		var t = this.data.graph;
                		var content = document.createElement("div");
                		var titleDiv = document.createElement("div");
                		var dataDiv = document.createElement("div");
                		var titleDataSpan = document.createElement("span");
                		var valueDataSpan = document.createElement("span");
                				
                		for (var i in t.datasequences) {
                
                			titleDiv.className = "LIST YOUR CLASSES HERE";
                			titleDiv.innerHTML = t.title  + " - " + t.datasequences[i].title;
                			content.appendChild(titleDiv);
                			for (var j in t.datasequences[i].datapoints) {
                
                				dataDiv.className = "LIST YOUR CLASSES HERE";
                
                				titleDataSpan.className = "LIST YOUR CLASSES HERE";
                				titleDataSpan.innerHTML = t.datasequences[i].datapoints[j].title + ":";
                				
                
                				valueDataSpan.className = "LIST YOUR CLASSES HERE";
                				valueDataSpan.innerHTML = t.datasequences[i].datapoints[j].value;
                				
                				dataDiv.appendChild(titleDataSpan);	
                				dataDiv.appendChild(valueDataSpan);	
                				content.appendChild(dataDiv);
                			}
                		}
                		
                		wrapper.appendChild(content);
                
                		return wrapper;
                	},
                

                You could even use the datapoint title (“amount” in this example), define a css class with this selector and add the datapoint title to the list of classnames ;)
                I did not test it, I just wrote it in notepad++, so there might be a typo. You could also try to add more entries to your JSON file to see if the loops are correct and fetch all data.

                strawberry 3.141S 1 Reply Last reply Mar 3, 2017, 2:21 PM Reply Quote 0
                • strawberry 3.141S Offline
                  strawberry 3.141 Project Sponsor Module Developer @yawns
                  last edited by Mar 3, 2017, 2:21 PM

                  @yawns i could imagine that the start flag of the node_helper is still true so the getdata call gets skipped

                  Please create a github issue if you need help, so I can keep track

                  Y 1 Reply Last reply Mar 3, 2017, 2:23 PM Reply Quote 1
                  • Y Offline
                    yawns Moderator @strawberry 3.141
                    last edited by Mar 3, 2017, 2:23 PM

                    @strawberry-3.141
                    good point. Maybe I find some time at the weekend to debug this and check where it is stopping/skipping

                    E 1 Reply Last reply Feb 14, 2018, 12:38 AM Reply Quote 0
                    • E Offline
                      E3V3A @yawns
                      last edited by Feb 14, 2018, 12:38 AM

                      @yawns Was that re-load issue ever resolved? I have my own basic issues and I’m considering using this code instead…

                      "Everything I do (here) is for free – altruism is the way!"
                      MMM-FlightsAbove, MMM-Tabulator, MMM-Assistant (co-maintainer)

                      1 Reply Last reply Reply Quote 0
                      • 1 / 1
                      • First post
                        Last post
                      Enjoying MagicMirror? Please consider a donation!
                      MagicMirror created by Michael Teeuw.
                      Forum managed by Sam, technical setup by Karsten.
                      This forum is using NodeBB as its core | Contributors
                      Contact | Privacy Policy