1

Estoy intentando obtener los datos almacenados en el localStorage, para calcular Nota Promedio, Nota Mayor y Nota Menor, sin embargo no me muestra el resultado, como tampoco me generar ningún error.

Mi código

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel='stylesheet' href='css/estilos.css'/>
    <link href='https://fonts.googleapis.com/css?family=Amaranth' rel='stylesheet'>
        <script src="jquery-3.2.1.js"></script>
        <script type="text/javascript">

    function editarEstudiante(codigo){
        var estudiante;
        for (var i = 0; i<localStorage.length; i++){
            var clave = localStorage.key(i);
            if (clave == codigo) {
                estudiante = $.parseJSON(localStorage.getItem(clave));

                $("#codigo").val(estudiante.codigo);
                $("#nombre").val(estudiante.nombre);
                $("#nota").val(estudiante.nota);
            }
        }
    }

    function listarEstudiantes(){
        var tabla = "";
        var parrafo1 = $("#p1");

        tabla += '<table border="1">';
        tabla += '<tr>';
        tabla += '<th>CODIGO</th>';
        tabla += '<th>NOMBRE</th>';
        tabla += '<th>NOTA</th>';
        tabla += '<th>EDITAR</th>';
        tabla += '<th>ELIMINAR</th>';
        tabla += '</tr>';

        for (var i=0; i<localStorage.length; i++){
            var clave = localStorage.key(i);
            var estudiante = $.parseJSON(localStorage.getItem(clave));

            tabla += '<tr>';
            tabla += '<td>'+estudiante.codigo+'</td>';
            tabla += '<td>'+estudiante.nombre+'</td>';
            tabla += '<td>'+estudiante.nota+'</td>';
            tabla += '<td><button onclick="editarEstudiante(\''+estudiante.codigo+'\');">Editar</button></td>';
            tabla += '<td><button onclick="eliminarEstudiante(\''+estudiante.codigo+'\');">Eliminar</button></td>';
            tabla += '</tr>';
            }
        tabla += '</table>';
        $(parrafo1).html(tabla);
    }

    function eliminarEstudiante(codigo){
        localStorage.removeItem(codigo);
        listarEstudiantes();
    }

    $(document).ready(function(){
        var contador;
        if(localStorage.length>0){
            contador = localStorage.length+1
        }else{
            contador = 1;
        }

        $("#codigo").val(contador);

        $("#boton1").click(function(){
            var codigo = $("#codigo").val();
            var nombre = $("#nombre").val();
            var nota = $("#nota").val();

            var estudiante = {
                codigo:codigo,
                nombre:nombre,
                nota:nota
            };

            localStorage.setItem(codigo,JSON.stringify(estudiante));
            contador = localStorage.length + 1;

    listarEstudiantes();
    restablecer();

 });

  $("#boton2").click(function(){
    restablecer(9);
  });

  function restablecer(){
    $("#codigo").val(contador);
    $("#nombre").val("");
    $("#nota").val("");
  }

    listarEstudiantes();
    $("#codigo").val();

});

$("#boton3").click(function(){
    var acumulador = 0.0;
    for (var i = 0; i < localStorage.length; i++) {
    acumulador += localStorage[i].nota;
    }
    var promedio = acumulador / localStorage.length;

    alert("La nota promedio es: " + promedio);

});
</script>

Registro de Estudiantes

        <form>
                Codigo:
                <br>
                <input type="text" id="codigo" disabled>
                <br>Nombre:
                <br>
                <input type="text" id="nombre">
                <br>Nota:
                <br>
                <input type="text" id="nota">
        </form>

        <button id="boton1">Registrar Estudiante</button>
            <button id="boton2">Restablecer</button>
            <button id="boton3">Mostrar Nota Promedio</button>
            <button id="boton4">Mostrar Nota Mayor</button>
            <button id="boton5">Mostrar Nota Menor</button>


        <p id="p1"></p>

3 respuestas 3

1

Tu función que calcula el promedio tiene los siguientes errores:

  • localStorage.length devuelve el total de claves guardadas, no el nombre de las claves. Para solucionar este error debes usar localStorage.key(i), el cual te devolverá el nombre de clave en la posición i. Una vez obtenida la clave key, puedes usar localStorage.getItem(key) para obtener el valor de esta.
  • El valor almacenado para cada clave es un JSON String (ver: localStorage.setItem(codigo,JSON.stringify(estudiante));), es decir, que antes de intentar acceder directamente a una propiedad, por ejemplo, estudiante.nota, debes usar JSON.parse(data) para recuperar el object.
  • Por ultimo, cuando obtienes nota = $("#nota").val(), este valor es un string, por lo que debes de convertilo a int (parseInt()) o float (parseFloat()) para poder sumar

Solución:

Podrías corregir lo anteriormente mencionado de la siguiente forma:

$("#boton3").click(function() {
  var acumulador = 0.0,
    key, data, estudiante;
  for (var i = 0; i < localStorage.length; i++) {
    key = localStorage.key(i); // Clave donde esta guardada la info del Est.
    data = localStorage.getItem(key); // Info del Est. en formato JSON
    estudiante = JSON.parse(data); // Objecto estudiante
    acumulador += parseInt(estudiante.nota, 10); // Nota en formato entero
  }
  var promedio = acumulador / localStorage.length;

  alert("La nota promedio es: " + promedio);

});
2
  • Realice los cambios, sin embargo, no me muestra el alert, de hecho, presion el boton y no pasa nada, ni resultado, ni error
    – Gustavo
    Commented el 4 jul. 2017 a las 21:52
  • @Gustavo, te dejo una demo para que compruebes que realizando los cambios propuestos aquí debería funcionar.
    – Marcos
    Commented el 5 jul. 2017 a las 12:15
0

Para recuperar datos del localStorage uso: por ejemplo

var name = localStorage.getItem('name');

Te aconsejo que mires este enlace: Storing Data on The Client with LocalStorage sobre como usar el localStorage, es muy útil.

0
$("#boton3").click(function(){
        var total = 0;
        var promedio = 0;

        for(var i = 0; i < localStorage.length; i++){

            var clave = localStorage.key(i);
            var estudiante = $.parseJSON(localStorage.getItem(clave));

            total += parseInt(estudiante.nota, 10);
            promedio = total / localStorage.length; 
        }


    alert(promedio)

});

Tu Respuesta

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

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