Header Ads Widget

Ticker

6/recent/ticker-posts

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

Tabla de Oracle JET

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.

Tabla de Oracle JET

Todo listo

Salud 

 Feliz aprendizaje

Publicar un comentario

0 Comentarios