0

como dice en el titulo tengo un programa que valida los datos de un formulario y una vez validados los guarda en un array, el problema surge cuando una vez validados los datos se creará un objeto de nombre vehiculo con estos datos y este objeto se irá almacenando en un array de vehículos dentro del sessionStorage, la cual por mas que lo intente no soy capaz de almacenar los datos en el sessionStorage. El key debe llamarse “misVehículos” y su valor será un array con todos los vehículos insertados hasta el momento, no entiendo como hacer que el key sea misVehículos y pasarle el array.

Ademas si la matrícula del vehículo ya existe mostraremos un mensaje y el usuario deberá modificar dicha matrícula para poder guardarla en el array, cosa que no tengo muy claro como comprobar.

Dicho esto aquí paso el código que llevo hasta el momento.

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="mensaje.js"></script>
    <title>Document</title>
</head>
<body>
    <form id="f1">
        <fieldset>Concesionario</fieldset>
        <p><label for="Matricula">Matricula: <input type="text" id="c1"></label></p>
        <p><label for="tipo_de_vehiculo">Tipo de vehiculo: <input type="text" id="c2"></label></p>
        <p><label for="anyomatriculacion">Año de matriculacion: <input type="text" id="c3"></label></p>
    </form>
    <input type="button" id="guardar" value="Guardar">
    <input type="button" id="buscar" value="Buscar" disabled>
</body>
</html>

javascript:

   window.onload = function () {
    document.getElementById('guardar').onclick = guardar;
}

function Concesionario(matricula, tipo_vehiculo, anyomatriculacion) {
    this.matricula = matricula;
    this.tipo_vehiculo = tipo_vehiculo;
    this.anyomatriculacion = anyomatriculacion;
}

var concesionario = new Array();

debugger;

function validar() {
    var valid = true;
    var error = '';

    var matricula = new RegExp("^[A-Z]{2}\\d{4}-[A-Z]{3}$");
    var valormatricula = document.getElementById('c1').value;
    if (!matricula.test(valormatricula)) {
        if (valid) {
            document.getElementById('c1').focus();
        }
        valid = false;
        error += 'Erro en la matricula Matrícula del vehículo que tenga el formato: << LLNNNN-LLL >> donde L es una letra mayúscula y N un número del 0 al 9.\n ';
    }

    var tipo_vehiculo = new RegExp("^(Coche|coche|COCHE|moto|Moto|MOTO|camion|Camion|CAMION)$");
    var valortipo_vehiculo = document.getElementById('c2').value;
    if (!tipo_vehiculo.test(valortipo_vehiculo)) {
        if (valid) {
            document.getElementById('c1').focus();
        }
        valid = false;
        error += 'Error en el tipo de vehiculo, los valores son << coche, moto o camión>> Tened en cuenta que los datos pueden ser insertados en mayúsculas o minúsculas y ambos serán válidos.\n ';
    }

    var anyomatriculacion = new RegExp("^([2][0][1][0-9])|([2][0][2][0-2])$");
    var valoranyomatriculacion = document.getElementById('c3').value;
    if (!anyomatriculacion.test(valoranyomatriculacion)) {
        if (valid) {
            document.getElementById('c3').focus();
        }
        valid = false;
        error += 'Fecha incorrecta de 2015 a 2021\n';
    }

    if (valid) {

        alert('Los datos son validos');

        //document.getElementById("f1").reset();
        document.getElementById('buscar').disabled = false;
        //document.getElementById('recuperar').disabled = false;
    } else {
        document.getElementById('buscar').disabled = true;
        // document.getElementById('recuperar').disabled = true;

        alert('Revise el formulario\n\n' + error);
    }

    return valid;

}


debugger;

