Complete la tabla de Oracle JET desde el servicio web REST basado en JSON

 Antes de comenzar con esta publicación, revise mi publicación anterior sobre el uso de JET con JDeveloper . Aquí estoy usando la misma aplicación de plantilla de cajón de navegación JET. En esta publicación, veremos cómo consumir el servicio web REST basado en JSON y completar datos en el componente de tabla Oracle JET (oj-table)

Tenemos URL del servicio web REST -  http://dummy.restapiexample.com/api/v1/employees,  devuelve una lista de empleados y sus detalles.

Veamos la parte de implementación

Agregue un componente oj-table en la   página dashboard.html y defina el número requerido de columnas, este servicio web devuelve múltiples detalles de un empleado, por lo que he tomado 4 columnas para  Id, Nombre, Salario y Edad

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 dieciséis 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

<div class="oj-hybrid-padding">   <h1>Dashboard Content Area</h1> <div id="div1">                     <oj-table id='table' aria-label='Departments Table'                                         data='[[datasource]]'                                         selection-mode='{"row": "multiple", "column": "multiple"}'                                         dnd='{"reorder": {"columns": "enabled"}}'                                         scroll-policy='loadMoreOnScroll'                                         scroll-policy-options='{"fetchSize": 10}'                                         columns='[{"headerText": "ID",                                                    "field": "emp_id",                                                    "resizable": "enabled"},                                                                                                        {"headerText": "Name",                                                    "field": "emp_name",                                                    "resizable": "enabled"},                                                                                                        {"headerText": "Salary",                                                    "field": "emp_sal",                                                    "resizable": "enabled"},                                                                                                        {"headerText": "Age",                                                    "field": "emp_age",                                                    "resizable": "enabled"}                                                    ]'                                         style='width: 100%; height: 400px;'>         </oj-table>           </div> </div>

Ahora vea el código de  dashboard.js,  lea los comentarios para comprender el código javascript, aquí el   método getJSON () de jQuery se usa para llamar al servicio web REST ya que jQuery es parte de las bibliotecas de Oracle JET.

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 dieciséis 17 18 19 20 21 22 23 24 25 26 27 28 29 30

/*  * Your dashboard ViewModel code goes here  */ define(['ojs/ojcore', 'knockout', 'jquery', 'ojs/ojinputtext', 'ojs/ojtable', 'ojs/ojarraytabledatasource'], function (oj, ko, $) {     function DashboardViewModel() {         var self = this;         //Define a Knockout observable array and name it tabData         self.tabData = ko.observableArray();                   //Use jQuery method to call REST Web Service         $.getJSON("http://dummy.restapiexample.com/api/v1/employees").then(function (employees) {             $.each(employees, function () {                 //Push data in Observable array                 self.tabData.push( {                     emp_id : this.id,                     emp_name : this.employee_name,                     emp_sal : this.employee_salary,                     emp_age : this.employee_age                 });             });         });                   //Pass observable array in utility class to show data in table         self.datasource = new oj.ArrayTableDataSource(self.tabData,         {             idAttribute : 'emp_id'         });         .         .         .

tabData  es una matriz observable knockout que está definida para contener el valor devuelto y puede ver que  self.tabData.push  se usa para insertar datos de servicios web en esta matriz y, por último,  se usa una clase de utilidad JET  ArrayTableDataSource para convertir esta matriz observable en tabular formato de datos.

Aquí  id, employee_name, employee_salary, employee_age  son el nombre del atributo devuelto por Web Service en formato JSON.

Ahora haga clic derecho en el archivo index.html en JDeveloper y elija ejecutar

y vea la tabla de Oracle JET en el navegador, los datos se completan desde el servicio web. De la misma manera, puede probar con otras URL de servicios web.

Todo listo

Salud 

 Feliz aprendizaje