Con la librería dart:json podemos generar y cargar datos con formato JSON.
Dart contiene dos funciones principales para trabajar con cadenas JSON:
- parse () : Pasa de JSON a Dart
- stringify () : Pasa de Dart a JSON
Ambas funciones convierten los tipos de datos automaticamente: num, String, bool, null, List, Map.
El siguiente programa toma una cadena JSON la muestra en el DOM y actualiza la cadena JSON si se modifican en el DOM.
Fases del programa ficha_json.dart:
- Llena la ficha en formato JSON en la función populateFromJson:
- void populateFromJson() {
String jsonDataAsString ='''
{ "edad":46, ... }
''';
Map jsonData = json.parse(jsonDataAsString); - Extrae las cadenas para rellenar los inputs con cada dato:
- edad = jsonData['edad'].toString();
- Convierte las cadenas de los inputs en cada tipo de variable
- num edad_json = int.parse(edad);
- LLena el Map con todos las etiquetas y variables:
- Map formData = {'edad': edad_json,'altura': altura_json,...
- Convierte a formato JSON:
- mapAsJson = json.stringify(formData);
import 'dart:html';
import 'dart:json' as json;
String mapAsJson;
String edad='';
String altura='';
String nombre='';
String familia1='';
String familia2='';
String familia3='';
String chocolate='';
void main() {
populateFromJson();
showJson();
}
//Funcion crea una cadena con el contenido JSON
void populateFromJson() {
String jsonDataAsString ='''
{ "edad":46,
"altura":1.80,
"nacionalidad":true,
"nombre":"Óscar Romero",
"familia":["Maribel","Laura","Nicolás"]
}
''';
//Pasa la cadena al formato JSON
Map jsonData = json.parse(jsonDataAsString);
//Extrae cada elemento del formato JSON en cadenas
edad = jsonData['edad'].toString();
altura = jsonData['altura'].toString();
nombre = jsonData['nombre'];
familia1 = jsonData['familia'][0];
familia2 = jsonData['familia'][1];
familia3 = jsonData['familia'][2];
if (jsonData['nacionalidad']) {
var anElement = query('#true');
anElement.checked = true;
} else {
var anElement = query('#false');
anElement.checked = true;
}
}
//Funcion crea el formato JSON
void showJson() {
num edad_json = int.parse(edad);
num altura_json = double.parse(altura);
var anElement = query('#true');
bool nacionalidad_json = anElement.checked ? true : false;
List<String> familia_json = [ familia1, familia2, familia3 ];
Map formData = {
'edad': edad_json,
'altura': altura_json,
'nacionalidad': nacionalidad_json,
'nombre': nombre,
'familia': familia_json
};
// Convierte todo a JSON
mapAsJson = json.stringify(formData);
}
ficha_json.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ficha JSON</title>
<link rel="stylesheet" href="ficha_json.css">
</head>
<body>
<h1>Ficha en formato JSON</h1>
<table>
<tbody>
<tr>
<td align="right">Edad(integer):</td>
<td><input type="text" bind-value="edad" on-change="showJson()"></td>
</tr>
<tr>
<td align="right">Altura(double):</td>
<td><input type="text" bind-value="altura" on-change="showJson()"></td>
</tr>
<tr>
<td align="right">Nombre(string):</td>
<td><input type="text" bind-value="nombre" on-change="showJson()"></td>
</tr>
<tr>
<td align="right">Miembros de la familia: List<String></td>
<td>
<input type="text" bind-value="familia1" on-change="showJson()">
<input type="text" bind-value="familia2" on-change="showJson()">
<input type="text" bind-value="familia3" on-change="showJson()">
</td>
</tr>
<tr>
<td align="right">Nacionalidad (bool):</td>
<td><input type="radio" on-change="showJson()" name="chocolate" value="true" id="true" checked="checked">Español
<input type="radio" on-change="showJson()" name="chocolate" value="false" id="false">Extranjero
</td>
</tr>
</tbody>
</table>
<div class="givemespace">
<label>Ficha en formato JSON</label><br>
<textarea id="mapasjson" readonly>{{ mapAsJson }}</textarea>
</div>
<script type="application/dart" src="ficha_json.dart"></script>
<script src="packages/browser/dart.js"></script>
</body>
</html>
ficha_json.css
body {
background-color: #F8F8F8;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
font-weight: normal;
line-height: 1.2em;
margin: 15px;
}
h1, p {
color: #333;
}
#sample_container_id {
width: 100%;
height: 400px;
position: relative;
border: 1px solid #ccc;
background-color: #fff;
}
.givemespace {
margin-top: 15px;
}
table {
text-align: left;
border-spacing: 5px 15px
}
.result {
background-color: Ivory;
padding: 5px 5px 5px 5px;
border: 1px solid black;
}
input {
display: block;
}
input[type="radio"] {
display: inline;
}
#mapasjson {
background-color: Ivory;
padding: 5px 5px 5px 5px;
margin-top: 15px;
border: 1px solid black;
width: 500px;
height: 50px;
font-size:14px;
}
label {
font-weight: bold;
}
No hay comentarios:
Publicar un comentario