CODEWITHSUNDEEP
javascriptjson
user173420
user173420

Reputation: 376

json parse booleans into html

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 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>

Upvotes: 0

Views: 34

Answers (2)

Andy
Andy

Reputation: 63524

Create a new variable called relationship and depending on whether it isStrongRelationship is true or false set its value to an appropriate 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 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>

Additional documentation

Upvotes: 2

Mr. Polywhirl
Mr. Polywhirl

Reputation: 48630

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

Upvotes: 1

Related Questions