DevOps, CI/CD and Automation

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.

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