json 将布尔值解析为 html

Question

我目前不得不将一些 json 解析为 html，并且所有看起来都很好，但出现了一个新请求。

我还必须解析一个值真或假。 我怎么做？

现在，要求是如果是“真”，我应该显示一些特定的 html。 如果值 == 为 false，那么我隐藏该特定的 html。

我对将布尔值解析为 html 完全陌生/无知，所以我在这里寻求帮助。

 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>

Answer 1

创建一个名为relationship的新变量，并根据isStrongRelationship是 true 还是 false 将其值设置为适当的字符串。 然后在模板中使用该变量。

 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>

附加文件

• 解构赋值

Answer 2

按原样使用对象中的布尔值：

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>
    `;
}