parse y stringify.Versión 1
Disponemos de un archivo JSON que deseamos consultar cuando el usuario pulse un botón.
Podemos ver este código en el siguiente enlace.
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Transformaciones con JSON</title>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<ul>
<li>Marca: <strong id="marca"></strong></li>
<li>Modelos: <i id="modelo"></i></li>
</ul>
<p>
<input type="button" value="Consultar" onclick="loadJSONdoc()"/>
</p>
<p id="mio"></p>
</body>
</html> JavaScript
JSON.parse() toma una cadena JSON y la transforma en un objeto JavaScript. JSON.stringify() toma un objeto JavaScript y lo transforma en una cadena JSON. function loadJSONdoc() {
var jsonhttp = new XMLHttpRequest();
jsonhttp.onreadystatechange = function () {
if (jsonhttp.readyState === 4 && jsonhttp.status === 200) {
var ObjJSON = JSON.parse(jsonhttp.responseText);
var StringifyJSON = JSON.stringify(ObjJSON);
document.getElementById("mio").innerHTML="JSON como cadena:<br>" + StringifyJSON;
document.getElementById("marca").innerHTML = ObjJSON.empresa;
document.getElementById("modelo").innerHTML = ObjJSON.gama.toString();
}
};
jsonhttp.open("GET", "ejemploJSON.json", true);
jsonhttp.send();
} ejemploJSON.json
{
"empresa": "Intel",
"gama": ["i3", "i5", "i7", "i9"]
} Versión 2
En esta ocasión el fichero JSON es un array que contiene dos objetos uno para Intel y otro para AMD. El usuario puede elegir con un desplegable la marca sobre la que desea hacer la consulta.
Algunas referencias útiles en w3schools.
- https://www.w3schools.com/js/js_json_stringify.asp
- https://www.w3schools.com/js/js_json_http.asp
- https://www.w3schools.com/js/js_json_parse.asp
HTML
En este caso hemos añadido el desplegable con tres opciones. La primera de ellas está vacía y oculta para que no se sea por defecto a Intel por defecto. <!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Transformaciones con JSON</title>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<ul>
<li>Marca: <strong id="marca"></strong></li>
<li>Modelos: <i id="modelo"></i></li>
</ul>
<form>
<label for="corporacion">Indique la marca: </label>
<select id="myDropdown" name="corporacion">
<option hidden disabled selected></option>
<option value="intel">Intel</option>
<option value="amd">AMD</option>
</select>
<p>
<input type="button" value="Consultar" onclick="loadJSONdoc()"/>
</p>
</form>
<p id="mio"></p>
</body>
</html> JavaScript
Capturamosn que es el valor del desplegable y lo utilizamos para el índice con el que vamos a consultar el array del archivo JSON. function loadJSONdoc() {
var jsonhttp = new XMLHttpRequest();
jsonhttp.onreadystatechange = function () {
if (jsonhttp.readyState === 4 && jsonhttp.status === 200) {
var ObjJSON = JSON.parse(jsonhttp.responseText);
var StringifyJSON = JSON.stringify(ObjJSON);
document.getElementById("mio").innerHTML="JSON como cadena:<br>" + StringifyJSON;
var n=document.getElementById("myDropdown").selectedIndex;
elige(n); //si n=1 se ha elegido Intel, si n=2 AMD
function elige(n){
document.getElementById("marca").innerHTML = ObjJSON[n-1].empresa;
document.getElementById("modelo").innerHTML = ObjJSON[n-1].gama.toString();
}
}
};
jsonhttp.open("GET", "ejemploJSON.json", true);
jsonhttp.send();
} ejemploJSON.json
Vemos un corchete [] que contiene dos llaves separadas por una coma {},{}. Este es un objeto JSON válido que se puede verificar en la siguiente página. [
{
"empresa":"Intel",
"gama":[
"i3",
"i5",
"i7",
"i9"
]
},
{
"empresa":"AMD",
"gama":[
"Ryzen3",
"Ryzen5",
"Ryzen7",
"Threadripper"
]
}
] 
No hay comentarios:
Publicar un comentario