|     Inicio    |   |         |  |   FOROS      |  |      |      
   Elastix - VoIP B4A (Basic4Android) App inventor 2 PHP - MySQL
  Estación meteorológica B4J (Basic4Java) ADB Shell - Android Arduino
  Raspberry Pi Visual Basic Script (VBS) FireBase (BD autoactualizable) NodeMCU como Arduino
  AutoIt (Programación) Visual Basic Cosas de Windows Webs interesantes
Translate:
Búsqueda en este sitio:


.

App inventor 2 en español
Cómo programar los teléfonos móviles con Android.
Curso de App inventor 2 en español - Juan Antonio Villalpando

-- Tutorial de iniciación de App Inventor 2 en español --

Volver al índice del tutorial

___________________________

167F.- Convertir Json a Csv.

p167F_javascript_json_csv.aia

- Tenemos un archivo en formato JSON y lo vamos a convertir a CSV mediante JavaScript.

- Además utilizaremos la extensión TableView para presentarlo en una tabla.

_________________
- Diseño.

_________________
- Bloques.

_________________
- Código JavaScript.

paises.htm

<!DOCTYPE html>
<html><head><meta charset="utf-8"></head>
<body>
<p id="demo"></p>
<script>
var datos =  window.AppInventor.getWebViewString(); // Entrada de datos.

datos = JSON.stringify(datos);
datos = eval(datos);
datos = JSON.parse(datos);

JsonFields = ["id","Country","Populat.","Capital","Área"]; // Cabecera. Header.

function JsonToCSV(){
    var csvStr = JsonFields.join(",") + "\n";

    datos.forEach(element => {
        f1 = element.id;
        f2 = element.Country;
        f3 = element.Population;
        f4 = element.Capital;
		f5 = element.Area;
        csvStr +=  f1 + ',' + f2 + ','  + f3 + ',' + f4 + ',' + f5 + "\n"; })	
        return csvStr;
}

window.AppInventor.setWebViewString("" +JsonToCSV());  // Respuesta a CadenaDeWebView
//  document.getElementById("demo").innerHTML = JsonToCSV(); // Web
</script>
</body></html>

 

paises.json

[
 {
    "id": "1",
    "Country": "Argentina",
    "Population": "45.200",
    "Capital": "Buenos Aires",
    "Area": "2.736"},
{
    "id": "2",
    "Country": "México",
    "Population": "128.932",
    "Capital": "Cdad. México",
    "Area": "1.943"},
{
    "id": "3",
    "Country": "Colombia",
    "Population": "50.882",
    "Capital": "Bogotá",
    "Area": "1.109"},
{
    "id": "4",
    "Country": "Chile",
    "Population": "19.116",
    "Capital": "Santiago",
    "Area": "743"},
{
    "id": "5",
    "Country": "Ecuador",
    "Population": "17.643",
    "Capital": "Quito",
    "Area": "248"},
{
    "id": "6",
    "Country": "Cuba",
    "Population": "11.326",
    "Capital": "La Habana",
    "Area": "106"},
{
    "id": "7",
    "Country": "Venezuela",
    "Population": "28.435",
    "Capital": "Caracas",
    "Area": "882"},
{
    "id": "8",
    "Country": "Perú",
    "Population": "32.971",
    "Capital": "Lima",
    "Area": "1.280"},
{
    "id": "9",
    "Country": "Bolivia",
    "Population": "11.673",
    "Capital": "Sucre",
    "Area": "1.083"}
]

________________________________
2.-
Otro ejemplo.

- En este ejemplo observamos un campo fields, que contiene otros subcampos.

- La aplicación es la misma que la anterior, asignamos los archivos //usuarios.json y usuarios.htm que ya se encuentran en la aplicación del ejemplo anterior.

usuarios.json

