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.

    New to building modules. plz help

    Scheduled Pinned Locked Moved Development
    18 Posts 2 Posters 4.6k Views 2 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.
    • D Offline
      Djninja926
      last edited by

      This post is deleted!
      1 Reply Last reply Reply Quote 0
      • S Do not disturb
        sdetweil
        last edited by

        well, that link works, so the data comes back, THEN you have to DO something with it

        because this is in the module, you will have to use the developers window
        npm start dev
        or
        npm start
        ctrl-shift-i on the keyboard

        then
        there are two tabs on the dev window
        console where messages are displayed (like console.log and Log.log from the code in the original post)
        and the sources tab, where you can step thru the code, line by line as it executes
        once on the sources tab, you have to find you code in the left nav tree, expand modules, …etc…

        to put a stop in the code, on the line

        var urlApi =
        

        click the number in the left side of the dev display, it will turn blue, meaning active stop.
        hit f5, refresh, and the page will reload and it will stop there, and u can examine the code and data
        and step ( the top half of an o shape), or right arrow, continue til next stop, if any

        Sam

        How to add modules

        learning how to use browser developers window for css changes

        1 Reply Last reply Reply Quote 0
        • D Offline
          Djninja926 @sdetweil
          last edited by

          @sdetweil I used this link https://stats.foldingathome.org/api/donor/Apia_Okorafor but after I replaced that link it doesn’t work.

          1 Reply Last reply Reply Quote 0
          • S Do not disturb
            sdetweil
            last edited by

            yeh, there is some difficult cors (cross site scripting security) problem

            Sam

            How to add modules

            learning how to use browser developers window for css changes

            S 1 Reply Last reply Reply Quote 0
            • S Do not disturb
              sdetweil @sdetweil
              last edited by sdetweil

              @Djninja926 to get the api request to work, I had to add a proxy handler

                      var urlApi = "https://stats.foldingathome.org/api/donor/Apia_Okorafor";
              	var proxyUrl = 'https://cors-anywhere.herokuapp.com/'
              	fetch(proxyUrl+urlApi,
              

              Sam

              How to add modules

              learning how to use browser developers window for css changes

              D 1 Reply Last reply Reply Quote 0
              • D Offline
                Djninja926 @sdetweil
                last edited by

                @sdetweil where do I add the code

                var urlApi = "https://stats.foldingathome.org/api/donor/Apia_Okorafor";
                	var proxyUrl = 'https://cors-anywhere.herokuapp.com/'
                	fetch(proxyUrl+urlApi,
                
                S 1 Reply Last reply Reply Quote 0
                • S Do not disturb
                  sdetweil @Djninja926
                  last edited by

                  @Djninja926 sorry, I was trying different things, forgot that I changed the request function,
                  back to the original source

                  		var urlApi = "https://stats.foldingathome.org/api/donor/Apia_Okorafor"
                  		var proxyUrl = 'https://cors-anywhere.herokuapp.com/'		// added
                  		var retry = true;
                  
                  		var dataRequest = new XMLHttpRequest();
                  		dataRequest.open("GET", proxyUrl+urlApi, true);                      // changed
                  

                  Sam

                  How to add modules

                  learning how to use browser developers window for css changes

                  D 1 Reply Last reply Reply Quote 0
                  • D Offline
                    Djninja926 @sdetweil
                    last edited by

                    @sdetweil I did all that and this was the output
                    Captursde.PNG
                    Capturade.PNG
                    I think It is working so what do i do know.

                    S 1 Reply Last reply Reply Quote 0
                    • S Do not disturb
                      sdetweil @Djninja926
                      last edited by

                      @Djninja926 figure out the data differences from the 1st api used to the new one, and how you have to fix the output format

                      Sam

                      How to add modules

                      learning how to use browser developers window for css changes

                      D 1 Reply Last reply Reply Quote 0
                      • D Offline
                        Djninja926 @sdetweil
                        last edited by

                        @sdetweil I dont get what you mean

                        S 1 Reply Last reply Reply Quote 0
                        • S Do not disturb
                          sdetweil @Djninja926
                          last edited by sdetweil

                          @Djninja926 the code u changed had some expected data format back from the service it called.
                          it used that data format in the code to make the visual part of the output

                          the new api (that url ) provides data in a different format.

                          as an example of the type of thing I am talking about,

                          1 has a spreadsheet with 4 columns, and 1 has a spreadsheet with 8 columns and none of the column names are the same.
                          the code expected to find 4 columns with specific names. they aren’t there

                          how do you reconcile that?

                          =====> but these apis return json data not excel spreadsheets, it is just an example of the work you need to do

                          Sam

                          How to add modules

                          learning how to use browser developers window for css changes

                          D 1 Reply Last reply Reply Quote 0
                          • D Offline
                            Djninja926 @sdetweil
                            last edited by

                            @sdetweil how do I make it JSON format

                            S 1 Reply Last reply Reply Quote 0
                            • D Offline
                              Djninja926
                              last edited by Djninja926

                              @sdetweil or how do I make the module take whatever format the urlApi is

                              1 Reply Last reply Reply Quote 0
                              • S Do not disturb
                                sdetweil @Djninja926
                                last edited by sdetweil

                                @Djninja926 >how do I make it JSON format

                                the data is already in json format (old and new) JSON is just a structure, like a spreadsheet, it doesn’t control the actual content

                                how do I make the module take whatever format the urlApi is

                                good luck with that… i don’t know of any software learning that would be capable of that
                                old data

                                {
                                  "userId": 1,
                                  "id": 1,
                                  "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
                                  "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
                                }
                                

                                new data

                                {"wus": 18, "rank": 0, "total_users": 2656615, "active_50": 1, "path": "donor/Apia_Okorafor", "wus_cert": "https://apps.foldingathome.org/awards?user=72700656&type=wus", "id": 72700656, "credit_cert": "https://apps.foldingathome.org/awards?user=72700656&type=score", "last": "2020-04-28 02:35:06", "name": "Apia_Okorafor", "teams": [{"wus": 18, "last": "2020-04-28 02:35:06", "uid": 72700656, "active_50": 1, "active_7": 1, "credit": 31157, "team": 223518, "name": "LinusTechTips_Team"}], "active_7": 1, "credit": 31157}
                                

                                the code only used the title field from the data, but there is no title field at all in the new data

                                if (this.dataRequest) {
                                			var wrapperDataRequest = document.createElement("div");
                                			// check format https://jsonplaceholder.typicode.com/posts/1
                                			wrapperDataRequest.innerHTML = this.dataRequest.title;
                                
                                			var labelDataRequest = document.createElement("label");
                                			// Use translate function
                                			//             this id defined in translations files
                                			labelDataRequest.innerHTML = this.translate("TITLE");
                                
                                
                                			wrapper.appendChild(labelDataRequest);
                                			wrapper.appendChild(wrapperDataRequest);
                                		}
                                

                                Sam

                                How to add modules

                                learning how to use browser developers window for css changes

                                D 1 Reply Last reply Reply Quote 0
                                • D Offline
                                  Djninja926 @sdetweil
                                  last edited by

                                  @sdetweil I got it working. thank you for your help

                                  S 1 Reply Last reply Reply Quote 1
                                  • S Do not disturb
                                    sdetweil @Djninja926
                                    last edited by

                                    @Djninja926 cool…

                                    Sam

                                    How to add modules

                                    learning how to use browser developers window for css changes

                                    1 Reply Last reply Reply Quote 0

                                    Hello! It looks like you're interested in this conversation, but you don't have an account yet.

                                    Getting fed up of having to scroll through the same posts each visit? When you register for an account, you'll always come back to exactly where you were before, and choose to be notified of new replies (either via email, or push notification). You'll also be able to save bookmarks and upvote posts to show your appreciation to other community members.

                                    With your input, this post could be even better 💗

                                    Register Login
                                    • 1 / 1
                                    • 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