jQuery HTML Conditional Statement

Question

What is a good way to ignore the tags/variables in a jQuery HTML method?

For instance, if there was no value for company, it would not be included in the HTML.

$('.modal-body').html(`
            <p><span style="font-weight:bold;">Name:</span> ${name}</p>
            <p><span style="font-weight:bold;">Company:</span> ${company}</p>
            <p><span style="font-weight:bold;">Job:</span> ${job}</p>
            <p><span style="font-weight:bold;">Title:</span> ${title}</p>
            <p><span style="font-weight:bold;">Phone:</span> ${phone}</p>
            <p><span style="font-weight:bold;">Email:</span> ${email}</p>
            <p><span style="font-weight:bold;">Event Loc:</span> ${addressResult}</p>
    `)

You can use IF-STATEMENT. if(${company}) $('.modal-body').html(``) — Emre
– Emre, Commented Nov 18, 2022 at 19:20
name is a global variable attached to the Window object. It's best practice to not use "name" as the name of a variable. developer.mozilla.org/en-US/docs/Web/API/Window/name — Josh
– Josh, Commented Nov 18, 2022 at 19:23
I assume you are looking to simply add a blank string for items in your node list that are not included in a particular object? For ex if your object has name, job, title, phone, email, then you want the missing entries to parse as an empty string for those particular missing variable values, correct? — dale landry
– dale landry, Commented Nov 18, 2022 at 20:38

human bean · Accepted Answer · 2022-11-18 19:54:19Z

While I frown on using ternary operators for major control flow, inline conditionals are very useful for situations like this.

const name = "John Smith",
  company = "1-800-Flowers",
  job = "Software Developer",
  title = undefined,
  phone = "(123)-456-7890",
  email = "[email protected]",
  addressResult = "123 Big Street, Town, MA"

$('.modal-body').html(`
            ${name ? `<p><span style="font-weight:bold;">Name:</span> ${name}</p>` : ""}
            ${company ? `<p><span style="font-weight:bold;">Company:</span> ${company}</p>` : ""}
            ${job ? `<p><span style="font-weight:bold;">Job:</span> ${job}</p>` : ""}
            ${title ? `<p><span style="font-weight:bold;">Title:</span> ${title}</p>` : ""}
            ${phone ? `<p><span style="font-weight:bold;">Phone:</span> ${phone}</p>` : ""}
            ${email ? `<p><span style="font-weight:bold;">Email:</span> ${email}</p>` : ""}
            ${addressResult ? `<p><span style="font-weight:bold;">Event Loc:</span> ${addressResult}</p>` : ""}
    `)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal-body"></div>

Amirhossein · Accepted Answer · 2022-11-18 19:59:19Z

1

You can use if statement like this:

let htmlContent = `<p><span style="font-weight:bold;">Job:</span> ${job}</p>`;
if(company) {
 htmlContent += `<p><span style="font-weight:bold;">Company:</span> ${company}</p>`;
}
$('.modal-body').html(htmlContent);

Or using ternary operators like this:

$('.modal-body').html(`
  ${job ? `<p><span style="font-weight:bold;">Job:</span> ${job}</p>` : ''}
  ${company ? `<p><span style="font-weight:bold;">Company:</span> ${company}</p>` : ''}
`);

And also please change ${name} because it's a global variable.

edited Nov 18, 2022 at 19:59

answered Nov 18, 2022 at 19:45

Amirhossein

2,0571 gold badge8 silver badges10 bronze badges

Comments

zer00ne · Accepted Answer · 2022-11-18 22:49:41Z

If your data is in the form of an array of objects (like a common JSON) and you need to display the data of a single object on a modal, you'll need to be able to select an object and extract the keys and values of said object (See Figure I)

Figure I

HTML

<!-- Simple modal with a unordered list. The <ul> will be the targeted element -->
<dialog>
  <ul></ul>
</dialog>

jQuery/JavaScript

// Data source as an array of objects (simular to JSON)
const data = [
  { "keyA": "value1", "keyB": "value2" }, 
  { "keyA": "value3", "keyB": "" }, 
  { "keyA": "value5", "keyB": "value6" }
]; 

