1

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();
2
  • 1
    Se me ocurre que sería mas simple guardar todo el JSON en sessionStorage en una única clave y al llamar a mostrar recien recorrerlo e ir agregando los que coincidan directamente los elementos al contect. Si te parece bien, puedo crearte una respuesta
    – Marcos
    el 11 feb. 2022 a las 12:55
  • @Marcos, por desgracia las claves del JSON tienen que ser el nombre de los profesores si o si, no hay otra manera de hacerlo.
    – Jos
    el 12 feb. 2022 a las 10:26

1 respuesta 1

0

Podemos crear un objeto profesores el cual usaremos almacenar los nombre de los profesores y sus cursos.

Al recorrer los cursos, verificamos si el nombre del profesor esta en profesores y si no esta lo inicializamos como un arreglo donde iremos agregando los distintos cursos.

Ejemplo:

let profesores = {}; // hashmap
for (let index = 0; index < cursos.length; index++) {

  var profesor = cursos[index].profesor;

  // Si aún no existe
  if (!profesores[profesor]) {
    // Inicializamos como un arreglo
    profesores[profesor] = [];
  }

  // Agregamos al arrelgo la materia
  profesores[profesor].push({
    id: cursos[index].id,
    materia: cursos[index].materia,
    nivel: cursos[index].nivel
  });
}

// Por cada "profesor" en el objeto
Object.keys(profesores).map(profesor => {
  // Guardamos en el storage
  let jsonData = JSON.stringify(profesores[profesor]);
  sessionStorage.setItem(profesor, jsonData);
});

Luego al llamar a la función mostrar y validar que el nombre del profesor existen en el storage, recuperamos el arreglo, lo recorremos y por cada curso creamos un elemento.

Ejemplo:

function mostrar() {
  let profesor = prompt('Introduce el nombre para ver su asignatura ');
  let value = sessionStorage.getItem(profesor);
  let cursos = value ? JSON.parse(value) : false;

  // Si no hay cursos
  if (!cursos) {
    alert("No has insertado ningun profesor, o profesor equivocado");
  } else {

    var content = document.getElementById('mostrar');
    content.innerHTML = '';
    // Por cada curso
    cursos.forEach(info => {
      // Creamos un elemento
      var divprofesor = document.createElement('div');
      var txtprofesor = document.createTextNode('Asignarua: ' + info.materia);

      divprofesor.appendChild(txtprofesor);
      // y lo agregamos al contenedor
      content.appendChild(divprofesor);
    });
  }
}
1
  • Lo conseguir resolver al final de otra forma, pero esta tambien es muy acertada muchas gracias.
    – Jos
    el 13 feb. 2022 a las 11:09

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.