martes, 27 de junio de 2023

Manipulación de JSON en JavaScript: Transposición de Datos

¡Hola a todos! Estamos de vuelta con un nuevo artículo sobre JavaScript. Esta vez, exploraremos un tema fundamental pero a menudo repetitivo: cómo trabajar con JSON. Vamos a sumergirnos directamente en el código, donde mostraremos cómo transponer valores de filas a columnas en un arreglo JSON.


¿Qué es la Transposición de Datos?

La transposición de datos implica cambiar la orientación de los datos, es decir, convertir filas en columnas y viceversa. En este artículo, te mostraré cómo hacerlo usando JavaScript.


La Función transpuesta

La función transpuesta se encarga de transponer los valores de un objeto JSON. A continuación, se explica cómo funciona esta función paso a paso:


Código de la Función

/**
 * Función transpuesta: Transpone valores de filas a columnas en un arreglo JSON.
 * @param {Object} obj - El objeto JSON que contiene los datos a transponer.
 * @returns {Array} - El nuevo arreglo con los valores transpuestos.
 */
function transpuesta(obj) {
    var rtn = [];
    var key = {};
    var x = 0;

    // Función de comparación de objetos
    var c = function(a, b) {
        return JSON.stringify(a) === JSON.stringify(b);
    };

    // Recorre el arreglo o JSON que recibe
    $.each(obj.arr, function(i, v) {
        var nObj = {};
        var keys = Object.keys(v);
        
        // Crea un objeto sin las llaves y valores a transponer
        for (var j = 0; j < keys.length; j++) {
            if (keys[j] !== obj.field.structure.value && keys[j] !== obj.value) {
                nObj[keys[j]] = v[keys[j]];
            }
        }

        var rn = -1;

        // Evalúa si la llave ya tiene un objeto asociado
        if (Object.keys(key).length == 0) {
            key['a_' + x] = { k: nObj, r: rtn.length };
            x++;
        } else {
            var existe = false;
            for (var y = 0; y < x; y++) {
                if (c(key['a_' + y].k, nObj)) {
                    existe = true;
                    rn = key['a_' + y].r;
                }
            }

            if (!existe) {
                key['a_' + x] = { k: nObj, r: rtn.length };
                x++;
            }
        }

        var tmpObj = {};
        $.extend(tmpObj, nObj);

        var k = obj.field.structure;
        var prp = k.prepend + (v[k.value] + "").replace(k.rp[0] || '', k.rp[1] || '') + k.append;

        if (rn == -1) {
            tmpObj[prp] = v[obj.value];
            rtn.push(tmpObj);
        } else {
            rtn[rn][prp] = v[obj.value];
        }
    });

    return rtn;
}

Ejemplo de Uso

Vamos a ver un ejemplo práctico de cómo usar esta función.


JSON de Entrada

var jsn = [
    {folio: 4401685, fecha: '20/07/2022', orden: 352673, identificador: 44156245, pieza: 312, equivalencia: 'XY-A1'},
    {folio: 4401685, fecha: '20/07/2022', orden: 352673, identificador: 44156245, pieza: 504, equivalencia: 'XY-A3'},
    {folio: 4401685, fecha: '20/07/2022', orden: 352673, identificador: 44156245, pieza: 312, equivalencia: 'XY-A4'},
    {folio: 4401685, fecha: '20/07/2022', orden: 352673, identificador: 44156245, pieza: 1272, equivalencia: 'XY-A6'},
    {folio: 4401685, fecha: '20/07/2022', orden: 352673, identificador: 44156245, pieza: 960, equivalencia: 'XY-A7'},
    {folio: 4401685, fecha: '20/07/2022', orden: 352673, identificador: 44156245, pieza: 624, equivalencia: 'XY-A8'}
];

Invocación de la Función

var jsonRtn = transpuesta({
    arr: jsn,
    field: {
        structure: {
            prepend: 'E_',
            value: 'equivalencia',
            rp: ['-', '_'],
            append: '_PZ'
        }
    },
    value: 'pieza'
});

Resultado

La función transpuesta transformará los datos de la siguiente manera:

console.log(jsonRtn);
/*
[
    {
        folio: 4401685,
        fecha: '20/07/2022',
        orden: 352673,
        identificador: 44156245,
        E_XY_A1_PZ: 312,
        E_XY_A3_PZ: 504,
        E_XY_A4_PZ: 312,
        E_XY_A6_PZ: 1272,
        E_XY_A7_PZ: 960,
        E_XY_A8_PZ: 624
    }
]
*/

Conclusión

