CODEWITHSUNDEEP
javascriptjquery
user8718405
user8718405

Reputation:

how can i check that my value is null or not in dynamic generated html table

this is my code that i used to genrate html table using javascipt

now my problem is i want to put "--" insted of "null" value,so how can i check the value that null or not before code should displayed.

   var res1 = sessionStorage.getItem('user_list');
            var res = JSON.parse(res1);
            var createList = '';
            for (var i = 0; i < res.length; i++) {

                createList += "   <div class='table-data-banner'>    <div class='div-block switch'>\
                    <div data-ix='switch' class='switch-click-area'>\
                    <div class='switch-length'><div class='switch-bulb'>\
                    </div>\
                    </div>\
                    </div>\
    </div>\
                     <a href='#' class='table-data-link'  style='max-width:100%' >\
                          <input type='hidden' class='user_id'  value=" + res[i].user_id + "  \> \
    <div class='text-block-2 data first'>" + res[i].first_name + "</div><div class='text-block-2 first data'>" + res[i].last_name + "</div>\
    <div class='text-block-2 email no-mobile data'>" + res[i].email_id + "</div>\
    <div class='text-block-2 phone no-mobile data'>" + res[i].cell_phone + "</div>\
    <div class='text-block-2 access no-mobile data'>" + res[i].access_level + "</div>\
    <div class='text-block-2 access no-mobile data'>\
    <input type='button' class='w-button delete-data' value='delete' user_id=" + res[i].user_id + " postion=" + i + "> &nbsp; \
    <input type='button' class='w-button edit-data' value='edit' user_id=" + res[i].user_id + " postion=" + i + "></div>\
    \
    </a>   </div>"
            }

Upvotes: 2

Views: 197

Answers (2)

Gaizka Allende
Gaizka Allende

Reputation: 9427

I'd program it more functionally using the map function and template literals for better readibility

   var res1 = sessionStorage.getItem('user_list');
   const list = JSON.parse(res1)
     .map(item => { 
        return `<div class='table-data-banner'>
         <div class='div-block switch'>
         ... (template markup here)
           <input type='hidden' class='user_id'  value="${(item.user_id || '--')}"\> 
          ..(template markup here)
          </div>` 
      })

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337560

You can use the falsy nature of JS to coalesce null or undefined values to '--', like this:

'<input type="hidden" class="user_id" value="' + (res[i].user_id || '--') + '"  \>'

Also note that I'd suggest you use templating logic to build your HTML, as having that much UI code within the JS is not ideal.

Upvotes: 1

Related Questions