Develop module with API

[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

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

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;

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:

		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.

[Mykle1]

@rick93 said in Develop module with API:

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.

First, you should aspire to learn how others code. I have a basic understanding of coding but I manage to make things work, usually. Only with the help and guidance of others have I managed to create some modules. Anyway . . .

The url you have for the weather data is working. Great! I took the data and ran it through the json viewer. I assume you did the same as per the instructions in the UFO module readme. By substituting the url and changing some naming in the node helper and js file you should be able to get the data. Setting up the divs should not be too hard either.

See what you can manage on your own and I will try to help you when you get stuck.

Paying it forward.

Peace!

[Mykle1]

[rick93]

Hi @Mykle1 , I am trying to display only one parameter on the magic mirror,unfortunately it show undefined. I tried different ways but still cant make it.
I don’t not know what is the root cause since I was using MMM_UFO as my template. Do you mind to have a look on my module and advice me?
Thank you very much.
https://github.com/rick0222/MM-SW