2

Hola buenas tardes tengo una duda y no se como validarla, tengo esta tabla donde se llenan todos los campos con un json. introducir la descripción de la imagen aquí

Me muestra todos los datos pero quiero hacer una validacion para que los datos que estan en null los ponga en blanco.

Con esta parte de código valido que el json no venga vació para que no truene, solo que nada mas valida el json

f (datos.lAdjoiningModel != null) {
                for (var i = 0; i < datos.lAdjoiningModel.length; i++) {
                    let tbMC = document.querySelector('#tbMC');
                    if (i%2==0) {
                        tbMC.innerHTML += `
                        <tr>
                            <td style=" font-size: 11px;border: 1px solid black !important; height: 25px; margin: 0px !important; padding: 0px !important; font-size: 11px; text-align: center;">${datos.lAdjoiningModel[i].typeTerrains}</td>
                            <td style=" font-size: 11px;border: 1px solid black !important; height: 25px; margin: 0px !important; padding: 0px !important; font-size: 11px; text-align: center;">${datos.lAdjoiningModel[i].typeDirection}</td>
                            <td style=" font-size: 11px;border: 1px solid black !important; height: 25px; margin: 0px !important; padding: 0px !important; font-size: 11px; text-align: center;">${datos.lAdjoiningModel[i].measure}</td>
                            <td style=" font-size: 11px;border: 1px solid black !important; height: 25px; margin: 0px !important; padding: 0px !important; font-size: 11px; text-align: center;">${datos.lAdjoiningModel[i].description}</td>
                        </tr>`;
                    }else{
                        tbMC.innerHTML += `
                        <tr class="even">
                            <td style=" font-size: 11px;border: 1px solid black !important; height: 25px; margin: 0px !important; padding: 0px !important; font-size: 11px; text-align: center;">${datos.lAdjoiningModel[i].typeTerrains}</td>
                            <td style=" font-size: 11px;border: 1px solid black !important; height: 25px; margin: 0px !important; padding: 0px !important; font-size: 11px; text-align: center;">${datos.lAdjoiningModel[i].typeDirection}</td>
                            <td style=" font-size: 11px;border: 1px solid black !important; height: 25px; margin: 0px !important; padding: 0px !important; font-size: 11px; text-align: center;">${datos.lAdjoiningModel[i].measure}</td>
                            <td style=" font-size: 11px;border: 1px solid black !important; height: 25px; margin: 0px !important; padding: 0px !important; font-size: 11px; text-align: center;">${datos.lAdjoiningModel[i].description}</td>
                        </tr>`;
                    }    
                }
            }else{
                let tbMC = document.querySelector('#tbMC');
                tbMC.innerHTML += `
                <tr>
                    <td style=" font-size: 11px;border: 1px solid black !important; height: 25px; margin: 0px !important; padding: 0px !important; font-size: 11px; text-align: center;"></td>
                    <td style=" font-size: 11px;border: 1px solid black !important; height: 25px; margin: 0px !important; padding: 0px !important; font-size: 11px; text-align: center;"></td>
                    <td style=" font-size: 11px;border: 1px solid black !important; height: 25px; margin: 0px !important; padding: 0px !important; font-size: 11px; text-align: center;"></td>
                    <td style=" font-size: 11px;border: 1px solid black !important; height: 25px; margin: 0px !important; padding: 0px !important; font-size: 11px; text-align: center;"></td>
                </tr>`;
            }

para validarlo probé haciendo lo siguiente pero no funciona claro dentro del mismo for para que no marque error

if(datos.lAdjoiningModel[i].typeDirection != null){
campo
}else{
campo vacio
}

O en el mismo campo poner algo así, pero me marcaba error en el mismo editor de texto

<td style=" font-size: 11px;border: 1px solid black !important; height: 25px; margin: 0px !important; padding: 0px !important; font-size: 11px; text-align: center;">${(datos.lAdjoiningModel[i].typeDirection != null) => datos.lAdjoiningModel[i].typeDirection : " " }</td>

Espero que me puedan ayudar de antemano muchas gracias y tambien si hay alguien que me pueda apoyar diciéndome y mostrándome si un dato se puede poner con 2 decimales aunque no tenga.

3
  • Dentro del for bastaría con if(datos.lAdjoiningModel[i].typeDirection === null) { datos.lAdjoiningModel[i].typeDirection = ""; }
    – Triby
    Commented el 28 abr. 2020 a las 17:42
  • Muchas gracias por tu ayuda Commented el 28 abr. 2020 a las 18:45
  • intenta de esta forma if(!datos.lAdjoiningModel[i].typeDirection) Commented el 28 abr. 2020 a las 20:12

1 respuesta 1

1

Te recomiendo utilizar una clase CSS, para los estilos del td, dado que siempre son los mismos

Ahora bien, puedes reducir código usando if ternario, que también te ayuda para saber si el atributo es null, si lo es pone '' de lo contrario pone el valor

if (datos.lAdjoiningModel != null) {
  for (var i = 0; i < datos.lAdjoiningModel.length; i++) {
    let tbMC = document.querySelector('#tbMC');
    tbMC.innerHTML += `<tr class="${(i % 2 == 0)?'':'even'}"><td>${datos.lAdjoiningModel[i].typeTerrains}</td><td>${datos.lAdjoiningModel[i].typeDirection=='null'?'':datos.lAdjoiningModel[i]}</td>
<td>${datos.lAdjoiningModel[i].measure}</td>
<td>${datos.lAdjoiningModel[i].description}</td>
</tr>`;
  }
} else {
  let tbMC = document.querySelector('#tbMC');
  tbMC.innerHTML += `<tr><td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>`;
}
td {
  font-size: 11px;
  border: 1px solid black !important;
  height: 25px;
  margin: 0px !important;
  padding: 0px !important;
  font-size: 11px;
  text-align: center;
}

1
  • Muchas gracias tratare de hacerlo así porque si son muchas lineas de código Commented el 28 abr. 2020 a las 18:46

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.