检查 json 上的 true 或 false 是否解析为 html

Question

目前所有数据都完美显示，除了布尔值。我有一些数据，如果 true 或 false 它们应该显示不同的 html/css

那么，如果 returns 为真，我怎样才能拥有显示数据的 class 或 html？

我在这段代码上解析这些数据有点卡住了。因为在这个新请求之前我的方向是正确的。

Json 看起来像这样：

{ 
    "name": "Serena Gosling",
    "supporterNumber": "0123456789",
    "isStrongRelationship": true,
    "ticketingPoints" :"2,500 Ticket Points",
    "thumbnailUrl": "https://i.pravatar.cc/100"
},

fetch("supporters.json")
  .then(response => response.json())
  .then(supporters => {
    localStorage.setItem("supporters", JSON.stringify(supporters));
  });

let container = document.querySelector(".content");
let loadMoreButton = document.querySelector(".content button");

let initialItems = 4;
let loadItems = 2;

function loadInitialItems() {
  let supporters = JSON.parse(localStorage.getItem("supporters"));
  let out = "";
  let counter = 0;
  for (let supporter of supporters) {
    if (counter < initialItems) {
      out += `
            <div class="supporter">
            <h4 class="supporter__name">
            <span class="supporter__thumbnail"></span>
              ${supporter.name}
              ${supporter.relationship} 
              <span class="supporter__number">(${supporter.supporterNumber})</span>
            </h4>
            <span class="supporter__points">${supporter.ticketingPoints}</span>
          </div>
            `;
    }
    counter++;
  }

  let div = document.createElement("div");
  container.insertBefore(div, loadMoreButton);
  div.innerHTML = out;
}

function loadData() {
  let supporters = JSON.parse(localStorage.getItem("supporters"));
  let currentDisplayedItems = document.querySelectorAll(".supporter").length;

  let out = "";
  let counter = 0;
  for (let supporter of supporters) {
    if (counter >= currentDisplayedItems && counter < loadItems + currentDisplayedItems) {
      out += `
            <div class="supporter">
            <h4 class="supporter__name">
            <span class="supporter__thumbnail"></span>
              ${supporter.name}
              ${supporter.relationship} 
              <span class="supporter__number">(${supporter.supporterNumber})</span>
            </h4>
            <span class="supporter__points">${supporter.ticketingPoints}</span>
          </div>
            `;
    }
    counter++;
  }

  let div = document.createElement("div");
  container.insertBefore(div, loadMoreButton);
  div.innerHTML = out;
  div.style.opacity = 0;

  if (document.querySelectorAll(".supporter").length == supporters.length) {
    loadMoreButton.style.display = "none";
  }

  fadeIn(div);
}

function fadeIn(div) {
  let opacity = 0;
  let interval = setInterval(function() {
    if (opacity <= 1) {
      opacity = opacity + 0.1;
      div.style.opacity = opacity;
    } else {
      clearInterval(interval);
    }
  }, 30);
}

loadInitialItems()

<div class="content">
  <!-- content displaye from the javascript file -->

  <button onclick="loadData()" class="load-more-button"><span>&#10093;</span> </button>
</div>

Answer 1

您可以在模板文字中使用三元表达式。

      out += `
            <div class="supporter">
            <h4 class="supporter__name">
            <span class="supporter__thumbnail"></span>
              ${supporter.name}
              ${supporter.relationship} 
              <span class="supporter__number">(${supporter.supporterNumber})</span>
            </h4>
            <span class="supporter__points">${supporter.ticketingPoints}</span>
            <span class="supporter__relationship">${supporter.isStrongRelationship ? "Strong" : "Weak"} relationship</span>
          </div>
            `;

检查 json 上的 true 或 false 是否解析为 html

Check if true or false on json parse into html

javascript

json