[
  {
    "id": "20",
    "fields": {
      "ID": "342",
      "Nombre": "Juan",
      "Edad": 46,
      "Nivel": 5,
      "Ciudad": "Puerto de Santamaría",
      "Profesion": "Electricista"
    },
    "Hora": "2020-04-27T18:32:46.000Z"
  },
  {
    "id": "21",
    "fields": {
      "ID": "223",
      "Nombre": "Antonio",
      "Edad": 23,
      "Nivel": 4,
      "Ciudad": "Conil",
      "Profesion": "Fontanero"
    },
    "Hora": "2020-05-27T15:32:33.000Z"
  },
  {
    "id": "22",
    "fields": {
      "ID": "893",
      "Nombre": "José",
      "Edad": 38,
      "Nivel": 5,
      "Ciudad": "Cádiz",
      "Profesion": "Soldador"
    },
    "Hora": "2020-06-27T22:32:22.000Z"
  },
  {
    "id": "23",
    "fields": {
      "ID": "765",
      "Nombre": "Pedro",
      "Edad": 51,
      "Nivel": 3,
      "Ciudad": "San Fernando",
      "Profesion": "Mecánico"
    },
    "Hora": "2020-07-27T11:30:52.000Z"
  },
  {
    "id": "24",
    "fields": {
      "ID": "650",
      "Nombre": "Luis",
      "Edad": 19,
      "Nivel": 2,
      "Ciudad": "Medina Sidonia",
      "Profesion": "Conductor"
    },
    "Hora": "2020-08-27T09:22:49.000Z"
  }
]

 

usuarios.htm

<!DOCTYPE html>
<html><head><meta charset="utf-8"></head>
<body>
<p id="demo"></p>
<script>
var datos =  window.AppInventor.getWebViewString(); // Entrada de datos.

datos = JSON.stringify(datos);
datos = eval(datos);
datos = JSON.parse(datos);

JsonFields = ["id","Nombre","Edad","Nivel","Ciudad","Profesion"]; // Cabecera. Header.

function JsonToCSV(){
    var csvStr = JsonFields.join(",") + "\n";

    datos.forEach(element => {
        f1 = element.id;
        f2 = element.fields.Nombre;
        f3 = element.fields.Edad;
        f4 = element.fields.Nivel;
		f5 = element.fields.Ciudad;
		f6 = element.fields.Profesion;
        csvStr +=  f1 + ',' + f2 + ','  + f3 + ',' + f4 + ',' + f5  + ',' + f6 + "\n"; })	
        return csvStr;
}

window.AppInventor.setWebViewString("" +JsonToCSV());  // Respuesta a CadenaDeWebView
//  document.getElementById("demo").innerHTML = JsonToCSV(); // Web
</script>
</body></html>

 

_________________
- Comentarios
.

- Código adaptado de:

https://stackoverflow.com/questions/8847766/how-to-convert-json-to-csv-format-and-store-in-a-variable

________________________________________________________________
________________________________________________________________

3.- Ordenar cada columna cuando pulsamos sobre ella.

p167F_javascript_json_csv_ordena.aia

- Cuando pulsemos sobre cada columna se ordenará toda la tabla según el orden de la columna pulsada.

- Cada vez que pulsemos se ordenará de mayor a menor y de menor a mayor alternativamente.

- Una pequeña restricción, los números no deben llevar separador decimal.

- Basado en https://stackoverflow.com/questions/6913512/how-to-sort-an-array-of-objects-by-multiple-fields

_________________
- Diseño.

_________________
- Bloques.

paises.json

[
 {
    "id": "1",
    "Country": "Argentina",
    "Population": "45.200",
    "Capital": "Buenos Aires",
    "Area": "2.736"},
{
    "id": "2",
    "Country": "México",
    "Population": "128.932",
    "Capital": "Cdad. México",
    "Area": "1.943"},
{
    "id": "3",
    "Country": "Colombia",
    "Population": "50.882",
    "Capital": "Bogotá",
    "Area": "1.109"},
{
    "id": "4",
    "Country": "Chile",
    "Population": "19.116",
    "Capital": "Santiago",
    "Area": "743"},
{
    "id": "5",
    "Country": "Ecuador",
    "Population": "17.643",
    "Capital": "Quito",
    "Area": "248"},
{
    "id": "6",
    "Country": "Cuba",
    "Population": "11.326",
    "Capital": "La Habana",
    "Area": "106"},
{
    "id": "7",
    "Country": "Venezuela",
    "Population": "28.435",
    "Capital": "Caracas",
    "Area": "882"},
{
    "id": "8",
    "Country": "Perú",
    "Population": "32.971",
    "Capital": "Lima",
    "Area": "1.280"},
{
    "id": "9",
    "Country": "Bolivia",
    "Population": "11.673",
    "Capital": "Sucre",
    "Area": "1.083"}
]

 

