Actualmente tengo que analizar algunos json, en html y todo se veía bien hasta que apareció una nueva solicitud.
Tengo que analizar también un valor verdadero o falso. ¿Cómo puedo hacer eso?
Ahora, el requisito es que si es 'verdadero' debo mostrar algún html específico. si el valor es == a falso, escondo ese html específico.
Soy completamente nuevo/no tengo ni idea de analizar booleanos en html, así que aquí estoy pidiendo ayuda.
const friendAndFamily = [{ name: "Serena Gosling", supporterNumber: "0123456789", isStrongRelationship: true, ticketingPoints: "2,500 Ticket Points", thumbnailUrl: "https://i.pravatar.cc/100" }]; function supporterTemplate(supporter) { return ` <div class="supporter"> <img class="supporter-thumbnail" src="${supporter.thumbnailUrl}"> <h4 class="supporter-name"> ${supporter.name} <br> <span class="supporter-relation">${supporter.isStrongRelationship}</span><br> <span class="supporter-number">(${supporter.supporterNumber})</span> </h4> <span>${supporter.ticketingPoints}</span> </div> `; } //GRAP THE ID HERE document.getElementById("crmFriendsAndRelativesContent").innerHTML = ` <h1 class="app-title">My Friends & Family (${friendAndFamily.length} results)</h1> ${friendAndFamily.map(supporterTemplate).join("")} `; <div id="crmFriendsAndRelativesContent"> </div>Cree una nueva variable llamada relationship y, dependiendo de si isStrongRelationship es verdadera o falsa, establezca su valor en una cadena apropiada. Luego use esa variable en la plantilla en su lugar.
const friendAndFamily = [{ name: "Serena Gosling", supporterNumber: "0123456789", isStrongRelationship: true, ticketingPoints: "2,500 Ticket Points", thumbnailUrl: "https://i.pravatar.cc/100" }]; function supporterTemplate(supporter) { const { thumbnailUrl, name, isStrongRelationship, supporterNumber, ticketingPoints } = supporter; const relationship = isStrongRelationship ? '<span>Strong relationship</span>' : '<span>Not a strong relationship</span>'; return ` <div class="supporter"> <img class="supporter-thumbnail" src="${thumbnailUrl}"> <h4 class="supporter-name"> ${name}<br> ${relationship}<br> <span class="supporter-number">(${supporterNumber})</span> </h4> <span>${ticketingPoints}</span> </div> `; } document.getElementById("crmFriendsAndRelativesContent").innerHTML = ` <h1 class="app-title">My Friends & Family (${friendAndFamily.length} results)</h1> ${friendAndFamily.map(supporterTemplate).join("")}` ; <div id="crmFriendsAndRelativesContent"></div>Documentación adicional
Use el booleano en el objeto, tal como está:
function supporterTemplate(supporter) { // Destructure the fields off of the object as local variables const { isStrongRelationship, name, supporterNumber, thumbnailUrl, ticketingPoints, } = supporter; if (isStrongRelationship) { return '<SOMETHING_ELSE>'; // Return alternate HTML text } // Default HTML text return ` <div class="supporter"> <img class="supporter-thumbnail" src="${thumbnailUrl}"> <h4 class="supporter-name"> ${name} <br> <span class="supporter-relation">${isStrongRelationship}</span><br> <span class="supporter-number">(${supporterNumber})</span> </h4> <span>${ticketingPoints}</span> </div> `; }