• 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.3k 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 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.

      S 1 Reply Last reply Mar 3, 2017, 2:21 PM Reply Quote 0
      • S 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