ordenar.htm

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"></head><body>
<p id="demo"></p>
<script>
var data =  window.AppInventor.getWebViewString(); // Entrada de datos.

    parte = data.split("|"); 
    ordena = parte[0]; // sort this column
	reverse = parte[1]; // reverse (1 or -1)
    datos = parte[2];   // datos

datos = JSON.stringify(datos);
datos = eval(datos);
datos = JSON.parse(datos);

//////////////////////////////////// Ordena columnas de numeros. Numbers.
const sort_by2 = (field, reverse, primer) => {
  const key = primer ?
    function(x) {
      return primer(x[field])
    } :
    function(x) {
      return x[field]
    };

  // reverse = !reverse ? 1 : -1;

  return function(a, b) {
    return a = key(a), b = key(b), reverse * ((a > b) - (b > a));
  }
}
///////////////////////////////// Ordena columnas de cadenas. Strings.
var sort_by = function() {
    var fields = [].slice.call(arguments),
       n_fields = fields.length;

    return function(A, B) {
		var a, b, field, key, primer, result;
        for (var i = 0, l = n_fields; i < l; i++) {
            result = 0;
            field = fields[i];

            key = typeof field === 'string' ? field : field.name;

            a = A[key];
            b = B[key];

            if (typeof field.primer !== 'undefined') {
                a = field.primer(a);
                b = field.primer(b);
            }

          //  reverse = (field.reverse) ? -1 : 1;

            if (a < b) result = reverse * -1;
            if (a > b) result = reverse * 1;
            if (result !== 0) break;
        }
        return result;
    }
}

JsonFields = ["id","Country","Populat.","Capital","Área"]; // Cabecera. Header.
Columnas_ordenar = ["id","Country","Population","Capital","Area"]; // Ordenar una.
var ordena_esta = Columnas_ordenar[ordena];

if (ordena == 2 || ordena == 4) { // Columnas numéricas 2 and 4. Columns with numbers.
datos.sort(sort_by2(ordena_esta, reverse, parseInt)); // Numeros
} else {
datos.sort(sort_by(ordena_esta, {name: ordena_esta,primer: parseInt,reverse: reverse})); // Cadenas
}

////////////// Presentacion en csv //////////////////////////////////
function JsonToCSV(){
    var csvStr = JsonFields.join(",") + "\n";

    datos.forEach(element => {
        f1 = element.id;
        f2 = element.Country;
        f3 = element.Population;
        f4 = element.Capital;
		f5 = element.Area;
        csvStr +=  f1 + ',' + f2 + ','  + f3 + ',' + f4 + ',' + f5 + "\n"; })	
        return csvStr;
}

window.AppInventor.setWebViewString("" +JsonToCSV());  // Respuesta a CadenaDeWebView
//  document.getElementById("demo").innerHTML = JsonToCSV(); // Web
</script>
</body></html>

___________________________________________
- JSON.stringify

- Otra forma de pasar los valores a App Inventor es mediante JSON.stringify()

- JSON.stringify() también se utiliza en los códigos de Google Sheet.

__________________________________

 

- Mi correo:
juana1991@yahoo.com
- KIO4.COM - Política de cookies. Textos e imágenes propiedad del autor:
© Juan A. Villalpando
No se permite la copia de información ni imágenes.
Usamos cookies propias y de terceros que entre otras cosas recogen datos sobre sus hábitos de navegación y realizan análisis de uso de nuestro sitio.
Si continúa navegando consideramos que acepta su uso. Acepto    Más información