3 Replies Latest reply on May 10, 2016 5:40 PM by 2681470

    JsonTreeDataSource & REST call stuck on "Fetching Data" in list

    2681470

      Hi,

       

      I'm new to JET and currently developing a Hybrid application that is making a REST call to retrieve some JSON data and display in a list.

       

      I can see that the REST call is working as the console is returning the data output, how ever the list component remains displaying some text "Fetching data..."

       

      model script:

       

      define(['ojs/ojcore', 'knockout', 'jquery', 'ojs/ojknockout', 'ojs/ojmenu', 'ojs/ojlistview', 'ojs/ojjsontreedatasource', 'ojs/ojrouter', 'ojs/ojtree'],

          function (oj, ko, $)

          {

              var self = this;

              function RestModel()

              {

                    

                $.ajax({

                      url: 'url-here',

                      type: 'GET',

                      dataType: 'json',

                      error: function(jqXHR, exception) { alert('boo!'); },

                      beforeSend: setHeader,

                      success: function(data) {

                          console.log(data);

                          self.dataSource = new oj.JsonTreeDataSource(data, {idAttribute: "id"});

                      }

                    });

                    

                      function setHeader(xhr) {

                      xhr.setRequestHeader('authorization-here');

                      xhr.setRequestHeader('oracle-mobile-backend-id-here');

                    }

       

      I'm unsure how to resolve this and don't seem to be able to find any code examples of REST being used to populate a list.

       

      If I change the code to use ArrayTableDataSource instead:

       

      success: function(data) {

                          console.log(data);

                          self.dataSet = new ko.observableArray(data);

                          self.dataSource = new oj.ArrayTableDataSource(self.dataSet, {idAttribute: "id"});

                      }

       

      Then I get nothing loaded on the first visit to the page, and then on the second visit to the page the data is displayed as expected, how ever obviously this is not ideal that the page must be reloaded, and also does not display the "Fetching data..." message that seems to be displayed when using JsonTreeDataSource.

       

      Any ideas what I am doing wrong here?

       

      With Thanks,

        • 1. Re: JsonTreeDataSource & REST call stuck on "Fetching Data" in list
          John 'JB' Brock-Oracle

          Hello,

           

          This sounds like a possible race condition with the data not being available before the DOM is initialized.

          Since I see you are using a "define" call in your sample, I'm going to assume this is being done in an ojModule.

          Please try wrapping your AJAX call into one of the ojModule lifecycle methods so that it gets called at the proper time.

          JSDoc: Namespace: ojModule

           

          I would recommend something like this:

           

          self.handleActivated = function() {
          
          
                  $.ajax({
                          url: 'url-here',
                          type: 'GET',
                          dataType: 'json',
                          error: function(jqXHR, exception) { alert('boo!'); },
                          beforeSend: setHeader,
                          success: function(data) {
                              console.log(data);
                              self.dataSource = new oj.JsonTreeDataSource(data, {idAttribute: "id"});
                          }
                        });
                        
                          function setHeader(xhr) {
                          xhr.setRequestHeader('authorization-here');
                          xhr.setRequestHeader('oracle-mobile-backend-id-here');
                        }
          
          }
          
          

           

          The "handleActivated" lifecycle method will be called as soon as the ojModule JavaScript is activated.  It will be called before the DOM is attached.  This way your data will be available before the ojTree component is initialized and tries to load the data.

          1 person found this helpful
          • 2. Re: JsonTreeDataSource & REST call stuck on "Fetching Data" in list
            Jim.Marion-Oracle

            I'm suspecting that you are having a timing/loading issue caused by the view rendering and binding before you have data in the model. Some components will handle this by listening for observable value changes. Some don't do it very well. Here is a blog post that discusses several options: Jim's JavaScript Journal: Help! I'm using Asynchronous JavaScript and my View isn't Updating. Notice the final option is to use a ko:if binding to keep the oj component out of the DOM until you have data. There are also a couple of threads in this forum with responses: ojRowExpander question and Film strip is not working in Promise API calls

            • 3. Re: JsonTreeDataSource & REST call stuck on "Fetching Data" in list
              2681470

              Many thanks for the kind responses,

               

              replying with solution that is now working!

               

              I have managed to get this working by changing my original code to the following:

               

                           self.patients = ko.observableArray([]);

                           self.dataSource = new oj.ArrayTableDataSource(self.patients, {idAttribute: 'id'});

                          

                           $.ajax({

                              url: 'url-here',

                              type: 'GET',

                              dataType: 'json',

                              error: function(jqXHR, exception) { alert('boo!'); },

                              beforeSend: setHeader,

                              success: function(data) {

                                  console.log(data);

                                  self.patients(data);

                              }

                            });

               

              This now appears to wait for the response to be "fetched" and then pushes the data into the array, displaying in the table -  as followed by the blog post's 2nd option