Display values from a JSON file hosted online

[looolz]

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

Thank you so much! 👍🏻

[looolz]

@yawns HAVE MY BABIES!

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

[yawns]

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:

[looolz]

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?

[yawns]

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.141]

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

[yawns]

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

[E3V3A]

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