Develop module with API

htilburgs

@Sean,
This is what I want. Thanx for the quick reply!

Can you tell me what is the difference in the code?

This was an example from the MMM-UFO where information is rotated.
Because I don’t need it, I’m going to cleanup.

A Former User

@htilburgs
Well, I don’t know what exactly you’ve tried, so difficult to tell what was wrong.
But,
You’ve already gotten timings from response of API in node_helper.js, and transfered it to your main module.

var result = JSON.parse(body).data.timings;

So your this.MPT might have this object structure;

{
      "Fajr":"04:06",
      "Sunrise":"05:35",
      "Dhuhr":"11:39",
      ...
}

So, All you need is just refer it like this.MPT.Fajr.

htilburgs

@Sean,
Thank you for explaining and pointing me out.
I understand what was the issue. I’ve cleaned up the code and removed the caroussel part (and unneeded variables), because I don’t use that.

Added the possibility for showing or not showing some items.
Up to the next part… HTML Markup

htilburgs

Strugling with formatting. When I use the basic code, I got the result I like but it’s not displayed nice. I like to have 3 columns.

		var MPT = this.MPT;
		
		// Creating the div's for your data items
		var top = document.createElement("div");
		top.classList.add("list-row");

		// Fajr from data
		var mptFajr = document.createElement("div");
		mptFajr.classList.add("small", "bright", "Fajr");
		mptFajr.innerHTML = "Fajr : " + MPT.Fajr + " الفجر";
		wrapper.appendChild(mptFajr);			
			
		// Sunrise from data
		if (this.config.showSunrise != false) {
		    var mptSunrise = document.createElement("div");
		    mptSunrise.classList.add("small", "bright", "Sunrise");
		    mptSunrise.innerHTML = "Sunrise : " + MPT.Sunrise + " شروق الشمس";
		    wrapper.appendChild(mptSunrise);
		}
		// Dhuhr from data
		var mptDhuhr = document.createElement("div");
		mptDhuhr.classList.add("small", "bright", "Dhuhr");
		mptDhuhr.innerHTML = "Duhr : " + MPT.Dhuhr + " الظهر";
		wrapper.appendChild(mptDhuhr);

		// Asr from data
		var mptAsr = document.createElement("div");
		mptAsr.classList.add("small", "bright", "Asr");
		mptAsr.innerHTML = "Asr : " + MPT.Asr + " العصر";
		wrapper.appendChild(mptAsr);
			
		// Sunset from data
		if (this.config.showSunset != false) {
		    var mptSunset = document.createElement("div");
		    mptSunset.classList.add("small", "bright", "Sunset");
		    mptSunset.innerHTML = "Sunset : " + MPT.Sunset + " غروب الشمس";
		    wrapper.appendChild(mptSunset);
		}
			
		// Maghrib from data
		var mptMaghrib = document.createElement("div");
		mptMaghrib.classList.add("small", "bright", "Maghrib");
		mptMaghrib.innerHTML = "Maghrib : " + MPT.Maghrib + " المغرب";
		wrapper.appendChild(mptMaghrib);
		
		// Isha from data
		var mptIsha = document.createElement("div");
		mptIsha.classList.add("small", "bright", "Isha");
		mptIsha.innerHTML = "Isha : " + MPT.Isha + " العشاء";
		wrapper.appendChild(mptIsha);
			
		// Midnight from data
		if (this.config.showMidnight != false) {
		    var mptMidnight = document.createElement("div");
		    mptMidnight.classList.add("small", "bright", "Midnight");
		    mptMidnigh

alt text

Now I trying for several hours to figure out how to create table, columns, rows…
I’ve changed the code part to

		var MPT = this.MPT;

		var logs = document.createElement("table");
		var callWrapper = document.createElement("tr");
		callWrapper.classList.add("small");
		
		// Fajr
		var FajrTextCell = document.createElement("td");
		FajrTextCell.className.add = "xsmall bright fajrtext";
		FajrTextCell.innerHTML = "Fajr";
		callWrapper.appendChild(FajrTextCell);
		
		var FajrTimeCell = document.createElement("td");
		FajrTimeCell.className = "xsmall bright fajrtime";
		FajrTimeCell.innerHTML = MPT.Fajr;
		callWrapper.appendChild(FajrTimeCell);
		
		var FajrArabCell = document.createElement("td");
		FajrArabCell.className = "xsmall bright fajrarab";
		FajrArabCell.innerHTML = "الفجر";
		callWrapper.appendChild(FajrArabCell);

		logs.appendChild(callWrapper);
		wrapper.appendChild(logs);
		return wrapper;

The result for 1 item is nice

alt text

But when I repeat this for the other items, no rows are created and everything is on the same row.

		var MPT = this.MPT;

//Table Test

		var logs = document.createElement("table");
		var callWrapper = document.createElement("tr");
		callWrapper.classList.add("small");
		
		// Fajr
		var FajrTextCell = document.createElement("td");
		FajrTextCell.className.add = "xsmall bright fajrtext";
		FajrTextCell.innerHTML = "Fajr";
		callWrapper.appendChild(FajrTextCell);
		
		var FajrTimeCell = document.createElement("td");
		FajrTimeCell.className = "xsmall bright fajrtime";
		FajrTimeCell.innerHTML = MPT.Fajr;
		callWrapper.appendChild(FajrTimeCell);
		
		var FajrArabCell = document.createElement("td");
		FajrArabCell.className = "xsmall bright fajrarab";
		FajrArabCell.innerHTML = "الفجر";
		callWrapper.appendChild(FajrArabCell);
		
		// Sunrise
		var SunriseTextCell = document.createElement("td");
		SunriseTextCell.className.add = "xsmall bright sunrisetext";
		SunriseTextCell.innerHTML = "Sunrise";
		callWrapper.appendChild(FajrTextCell);
		
		var SunriseTimeCell = document.createElement("td");
		SunriseTimeCell.className = "xsmall bright fajrtime";
		SunriseTimeCell.innerHTML = MPT.Sunrise;
		callWrapper.appendChild(SunriseTimeCell);
		
		var SunriseArabCell = document.createElement("td");
		SunriseArabCell.className = "xsmall bright sunrisearab";
		SunriseArabCell.innerHTML = "شروق الشمس";
		callWrapper.appendChild(SunriseArabCell);		

		logs.appendChild(callWrapper);
		wrapper.appendChild(logs);
		return wrapper;

alt text

Any help to get me on the right track again?

A Former User

@htilburgs
Insert “tr” element after each row.

htilburgs

Don’t I do this with this?

var callWrapper = document.createElement("tr");
callWrapper.appendChild(FajrTextCell);

sdetweil

@htilburgs yes, for each row, and the columns added to the row

htilburgs

@sdetweil I don’t understand what you mean.

sdetweil

@htilburgs make a table with HTML.

tr have to be added to table for each row
And td need to be added for each tr

Right? Exactly the same using code

A Former User

@htilburgs
https://www.w3schools.com/jsref/dom_obj_table.asp
This might be help. Read following articles about table on that site.

htilburgs

@Sean @sdetweil I finaly figured it out! Thanx for the support and pointing me in the correct direction. See the result:

alt text

		var MPT = this.MPT;

		// creating the tablerows
		// Fajr
		var FajrRow = document.createElement("tr")
		FajrRow.className = "small fajr-row";
		
		var FajrTextCell = document.createElement("td");
		FajrTextCell.innerHTML = "Fajr";
		FajrRow.appendChild(FajrTextCell);
		table.appendChild(FajrRow);
		
		var FajrTimeCell = document.createElement("td");
		FajrTimeCell.className = "bright";
		FajrTimeCell.innerHTML = MPT.Fajr;
		FajrRow.appendChild(FajrTimeCell);
		table.appendChild(FajrRow);
		
		var FajrArabCell = document.createElement("td");
		FajrArabCell.innerHTML = "الفجر";
		FajrRow.appendChild(FajrArabCell);
		table.appendChild(FajrRow);
......
}		
		return table;

