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.
__________________________________
|