// Select object by index number and extract data
let index = 1; // Second object

function displayData(data, index) {
  // Clear <ul>
  $("ul").html("");

  /* Convert object into an array of key/value pairs
  || keyValuePairs = [["keyA": "value3"], ["keyB", ""]];
  */
  const keyValuePairs = Object.entries(data[index]);
  
  // Add and format each key/value pair into <ul>
  keyValuePairs.forEach(([key, value]) => {
    // IF value exists...
    if (value) {
      $("ul").append(
        `<li>
           <b> // Same as <span style="font-weight: bold">
             ${key.charAt(0).toUpperCase()+key.slice(1)}: // Capitalize key
           </b> 
           &nbsp;${value}
        </li>`
      );
    }
  });
}

Result

<!-- 
Result is the data of the second object is displayed in <ul>
Note, keyB is excluded since it had no value
-->
<dialog>
  <ul>
    <li><b>KeyA:</b> value3</li>
  </ul>
</dialog>

The following example is a live version of the code above with a <select> that will allow you to change profiles.

Example

const profiles = [{
  "name": "Lucille Blay",
  "company": "Tambee",
  "title": "Technical Writer",
  "phone": "",
  "email": "[email protected]",
  "address": ""
}, {
  "name": "Baudoin Macauley",
  "company": "",
  "title": "",
  "phone": "877-812-9835",
  "email": "[email protected]",
  "address": "415 David Way"
}, {
  "name": "Aurora Garside",
  "company": "",
  "title": "Nuclear Power Engineer",
  "phone": "823-514-0402",
  "email": "[email protected]",
  "address": ""
}];

function displayProfile(profiles, index) {
  $("ul").html("");
  let data = Object.entries(profiles[index]);
  data.forEach(([key, value]) => {
    if (value) {
      $("ul").append(
        `<li>
         <b>
           ${key.charAt(0).toUpperCase()+key.slice(1)}:
         </b> 
         &nbsp;${value}
       </li>`);
    }
  });
}

/**
 * For Demo Purposes Only [START]
 */
$("select").on("input", function(e) {
  displayProfile(profiles, this.value);
  this.value = "Pick Index Number";
  $("dialog")[0].showModal();
});

$("button").on("click", function(e) {
  $("dialog")[0].close();
});
// [END]

:root {
  font: 300 2ch/1.2 "Segoe UI"
}

select {
  padding: 4px;
  font: inherit;
  text-align: center;
}

dialog {
  padding-top: 15px;
  padding-right: 25px;
}

dialog::backdrop {
  background: rgba(0, 0, 0, 0.4);
}

button {
  position: relative;
  top: -6px;
  left: 16px;
  float: right;
  height: 1.2rem;
  padding-bottom: 4px;
  line-height: 1.1;
  vertical-align: top;
  cursor: pointer;
}

ul {
  list-style: none;
  margin-left: -30px;
}

<!-- For Demo Purposes Only [START] -->
<select>
  <option selected>Pick Index Number</option>
  <option>0</option>
  <option>1</option>
  <option>2</option>
</select>
<!-- [END] -->

<dialog>
  <button>X</button>
  <ul></ul>
</dialog>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

dale landry · Accepted Answer · 2022-11-18 21:14:43Z

0

Not 100% sure where the customer info is coming from but if its an array of object, you can do something like the following.

const customers = [{
  name: 'John Doe',
  company: null,
  job: 'Front-End Developer',
  title: 'manager',
  phone: '555-555-5555',
  email: '[email protected]',
  addressResult: null
}]

function getInfo(k, v){
  return v !== null ? $('.modal-body').append(`<p><span style="font-weight:bold;">${k}:</span> ${v}</p>`) : null  
}

$.each(customers, function(index, value){
  $.each(value, function(i,v){    
   getInfo(i,v)
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal-body"></div>

answered Nov 18, 2022 at 21:14

dale landry

8,6602 gold badges18 silver badges28 bronze badges

Collectives™ on Stack Overflow

jQuery HTML Conditional Statement

4 Answers 4

Comments

Comments

Figure I

Example

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Figure I

Example

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related