sdetweil

Fabulous! Nice work!

htilburgs

@Mykle1 Thanks for the MMM-UFO “templates”. This really helped me to get started.
First one down, several to go…:winking_face:

Mykle1

@htilburgs

You’re welcome, mate. And with @sdetweil and @Sean you found the best help possible. :thumbsup:

betle

Thanks tipobet

rick93

Hi @Mykle1 , i am impressed with your MMM-UFO template.
Unfortunately the link -->https://ufo-api.herokuapp.com/api/sightings/search?city=new york&state=ny&limit=50&skip=0 seem like down.

Could you please have a look at it? so that I could refer to.

Thanks!!

Mykle1

@rick93 said in Develop module with API:

Could you please have a look at it?

Well, I just took a look at the api and it is down, as you already discovered. There is nothing I can do about that. However, I will take a look around and see if I can find another. Unknown if I will be able to find one but give me some time. No promises. I will do my best.

rick93

@Mykle1 thanks for your prompt reply and support. I am looking at your API information to compare with your tutorial in the module so that I know what parameter to change. It’s fine if you can share the API’s data/code, doesn’t really need to repair the link or find another. let me know if you can recall back from any previous code in storage. Appreciate!

Mykle1

@rick93 said in Develop module with API:

It’s fine if you can share the API’s data/code, doesn’t really need to repair the link or find another.

I’m not really sure what you are asking me for. The API is dead so there is nothing that I can give you. The link is good but the API is dead so there is no repairing it. :-/

rick93

@Mykle1 said in Develop module with API:

@rick93 said in Develop module with API:

It’s fine if you can share the API’s data/code, doesn’t really need to repair the link or find another.

I’m not really sure what you are asking me for. The API is dead so there is nothing that I can give you. The link is good but the API is dead so there is no repairing it. :-/

@Mykle1 Understood. I am actually trying to create my module for the Singapore weather forecast via API --“https://api.data.gov.sg/v1/environment/4-day-weather-forecast”.
I am new to MM as well as JS, so I do like to learn the way you code for the API, so I can get the idea to code my own.
Anyway, I will find another example to continue my coding.
Thanks.