function guardar() {
    debugger;
    if (validar()) {
        var valormatricula = document.getElementById('c1').value;
        var valortipo_vehiculo = document.getElementById('c2').value;
        var valoranyomatriculacion = document.getElementById('c3').value;

        var coche = new Concesionario(valormatricula, valortipo_vehiculo, valoranyomatriculacion);
        var enc = false;
        for (var i = 0; i < concesionario.length && !enc; i++) {
            var coche = concesionario[i];
            if (coche.matricula === valormatricula) {
                enc = true;
            }

        }
        if (!enc) {
            concesionario.push(coche);
            console.log(concesionario);
            concesionario.forEach(datoscoches => {
                sessionStorage.setItem("misVehiculos", JSON.stringify(datoscoches));
                console.log(concesionario);
            });
            document.getElementById("f1").reset();
        } else {
            alert('El coche con la matricula ' + valormatricula + ' ya existe.');
        }

    }
}
7
  • Esto da un undefined: JSON.stringify(datoscoches.concesionario)). ¿No será que quieres poner un JSON.stringify(datoscoches))?
    – masterguru
    el 18 feb. 2022 a las 8:06
  • @masterguru, si tienes razón me he equivocado en JSON.stringify es (datoscoches)), aun así sigo sin saber como hacer el key.
    – Jos
    el 18 feb. 2022 a las 8:36
  • ¿Como quieres que se llame el "key"? ¿Quieres que se llame datoscoches.misVehiculos? Pues en el setItem encierrala entre apostrofes o comillas, es decir, así: sessionStorage.setItem('datoscoches.misVehiculos',JSON.stringify(datoscoches)); y luego lo puedes recuperar con sessionStorage.getItem("datoscoches.misVehiculos");
    – masterguru
    el 18 feb. 2022 a las 8:54
  • @masterguru, quiero que se llame mis vehiculos, acabo de entender como hacerlo es que tenga que hacer, que es mantener una misma key y que se le guarden en el array las matriculas sin que se repita la matricula, comprobación que ya tengo hecha pero el fallo que tengo es que se machaca el array cada vez que se ejecuta y no se como evitar eso.
    – Jos
    el 18 feb. 2022 a las 9:05
  • Pues antes de sobreescribir el array lo recuperas del sessionStorage con getItem asignandolo a una variable y parseando el JSON con JSON.parse creo, luego a esa variable le agregas los nuevos datos, y finalmente vuelves a sobreescribir la key del sessionStorage con el JSON.stringify de la nueva variable. No se si me explico o no se me entiende.
    – masterguru
    el 18 feb. 2022 a las 9:09

1 respuesta 1

0

Al final el error era que declaraba el array de forma global cuando lo que tenia que haber hecho es crearlo dodne se insertan los datos e comprobar si el array contiene datos y si no es asi indiciarlo a vacio y si ya hay datos hacer un parse para convertirlo en onjetos. Dicho todo esto adjunto el codigo.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="mensaje.js"></script>
    <title>Document</title>
</head>
<body>
    <form id="f1">
        <fieldset>Concesionario</fieldset>
        <p><label for="Matricula">Matricula: <input type="text" id="c1"></label></p>
        <p><label for="tipo_de_vehiculo">Tipo de vehiculo: <input type="text" id="c2"></label></p>
        <p><label for="anyomatriculacion">Año de matriculacion: <input type="text" id="c3"></label></p>
    </form>
    <input type="button" id="guardar" value="Guardar">
    <input type="button" id="buscar" value="Buscar" >

    <ol id="lista"></ol>
</body>
</html>

javascript:

window.onload = function () {
    document.getElementById('guardar').onclick = guardar;
    document.getElementById('buscar').onclick = buscar;
}

function Coche(matricula, tipo_vehiculo, anyomatriculacion) {
    this.matricula = matricula;
    this.tipo_vehiculo = tipo_vehiculo;
    this.anyomatriculacion = anyomatriculacion;
}



