Even though the if statement has been implemented, the page continues to show null objects

Question

Even though the if statement has been implemented, the page continues to show null objects

So, I have an if statement that filters out null objects and it's working fine. However, when I try to insert something in join() like join("li"), all null objects are displayed on the page as shown in the image. I just want to display objects that are not null, but when I tried another join("\n"), it didn't work as expected.
https://i.sstatic.net/12PuM.png

var vitalTest = document.getElementById("vitalComments").value
              = systemList[0].comments.join("");

//alert(vitalTest);

if (vitalTest == ""){
}else{
    document.getElementById("vitalComments").innerHTML = systemList[0].comments.join("<li>");
    var vitalTitleq = document.getElementById("vitalTitle").innerHTML
                    = systemList[0].systemName;
}

javascript jquery html css

Answer 1

Answer №1

Your if statement will only evaluate to true when all elements in the array are empty. If only some elements are not empty, the code will proceed to the else statement where empty values are still used.

Instead, consider using Array#filter or a polyfill to remove empty values and work with the new filtered array.

valuelist = systemList[0].comments.filter(comment=>comment);

The function comment=>comment is an arrow function that simply returns the item, which will then be tested as truthy or falsy. Since null, undefined, and empty strings evaluate to falsy, they will be filtered out. If you need to retain values like 0 or other falsy types, you will need a different function.

Demo

var list = [1,null,"text",null,44];

var filtered = list.filter(item=>item);

document.querySelector('ul').innerHTML = "<li>"+filtered.join('</li><li>')+"</li>";

<ul></ul>

Answer 2

Your if statement will only evaluate to true when all elements in the array are empty. If only some elements are not empty, the code will proceed to the else statement where empty values are still used.

Instead, consider using Array#filter or a polyfill to remove empty values and work with the new filtered array.

valuelist = systemList[0].comments.filter(comment=>comment);

The function comment=>comment is an arrow function that simply returns the item, which will then be tested as truthy or falsy. Since null, undefined, and empty strings evaluate to falsy, they will be filtered out. If you need to retain values like 0 or other falsy types, you will need a different function.

Demo

var list = [1,null,"text",null,44];

var filtered = list.filter(item=>item);

document.querySelector('ul').innerHTML = "<li>"+filtered.join('</li><li>')+"</li>";

<ul></ul>

Answer 3

Answer №2

Consider implementing the function provided below.

function displayComments(objID, comments) {
  if(Array.isArray(comments) && comments.length>0) {
  var filteredComments = comments.map(function(comment) {
      comment = comment.replace(/(\r\n|\n|\r|\s)/gm,"");
      if(comment.length>0) {
          return '<li>'+comment+'</li>';
      }
  });
  document.getElementById(objID).innerHTML = filteredComments.join("");
  }
}

function displayComments(comments) {
  if(Array.isArray(comments) && comments.length>0) {
  var filteredComments = comments.map(function(comment) {
      comment = comment.replace(/(\r\n|\n|\r|\s)/gm,"");
      if(comment.length>0) {
          return '<li>'+comment+'</li>';
      }
  });
  document.getElementById("vitalComments").innerHTML = filteredComments.join("");
  }
}
var comments = ["comment1"," ","","comment2\n","comment3"];

displayComments(comments);

<ul id="vitalComments"></ul>

Answer 4

Consider implementing the function provided below.

function displayComments(objID, comments) {
  if(Array.isArray(comments) && comments.length>0) {
  var filteredComments = comments.map(function(comment) {
      comment = comment.replace(/(\r\n|\n|\r|\s)/gm,"");
      if(comment.length>0) {
          return '<li>'+comment+'</li>';
      }
  });
  document.getElementById(objID).innerHTML = filteredComments.join("");
  }
}

function displayComments(comments) {
  if(Array.isArray(comments) && comments.length>0) {
  var filteredComments = comments.map(function(comment) {
      comment = comment.replace(/(\r\n|\n|\r|\s)/gm,"");
      if(comment.length>0) {
          return '<li>'+comment+'</li>';
      }
  });
  document.getElementById("vitalComments").innerHTML = filteredComments.join("");
  }
}
var comments = ["comment1"," ","","comment2\n","comment3"];

displayComments(comments);

<ul id="vitalComments"></ul>

Even though the if statement has been implemented, the page continues to show null objects

Answer №1

Answer №2

Similar questions

Can an entire object be bound to a model in an Angular controller function?

Implementing class toggling in AngularJS with ng-class

Identify data points on the line chart that fall outside the specified range with ng2-charts

Is there an issue with retrieving data from asp.cs through ajax?

Top Choice for Customizable Location Bar Dragging

Using PHP variables in JavaScript is not compatible

HTML5 for advanced positioning and layering of multiple canvases

What could be the reason for the absence of Mock Service Worker in a React project that has Typescript enabled?

Unable to maintain active status on Vuejs (PrimeVue) Sidebar component leads to malfunction

Stop Rails application from inadvertently responding to AJAX requests made by jQuery

What is the process to change the URL?

Apply the `text-overflow: ellipsis` property to truncate the text of two items within a flex column, which is contained within

What is the best way to show the interior color of a cube in three.js?

Width and left values don't play well with absolute positioning

Place a pair of divs in the center next to one another

Tracking the advancement of synchronous XMLHttpRequest requests

Expanding Lists in Bootstrap 3: A Step-by-Step Guide

When scrolling, the fixed menu bar at the top of the page is making the content below jump

What steps can be taken to ensure your bot successfully sends the second argument?

The shading of the box isn't displaying the correct color in Microsoft Edge and IE 11