1

el problema es que necesito construir un html, pero tengo una variable llamada "status" y basicamente trae el contacto de una persona, si la variable es true, imprime la tarjeta. Si status en false no imprime nada.

Algo así.

$(td_result).html(`
            <a href="mailto:${email}">
                <div class="container-target">
                    <div class="mx-auto">
                        <div class="card-body">
                            <h5 class="card-title mb-0">Details</h5>
                            ${if (status) {`
                                <div class="d-flex align-items-center">
                                <p class="card-text">Name Example</p>
                                <div class="rounded-circle bg-success ml-2" style="width: 10px; height: 10px;"></div>
                            </div>
                            <p class="card-text">Hitpath | Aff ID</p>
                            <div class="d-flex align-items-center">
                                <p class="card-text mb-0">
                                    <span>WhoIs: ${email}</span>
                                    <i class="fa fa-envelope-o" aria-hidden="true"></i>
                                </p>
                            </div>
                            `}`
                        </div>
                    </div>
                </div>
            </a>
        `);

Que se les ocurre? Yo se que puedo hacer variables por secciones pero quiero conocer sus formas, quizas haya una buena y sencilla solución.

1 respuesta 1

2

No se pueden poner if ... else ... dentro de Plantillas Literales

Lo podrías solucionar con Operadores Ternarios.

Usando tu ejemplo:

$(td_result).html(`
    <a href="mailto:${email}">
        <div class="container-target">
            <div class="mx-auto">
                <div class="card-body">
                    <h5 class="card-title mb-0">Details</h5>
                    ${status ? `
                        <div class="d-flex align-items-center">
                        <p class="card-text">Name Example</p>
                        <div class="rounded-circle bg-success ml-2" style="width: 10px; height: 10px;"></div>
                    </div>
                    <p class="card-text">Hitpath | Aff ID</p>
                    <div class="d-flex align-items-center">
                        <p class="card-text mb-0">
                            <span>WhoIs: ${email}</span>
                            <i class="fa fa-envelope-o" aria-hidden="true"></i>
                        </p>
                    </div>
                    ` : ''}
                </div>
            </div>
        </div>
    </a>`);

Ahora bien, te recomendaría escribir una funcion para aclarar el código.

Te dejo un ejemplo auto-contenido:

var email = "[email protected]";
var status = false;

function ifHasStatusReturnCard(status, email){
    if(status)
        return `
            <div class="d-flex align-items-center">
                <p class="card-text">Name Example</p>
                <div class="rounded-circle bg-success ml-2" style="width: 10px; height: 10px;"></div>
            </div>
            <p class="card-text">Hitpath | Aff ID</p>
            <div class="d-flex align-items-center">
                <p class="card-text mb-0">
                    <span>WhoIs: ${email}</span>
                    <i class="fa fa-envelope-o" aria-hidden="true"></i>
                </p>
            </div>
            `;
    return '';
}

var str = `
    <a href="mailto:${email}">
        <div class="container-target">
            <div class="mx-auto">
                <div class="card-body">
                    <h5 class="card-title mb-0">Details</h5>
                    ${ifHasStatusReturnCard(status, email)}
                </div>
            </div>
        </div>
    </a>`

console.log(str);
1
  • 1
    Eres un crack! Realmente ya lo habia resuelto usando variables tal como la funcion, pero no sabia que podia utilizar el operador ternario de esa forma! Y si ese texto lo llevamos a una variable donde el valor dependa tal cual del operador ternario, en el html solo tendremos que imprimir la variable, sea lo que sea. Commented el 27 mar. 2023 a las 15:18

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.