Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Hide the button if value of variable is missing

I am a novice in Javascript and I have a variable inside a for loop like below:

myTBody2 += `
<tr><td><button class="btn btn-sm btn-primary" onclick="myFetcher('${data._links.first.href}')">First</button></td>
  <td><button class="btn btn-sm btn-primary" onclick="myFetcher('${data._links.self.href}')">Current</button></td>
  <td><button class="btn btn-sm btn-primary" onclick="myFetcher('${data._links.next.href}')">Next</button> </td>
  <td><button class="btn btn-sm btn-primary" onclick="myFetcher('${data._links.last.href}')">Last </button></td>
</tr>`;

Now, say, if the value of ${data._links.next.href} is undefined or missing, how do I hide it?
Is there a javascript (vanilla JS) inline (one liner) function available to do that?
Any pseudo/pointers/solution will be greatly appreciated.

Tags:

3

Answers


  1. 0 
    myTBody2 += `<tr>`;
// check if href is not empty string:
if(data._links.first.href.length){
myTBody2 += `<td><button class="btn btn-sm btn-primary" onclick="myFetcher('${data._links.first.href}')">First</button></td>`
}

//...same for the others..

myTBody2 += `</tr>`;
    Login or Signup to reply.
  2. 0

    Certainly! You can use a ternary operator in JavaScript to conditionally render the button based on whether data._links.next.href is defined or not. Here’s how you can modify your code:

    myTBody2 += `
<tr>
  <td><button class="btn btn-sm btn-primary" onclick="myFetcher('${data._links.first.href}')">First</button></td>
  <td><button class="btn btn-sm btn-primary" onclick="myFetcher('${data._links.self.href}')">Current</button></td>
  ${data._links.next.href ? '<td><button class="btn btn-sm btn-primary" onclick="myFetcher('' + data._links.next.href + '')">Next</button></td>' : ''}
  <td><button class="btn btn-sm btn-primary" onclick="myFetcher('${data._links.last.href}')">Last </button></td>
</tr>`;

    In this snippet, ${data._links.next.href ? '<td><button class="btn btn-sm btn-primary" onclick="myFetcher('' + data._links.next.href + '')">Next</button></td>' : ''} is the ternary operator that checks if data._links.next.href is truthy. If it is, it renders the "Next" button; otherwise, it renders an empty string, effectively hiding the button.

    This is a one-liner solution that you can use inline within your template literal. I hope this helps you with your JavaScript journey! If you have any more questions or need further assistance, feel free to ask.

    Login or Signup to reply.
  3. 0 
    myTBody2 = `
<tr>
    <td>
        ${ data?._links?.first?.href && 
             '<button class="btn btn-sm btn-primary" onclick="myFetcher('${data._links.first.href}')">First</button>'}
    </td>

</tr>`;

    you can check for the value inline using ${expression && ‘expresssion is true’}

    the ? is an optional chain, prevents errors if any value in the chain is undefined.

    the last && in the expression is the return value

    if there is an else condition use the tenary

    `${expression ? 'if true' : 'if false'}`

    as others suggested but if there is not else condition tenary is not required.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search