3 Replies Latest reply on May 24, 2019 7:59 AM by Ashish Awasthi

    Not able to populate data from REST using Oracle JET Common Model

    Ashish Awasthi

      Hello Everyone

       

      I am trying to populate a JET table using Common Model and I have followed the approach suggested in JET MOOC Course but my table shows 'Initializing' and there is no error on browser console.

       

      jet table.JPG

       

      Here goes the code of EmpFactory.js file

       

      define(['ojs/ojcore','ojs/ojmodel'], function (oj) {
          var EmpFactory = {
              resourceUrl : 'https://codepen.io/cliffsanchez/pen/pbKmEy.html', 
              // Single Employee Model
              createEmpModel : function () {
                  var emp = oj.Model.extend( {
                      urlRoot : this.resourceUrl, 
                      idAttribute : "DepartmentId"
                  });
                  return new emp();
              },
              // Employees Collection
              createEmployeesCollection : function () {
                  var employees = oj.Collection.extend( {
                      url : this.resourceUrl, 
                      model : this.createEmpModel()
                  });
                  return new employees();
              }
          };
          return EmpFactory;
      });
      

       

      dashboard.js

       

      /*
       * Your dashboard ViewModel code goes here
       */
      define(['ojs/ojcore', 'knockout', 'EmpFactory', 'ojs/ojtable','ojs/ojcollectiontabledatasource'], 
      function (oj, ko, EmpFactory) {
          var DashboardViewModel = {
              empCollection : EmpFactory.createEmployeesCollection(), 
              datasource : ko.observable(), 
              // Called each time the view is shown to the user:
              initialize : function () {
                  this.datasource(new oj.CollectionTableDataSource(this.empCollection));
                  this.empCollection.fetch();
              }
          };
          return DashboardViewModel;
      });
      

       

      and dashboard.html

       

      <div class="oj-hybrid-padding">
          <h1>Dashboard Content Area</h1>
          <div id="div1">
              <oj-table id="table" summary="Department List" 
              aria-label="Departments Table" 
              data='[[datasource]]'
                        columns='[{"headerText": "Department Id",
                        "field": "DepartmentId"},
                        {"headerText": "Department Name",
                        "field": "DepartmentName"},
                        {"headerText": "Location Id",
                        "field": "LocationId"},
                        {"headerText": "Manager Id",
                        "field": "ManagerId"}]'>
              </oj-table>
          </div>
      </div>
      

       

      Please let me know where I am doing wrong.

       

      Thanks