json parse booleans into html-CodePudding

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 >
        <img  src="${supporter.thumbnailUrl}">
        <h4 >
            ${supporter.name} <br>
            <span >${supporter.isStrongRelationship}</span><br>
             <span >(${supporter.supporterNumber})</span>
        </h4>
        <span>${supporter.ticketingPoints}</span>
      </div>
    `;
}
//GRAP THE ID HERE
document.getElementById("crmFriendsAndRelativesContent").innerHTML = `
    <h1 >My Friends & Family (${friendAndFamily.length} results)</h1>
    ${friendAndFamily.map(supporterTemplate).join("")}

  `;

<div id="crmFriendsAndRelativesContent">
</div>

CodePudding user response：

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 >
      <img  src="${thumbnailUrl}">
      <h4 >
        ${name} <br>
        <span >${isStrongRelationship}</span><br>
        <span >(${supporterNumber})</span>
      </h4>
      <span>${ticketingPoints}</span>
    </div>
    `;
}

CodePudding user response：

Before returning the template create a new variable called relationship and depending on whether it is true or false set its value to a 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 >
        <img  src="${thumbnailUrl}">
        <h4 >
          ${name}<br>
          ${relationship}<br>
          <span >(${supporterNumber})</span>
        </h4>
        <span>${ticketingPoints}</span>
      </div>
    `;
}

document.getElementById("crmFriendsAndRelativesContent").innerHTML = `
  <h1 >My Friends & Family (${friendAndFamily.length} results)</h1>
  ${friendAndFamily.map(supporterTemplate).join("")}`
;

<div id="crmFriendsAndRelativesContent"></div>

Additional documentation

Destructuring assignment