como pone en el titulo tengo un JSON a traves de xampp en el que hago un programa que crea el key a traves del nombre del campo porfesores y el resto de datos los creo como un objeto JSON, todo eso lo parseo y lo guardo en un sessionStorage mediante un for y lo imprime correctamente. El problema surge cuando un profesor con un mismo nombre tiene varias asginaturas a su cargo y solo me imprime la primera asignatura que pilla, esto se debe a que a la hora de guardarlo el key no puede repetirse y no se como hacer para que se guarden y pueda mostrar todas las asignaturas que tienen a su cargo cada profesor. Dicho esto paso todo el codigo con el JSON incluido.
JSON:
<?php
header('Access-Control-Allow-Origin: *');
$json = '{
"cursos": [
{
"id": "01",
"materia": "Desarrollo Aplicaciones Web en Cliente",
"nivel": "2º DAW",
"profesor": "MariAngeles"
},
{
"id": "02",
"materia": "Lenguaje de Marcas",
"nivel": "2º DAW",
"profesor": "MariAngeles"
},
{
"id": "03",
"materia": "Servidor",
"nivel": "2º DAW",
"profesor": "Peligros"
},
{
"id": "04",
"materia": "Interfaces",
"nivel": "2º DAW",
"profesor": "Paco"
},
{
"id": "05",
"materia": "Entornos",
"nivel": "1º DAW",
"profesor": "Peligros"
}
]
}';
echo $json;
?>
html:
<body>
<input type="button" id="btn" value="mostrar datos">
<div id="mostrar"></div>
</body>
javascript:
window.onload = function () {
document.getElementById('btn').onclick = mostrar;
}
function mostrar() {
debugger;
var profesor = prompt('Introduce el nombre para ver su asignatura ');
var exist = false;
var datofiltrado = null;
for (let index = 0; index < sessionStorage.length && !exist; index++) {
var key = sessionStorage.key(index);
if (key === profesor) {
exist=true;
var cursos = sessionStorage.getItem(key);
console.log(cursos);
datofiltrado = JSON.parse(cursos);
console.log(datofiltrado.materia);
}
}
if (!exist) {
alert("No has insertado ningun profesor, o profesor equivocado");
} else {
var content = document.getElementById('mostrar');
content.innerHTML = '';
var divprofesor = document.createElement('div');
var txtprofesor = document.createTextNode('Asignarua: ' + datofiltrado.materia);
divprofesor.appendChild(txtprofesor);
content.appendChild(divprofesor);
}
}
var xmlhttp = new XMLHttpRequest; //esto evalua los campos
debugger;
xmlhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
var myjson = JSON.parse(this.responseText) //igual que el de abajo
//var myjson = eval('('+this.responseText+')');//transforma el contenido que detecta
debugger;
console.log(myjson);
var cursos = myjson.cursos;
console.log(cursos.length);
for (let index = 0; index < cursos.length; index++) {
var profesor = cursos[index].profesor;//es una cadena de texto, y es el key
console.log(profesor);
var curso = {//objeto tipo json
id: cursos[index].id,
materia: cursos[index].materia,
nivel: cursos[index].nivel
}
var jsonData = JSON.stringify(curso);
sessionStorage.setItem(profesor, jsonData);
}
} else if (this.readyState == 4 && (this.status == 404 || this.status != 200)) { //TODO LO QUE SEA DIFERENTE A 200 ES UN ERROR
var h1 = document.createElement('h1');
var txt_h1 = document.createTextNode(this.status + " - " + this.statusText);
h1.appendChild(txt_h1);
document.body.appendChild(h1);
}
}
xmlhttp.open("GET", "http://localhost:90/dwec/EjemploCursos.php");
xmlhttp.send();
sessionStorage
en una única clave y al llamar amostrar
recien recorrerlo e ir agregando los que coincidan directamente los elementos alcontect
. Si te parece bien, puedo crearte una respuesta