En este artículo, hemos aprendido a transponer valores en un arreglo JSON usando JavaScript. Esta técnica es útil para reorganizar datos y hacerlos más manejables para diferentes propósitos.


Si este artículo te ha sido útil, por favor, deja tu comentario y comparte tu experiencia. Gracias por leernos y hasta la próxima.

miércoles, 2 de noviembre de 2022

Validacion de datos en ExcelJS

 Hoy les traigo a la mano la información para poder crear datavalidation con ExcelJS o bien un dropdownlist en los archivos exportados desde java, sin mas por el momento vamos al codigo.


Un dataValidation permite agregar dropdownlist a una hoja de excel esta puede ser asignada por medio de un array de tipo string o bien hacer referencia de la informacion en otra hoja.


En el ejemplo de hoy veremos el caso de crear la lista a partir de la referencia de otra hoja del mismo documento, para ello creamos nuestro objeto Workbook. 


  
     var workbook = new ExcelJS.Workbook();
     workbook.creator = 'DivingJS';
     workbook.lastModifiedBy = 'inovania.blogspot.com';
     workbook.created = new Date();
     
  

Ahora por el momento agregaremos el primer registro que bien puede servir como header del documento para ello.

	var workSheet=workbook.addWorksheet("sheet_1");
    workSheet.addRow(["item 1","item 2", "item 3"]);

Aquí agregamos el contenido de la segunda hoja

	var workSheet_2=workbook.addWorksheet("sheet_2");
    workSheet_2.addRow(["elemento 1"]);
    workSheet_2.addRow(["elemento 2"]);
    workSheet_2.addRow(["elemento 3"]);
    workSheet_2.addRow(["elemento 4"]);
    workSheet_2.addRow(["elemento 5"]);
    workSheet_2.addRow(["elemento 6"]);
    

Una vez teniendo esto lo que sigue es agregar la regla para poder generar el dataValidation, esto queda de la siguiente manera.

    worksheet.getCell("B2").dataValidation = {
         type: 'list',
         allowBlank: true,
         showInputMessage: true,
         showErrorMessage: true,
         formulae: ["=sheet_2!$A$1:$A$6"]

Ahora bien, recibe los parametros allowBlank , showInputMessage, showErrorMessage, type, formulae. la propiedad type corresponde al tipo de dato que estará alojado en la celda seleccionada en este caso una lista.

En el parámetro formulae recibe un arreglo o en este caso la referencia para hacer un arreglo el cual lo encontrara en la hoja 2 asociado de la celda A1 a la celda A6. 

De esta manera es como referenciamos a otra hoja para crear nuestra lista.

Por ultimo exportamos el archivo y listo.

   await workbook.xlsx.writeBuffer()
         .then(buffer => saveAs(new Blob([buffer]),obj.name))
         .catch(err => console.log(err));

No olvides seguirme para ser de los primeros a quienes les llegue la notificación de lo que se publique.

martes, 23 de agosto de 2022

Snake part_1

En este capitulo comenzaremos con una serie de tutoriales para crear el clásico juego de Snake, por el momento será solo en javascript, dibujando los frames en la etiqueta canvas.


En esta entrada comenzamos con la parte de html y css con el enlace a JS.

index.html

<canvas class="mcv" height="600" id="canvas" width="400"></canvas>


Por el momento el código html lo dejamos de con eso damas, mientras que el apartado css 

estilo.css

.mcv {
    border: solid 0px;
    box-shadow: 0px 0px 5px 2px #404040;
    float: left;
}

Comenzamos con el javascript de la siguiente manera.

Para este punto quiero mencionar que en este caso estoy comenzando a usar los objetos de tipo clase en javaScript.

El codigo comienza en con lo siguiente.

Game.js

class Game{
     //constructor de la clase
     constructor(){
          this.c = document.getElementById("canvas");
          this.ctx = this.c.getContext("2d");
     }
     //evento inicial de la clase
     //nos ayudara a iniciar los demas objetos
     init(){
          var ts = this;
          this.interval = setInterval(function() {
               ts.update();
          }, 500);
     }
     //evento que pintara lo que veremos
     draw(){
          this.ctx.clearRect(0,0,this.c.width,this.c.height);
          this.ctx.beginPath();
          this.ctx.font = "12px Verdana";
          this.ctx.fillStyle="green";
          this.ctx.fillText('inovania.blogspot.com', 50, 50);
          this.ctx.stroke();
     }
     //evento que actualiza el estado del juego.
     update(){
          this.draw();
     }
}
//llamado de la clase
new Game().init();

Dejamos hasta aquí la entrada.



No olvides seguirme para ser de los primeros en recibir las notificaciones de la continuidad del juego.