function validar() {
    var valid = true;
    var error = '';

    var matricula = new RegExp("^[A-Z]{2}\\d{4}-[A-Z]{3}$");
    var valormatricula = document.getElementById('c1').value;
    if (!matricula.test(valormatricula)) {
        if (valid) {
            document.getElementById('c1').focus();
        }
        valid = false;
        error += 'Erro en la matricula Matrícula del vehículo que tenga el formato: << LLNNNN-LLL >> donde L es una letra mayúscula y N un número del 0 al 9.\n ';
    }

    var tipo_vehiculo = new RegExp("^(Coche|coche|COCHE|moto|Moto|MOTO|camion|Camion|CAMION|camión|Camión|CAMIÓN)$");
    var valortipo_vehiculo = document.getElementById('c2').value;
    if (!tipo_vehiculo.test(valortipo_vehiculo)) {
        if (valid) {
            document.getElementById('c1').focus();
        }
        valid = false;
        error += 'Error en el tipo de vehiculo, los valores son << coche, moto o camión>> Tened en cuenta que los datos pueden ser insertados en mayúsculas o minúsculas y ambos serán válidos.\n ';
    }

    var anyomatriculacion = new RegExp("^([2][0][1][0-9])|([2][0][2][0-2])$");
    var valoranyomatriculacion = document.getElementById('c3').value;
    if (!anyomatriculacion.test(valoranyomatriculacion)) {
        if (valid) {
            document.getElementById('c3').focus();
        }
        valid = false;
        error += 'Fecha incorrecta de 2015 a 2021\n';
    }

    if (valid) {

        alert('Los datos son validos');

        //document.getElementById("f1").reset();
        //document.getElementById('buscar').disabled = false;
        //document.getElementById('recuperar').disabled = false;
    } else {
        //document.getElementById('buscar').disabled = true;
        // document.getElementById('recuperar').disabled = true;

        alert('Revise el formulario\n\n' + error);
    }

    return valid;

}





function guardar() {
    debugger;
    if (validar()) {
        var valormatricula = document.getElementById('c1').value;
        var valortipo_vehiculo = document.getElementById('c2').value.toLowerCase();
        var valoranyomatriculacion = document.getElementById('c3').value;

        // Conseguir el array de vehiculos
        var concesionario;
        var concesionarioStr = sessionStorage.getItem("misVehiculos");
        if (concesionarioStr != null) {//
            concesionario = JSON.parse(concesionarioStr);
        }else{
            concesionario = [];
        }

        // Buscar en el array
        var coche = new Coche(valormatricula, valortipo_vehiculo, valoranyomatriculacion);
        var enc = false;
        for (var i = 0; i < concesionario.length && !enc; i++) {
            var cocheAux = concesionario[i];
            if (cocheAux.matricula === valormatricula) {
                enc = true;
            }

        }

        // Si no está en el array
        if (!enc) {
            debugger;
            concesionario.push(coche); // Lo almaceno
            console.log(concesionario);
            sessionStorage.setItem("misVehiculos", JSON.stringify(concesionario)); // Machaco lo que hay en el sessionStorage

            document.getElementById("f1").reset();
        } else {
            alert('El coche con la matricula ' + valormatricula + ' ya existe.');
        }

    }
}


function buscar(){

    var content;
    var buscar = prompt("ingresa el año de los coches que quieres ver");
    var exist = false;

    
    if (buscar) { //si existe consultar que entre y realice el foreach
        var concesionario;
        var concesionarioStr = sessionStorage.getItem("misVehiculos");
        if (concesionarioStr != null) {//
            concesionario = JSON.parse(concesionarioStr);
        }else{
            concesionario = [];
        }

        content = document.getElementById('lista');
        content.innerHTML = '';

        concesionario.forEach(coche => {
            if (buscar === coche.anyomatriculacion) {
                exist = true;

                var lista = document.createElement('li');

                var txtlistamatricula = document.createTextNode('Matricula: '+coche.matricula+' - Tipo de vehiculo: '+ coche.tipo_vehiculo);
                lista.appendChild(txtlistamatricula);

                
                
                content.appendChild(lista);
            }
        });
      
        
    } else {
        alert("No has insertado ningun dato");
    }

    if (buscar && !exist) { //al ser cierto que es falso hace el if
        alert('No existe nadie de ese año ' + buscar);
    }

}

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.