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.

    Develop module with API

    Scheduled Pinned Locked Moved Development
    42 Posts 6 Posters 14.7k Views 6 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.
    • ? Offline
      A Former User @htilburgs
      last edited by 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

      1 Reply Last reply Reply Quote 0
      • htilburgsH Offline
        htilburgs @Mykle1
        last edited by

        @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 ;-)

        (still trying to learn JS, but not afraid to ask) ☺

        1 Reply Last reply Reply Quote 0
        • htilburgsH Offline
          htilburgs
          last edited by

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

          (still trying to learn JS, but not afraid to ask) ☺

          htilburgsH 1 Reply Last reply Reply Quote 0
          • htilburgsH Offline
            htilburgs @htilburgs
            last edited by

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

            (still trying to learn JS, but not afraid to ask) ☺

            1 Reply Last reply Reply Quote 0
            • htilburgsH Offline
              htilburgs
              last edited by

              @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?

              (still trying to learn JS, but not afraid to ask) ☺

              Mykle1M 1 Reply Last reply Reply Quote 0
              • Mykle1M Offline
                Mykle1 Project Sponsor Module Developer @htilburgs
                last edited by

                @htilburgs said in Develop module with API:

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

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

                Create a working config
                How to add modules

                S 1 Reply Last reply Reply Quote 0
                • S Offline
                  sdetweil @Mykle1
                  last edited by

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

                  Sam

                  How to add modules

                  learning how to use browser developers window for css changes

                  1 Reply Last reply Reply Quote 0
                  • htilburgsH Offline
                    htilburgs
                    last edited by htilburgs

                    @Mykle1, @sdetweil ,
                    Looking at the website from the API Prayer Times API, the result are all displayed in JSON

                    The API has several endpoints to assist developers. Note that all the endpoints return JSON and are available over http and https.
                    

                    I’ve looked at the code again and it should be MPT.Fajr.
                    I’ve made the module public on github, so you can take a look if you like.
                    MMM-MyPrayerTime

                    Meanwhile I’m trying to solve it…

                    (still trying to learn JS, but not afraid to ask) ☺

                    ? 1 Reply Last reply Reply Quote 0
                    • ? Offline
                      A Former User @htilburgs
                      last edited by

                      @htilburgs
                      0_1553067641516_tt.png

                      I don’t know what you exactly want,
                      but ,
                      Instead

                      var MPT = this.MPT[Keys[this.activeItem]];
                      

                      Use this;

                      var MPT = this.MPT
                      

                      You can get above picture.

                      1 Reply Last reply Reply Quote 0
                      • htilburgsH Offline
                        htilburgs
                        last edited by

                        @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.

                        (still trying to learn JS, but not afraid to ask) ☺

                        ? 1 Reply Last reply Reply Quote 0
                        • 1
                        • 2
                        • 3
                        • 4
                        • 5
                        • 1 / 5
                        • 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