json 将布尔值解析为 html

Question

我目前必须将一些 json 解析为 html，并且在出现新请求时一切看起来都很好。

我还必须解析一个值 true 或 false。我该怎么做？

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

我完全 new/clueless 将布尔值解析为 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

使用对象中的布尔值，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>
    `;
}

Answer 2

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

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>

其他文档

Destructuring assignment

json 将布尔值解析为 html

json parse booleans into html

javascript

json