Currently have all data displaying perfectly except the boolean ones. I have some data that if true or false they should display different html/css

So, how can I have a class or html that shows the data if returns true?

I'm a bit stuck on parsing this data on this code. As I was on the right direction until this new request.

The Json loooks like this:

{ 
    "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 >
            <h4 >
            <span ></span>
              ${supporter.name}
              ${supporter.relationship} 
              <span >(${supporter.supporterNumber})</span>
            </h4>
            <span >${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 >
            <h4 >
            <span ></span>
              ${supporter.name}
              ${supporter.relationship} 
              <span >(${supporter.supporterNumber})</span>
            </h4>
            <span >${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 >
  <!-- content displaye from the javascript file -->

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

CodePudding user response：

You can use a ternary expression in the template literal.

      out  = `
            <div >
            <h4 >
            <span ></span>
              ${supporter.name}
              ${supporter.relationship} 
              <span >(${supporter.supporterNumber})</span>
            </h4>
            <span >${supporter.ticketingPoints}</span>
            <span >${supporter.isStrongRelationship ? "Strong" : "Weak"} relationship</span>
          </div>
            `;