Develop module with API

Mykle1

Have a look at this. It is a very simple module meant to teach someone to do exactly what you described in your post.

htilburgs

Thanks for the reply.
I’ve an api for getting the Prayer Times.

http://api.aladhan.com/v1/timings/19-03-2019?latitude=51.508515&longitude=-0.1254872&method=2

In this case there a 4 parameters: date, latitude, longitude and method.
The result is a json file

{"code":200,"status":"OK","data":{"timings":{"Fajr":"04:34","Sunrise":"06:06","Dhuhr":"12:08","Asr":"15:23","Sunset":"18:11","Maghrib":"18:11","Isha":"19:44","Imsak":"04:24","Midnight":"00:09"},"date":{"readable":"19 Mar 2019","timestamp":"1552953600","hijri":{"date":"12-07-1440","format":"DD-MM-YYYY","day":"12","weekday":{"en":"Al Thalaata","ar":"\u0627\u0644\u062b\u0644\u0627\u062b\u0627\u0621"},"month":{"number":7,"en":"Rajab","ar":"\u0631\u064e\u062c\u064e\u0628"},"year":"1440","designation":{"abbreviated":"AH","expanded":"Anno Hegirae"},"holidays":[]},"gregorian":{"date":"19-03-2019","format":"DD-MM-YYYY","day":"19","weekday":{"en":"Tuesday"},"month":{"number":3,"en":"March"},"year":"2019","designation":{"abbreviated":"AD","expanded":"Anno Domini"}}},"meta":{"latitude":51.508515,"longitude":-0.1254872,"timezone":"Europe\/London","method":{"id":2,"name":"Islamic Society of North America (ISNA)","params":{"Fajr":15,"Isha":15}},"latitudeAdjustmentMethod":"ANGLE_BASED","midnightMode":"STANDARD","school":"STANDARD","offset":{"Imsak":0,"Fajr":0,"Sunrise":0,"Dhuhr":0,"Asr":0,"Maghrib":0,"Sunset":0,"Isha":0,"Midnight":0}}}}

I like to filter on the first object “timings” (Fajr until Midnight) and present this information in a table on the Mirror (HTML layout comes later)

I’ve been looking in other modules and trying to learn, but some use node_helper, some don’t and I’m a littlebit stuck right now.

A Former User

@htilburgs
If your API can be reached simply (without authentification, or any other dependencies), You can use xmlHttpRequest to get contents of specific URL in your main module js.
When you need that result of API, Use this logic. (It’s better to make function. but here is just example)

var url = "http://api.aladhan.com/......"
var req = new XMLHttpRequest()
req.overrideMimeType("application/json")
req.open('GET', url, true)
req.onload  = () => {
   var jsonResult = JSON.parse(req.responseText)
   // do your job with jsonResult
   console.log(jsonResult)
}
req.send()

See https://www.w3schools.com/xml/xml_http.asp to learn about XMLHttpRequest

A Former User

@htilburgs
Then, you can access the jsonData like this; (This will be your main job)

...
var Fajr = jsonResult.data.timings.Fajr
console.log(Fajr)

last, you can print it MM screen with .getDom()(You should call .updateDom() to update screen) or DOM manipulation.

...
this.dataToShow.Fajr = jsonResult.data.timings.Fajr
...


getDom : function() {
  var dom = document.createElement("div")
  if (this.dataToShow) dom.innerHTML = this.dataToShow.Fajr
  return dom
},

I’m skipping many things. This is just hint or sample. Remains will be your homework. :D

htilburgs

@Mykle1 @Sean
Both thanks for the quick reply.
For now I’ve information that I can use to start.
If there are any questions, I know where to be ;-)

htilburgs

I used the example from MMM-UFO, and started the module.
How can I check if there is data from the API URL?

htilburgs

Oke, got it. I had to add some console.log settings…:flushed_face:

htilburgs

@Mykle1 I’m using MMM-UFO as example and trying to figure out. I’m getting somewhere but… The data is retrieved through the api and this is the result:

Asr: "16:01"
Dhuhr: "12:46"
Fajr: "05:12"
Imsak: "05:02"
Isha: "20:21"
Maghrib: "18:49"
Midnight: "00:46"
Sunrise: "06:44"
Sunset: "18:49"

The module is generated on the MM

alt text

But as you can see, it cannot read or display the data in the correct way.
This is the code that I use to get the data from the resultset.

// Fajr from data
var mptFajr = document.createElement("div");
mptFajr.classList.add("small", "bright", "fajr");
mptFajr.innerHTML = "Fajr : " + MPT.Fajr;
wrapper.appendChild(mptFajr);

I can’t figure out what the problem is. It seems have something to do with the time-string that is returned. But whatever I try, no luck. Any idea?

Mykle1

@htilburgs said in Develop module with API:

mptFajr.innerHTML = "Fajr : " + MPT.Fajr;

Is this correct? MPT.Fajr above? Not mpt.Fajr?

sdetweil

@Mykle1 it’s not json format. Same problem as your PC stats