I'm currently having to parse some json, into html and all were looking good util a new request came up.
I have to parse also a value true or false. How do I do that?
Now, the requirement is that if is ´true´ I should display some specific html. if Value is == to false then I hide that specific html.
I'm completely new/clueless to parsing booleans into html so here I am asking for help.
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>Create a new variable called relationship and depending on whether it isStrongRelationship is true or false set its value to an appropriate string. Then use that variable in the template instead.
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>Additional documentation
Use the boolean in the object, as-is:
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>
`;
}