カスタマイズビューでnullを非表示にしたい

いつもお世話になっております。

カスタマイズビューに挑戦したのですが、nullを非表示にする方法がわからず行き詰まっています。

外出状況等をホワイトボードに記入する代わりで、在席状況を確認するためのアプリです。

現在のコードは下記の通りです。

関係ないところもあると思いますが、一応すべて貼り付けました。

HTML

<table id="table">
<thead>
<tr>
<th>レコード番号</th>
<th>氏名</th>
<th>行先等</th>
<th>外出時刻</th>
<th>帰所予定時刻</th>
  <th>車両</th>
</tr>
</thead>
<tbody id="t_body">
</tbody>
</table>

CSS

@charset "UTF-8";
table{
width: 100%;
border-collapse: collapse;
border-spacing: 0;
table-layout:fixed;
}

table th,table td{
padding: 10px 0;
text-align: center;
border-bottom: 1px solid gray;
}

table tr:nth-child(odd){
background-color: #eee
}

th{
background-color:white !important;
}

Javascript1(ダイアログから登録するものなので、ここは関係ないと思います。)

jQuery.noConflict();
(function($) {
"use strict";
kintone.events.on("app.record.index.show", function(event){

if (document.getElementById('my_index_butto') !== null) {

return;
}

async function GetName(name){

var body = {

"app" : 18,
"query" : 'name like "' + name + '"',
"fields" : ['name'],
"totalCount" :true

}

const res = await kintone.api('/k/v1/records','GET',body);
var re_name = res.records[0].name.value;
//console.log(re_company);
return re_name;
};

var myIndexButton = document.createElement('button');
myIndexButton.id = 'my_index_butto';
myIndexButton.innerText = '簡易登録';

myIndexButton.setAttribute('class','kintoneplugin-button-normal');

var myHeaderSpace = kintone.app.getHeaderMenuSpaceElement();
myHeaderSpace.appendChild(myIndexButton);

var title;

var createDialogContent = function(){

var dialog =

$('<dialog id="dialog">'+
'<div>'+
'<label class = "label">登録内容</label><br>'+
'<div class="kintoneplugin-select-outer">'+
'<div class="kintoneplugin-select">'+
'<select id ="status">'+
'<option value = "1">外出する</option>'+
'<option value = "2">在宅勤務</option>'+
'<option value = "3">休み</option>'+
'</select>'+
'</div>'+
'</div>'+
'</div>'+
'<input class="kintoneplugin-input-text" id="name" type="text" size="10" placeholder="氏名検索"></input>'+
'<input class="kintoneplugin-input-text" id="full_name" type="text" size="30" placeholder="氏名"></input><br>'+

'<label class = "label">外出時刻 </label>'+
'<label class = "label"> 帰所予定時刻</label><br>'+
'<input type = "time" name ="time" step="900" min="08:00" max="19:00" id = "out_time"></input>'+
'<input type = "time" name ="time" step="900" min="08:00" max="19:00"id = "comeback_time"></input><br>'+

'<div id = "text">'+
'<input class="kintoneplugin-input-text" id="destination" type="text" size="40" placeholder="行先等"></input><br>'+
'</div>'+

'<label class = "label">使用車両</label><br>'+
'<div class="kintoneplugin-select-outer">'+
'<div class="kintoneplugin-select">'+
'<select id ="drop_car">'+
'<option value = "ー">-</option>'+
'<option value = "ステラ">ステラ</option>'+
'<option value = "ミライース5752">ミライース5752</option>'+
'<option value = "ミライース">ミライース</option>'+
'<option value = "グレイス">グレイス</option>'+
'<option value = "ノート">ノート</option>'+
'</select><br>'+
'</div>'+
'</div>'+

'<div>'+
'<button id = "post" class="kintoneplugin-button-normal">登録する</button>'+
'<button id = "cancel" class="kintoneplugin-button-normal">キャンセル</button>'+
'</div>'+
'</dialog>');

$(myHeaderSpace).append(dialog);
};

createDialogContent();

$("#dialog").hide();

myIndexButton.onclick = function() {
$("#dialog").show();

var now = moment().format('hh:mm');
$("#out_time").val(now);

$("#status").blur(function(){

var t_status = $("#status").val();

switch(t_status){

case '2' :
title = moment().add('days',1).format('MM/DD') + " 在宅勤務";
$("#destination").val(title);
break;

case '3' :
title = moment().add('days',1).format('MM/DD') + " 休み";
$("#destination").val(title);
break;
}

});

$("#name").blur(async()=>{

var name = $('#name').val();
var full_name = await GetName(name);

$("#full_name").val(full_name);
});
}

$("#cancel").on("click", function(){
$("#dialog").hide();
});

$("#post").on("click",function() {

if($("#status").val() =='1'){
title = $('#destination').val();
}
var drop_car = $('#drop_car').val();
var out_time = $('#out_time').val();
var comeback_time = $('#comeback_time').val();
var name = $("#name").val();
var status = $("#status").val();
 var full_name = $("#full_name").val();

var body;

switch(status){
case '1': body = {

"app":320,

"record": {
"外出時刻": {
"value":out_time
},
"帰所予定時刻":{
"value":comeback_time
},
"氏名":{
"value":full_name
},
"行先等":{
"value":title
},
"車両":{
"value":drop_car
},
"status":{
"value":'外出中'
}
}
};
break;
case '2' : body = {

"app":320,

"record": {

"氏名":{
"value":full_name
},
"行先等":{
"value":title
},
"車両":{
"value":drop_car
},
"status":{
"value":'在宅勤務'
}
}
};
break;

case '3' : body = {

"app":320,

"record": {

"氏名":{
"value":full_name
},
"行先等":{
"value":title
},
"車両":{
"value":drop_car
},
"status":{
"value":'休み'
}
}
};
break;
}

kintone.api(kintone.api.url('/k/v1/record', true), 'POST', body, function(resp) {
console.log(resp);
location.reload(true);
}, function(error) {
console.log(error);
});

});
});
})(jQuery);

Javascript2

(function() {
'use strict';
kintone.events.on('app.record.index.show',async(event)=> {
if(event.viewId !== 5737617){
return;
}

var re_no,re_name,re_de,re_time,re_retime,re_car;

var body = {
"app":320,
"query" : 'status not in ("在席")',
"fields" : ['氏名','行先等','外出時刻','帰所予定時刻','車両','レコード番号'],
"totalCount":true
}
const resp = await kintone.api('/k/v1/records','GET',body);

if(resp.totalCount == '0'){

$("#t_body").html("全員在席中");
$("#t_body").css('font-size','30px');

}

for(var i = 0 ; i < resp.totalCount ; i++){

re_no = resp.records[i].レコード番号.value;
re_name = resp.records[i].氏名.value;
re_de = resp.records[i].行先等.value;
re_time = resp.records[i].外出時刻.value;
re_retime = resp.records[i].帰所予定時刻.value;
re_car = resp.records[i].車両.value;

var html = '<tr><td class="kintoneplugin-table-td-operation"><button class="kintoneplugin-button-normal remove c_button">'+re_no+'</button></td>'+
'<td class="c_name">'+re_name+'</td>'+
'<td class="c_destination">'+re_de+'</td>'+
'<td class="c_out_time">'+re_time+'</td>'+
'<td class ="c_comeback_time">'+re_retime+'</td>'+
'<td class="c_car">'+re_car+'</td></tr>';

$('#t_body').append(html);
}

//帰所登録
$(".c_button").on("click",function(){

var id = $(this).text();
console.log(id);


var g_body = {
"app":320,
"id":id
};

kintone.api(kintone.api.url('/k/v1/record', true), 'GET', g_body, function(g_res) {

var p_body = {
"app":320,
"id":id,
"record":{
"status":{
"value":'在席'
},
"帰所時刻":{
"value":moment().format("HH:MM")
}
}
};

kintone.api(kintone.api.url('/k/v1/record', true), 'PUT', p_body, function(p_res) {
console.log(p_res);

});

location.reload();
});
});
});
})();

動き自体はいい感じなのですが、[null]が見えなくなって欲しいなぁという希望があります。

ご教示いただければ幸いです。

よろしくお願いいたします。

吉本 茜様

お世話になっております.

Javascript2の27~32行目に「||」(OR演算子)を用いると良いと思います.

re_no = resp.records[i].レコード番号.value || '';
re_name = resp.records[i].氏名.value || '';
re_de = resp.records[i].行先等.value || '';
re_time = resp.records[i].外出時刻.value || '';
re_retime = resp.records[i].帰所予定時刻.value || '';
re_car = resp.records[i].車両.value || '';

 

江田 篤史様

いつもお世話になっております。

変更してみたところ見事に非表示にすることが出来ました。

各変数に「null」が入るような場合は代わりに「‘’」空白を入れるということですね!!

全く思い付きませんでしたが納得です・・!

ありがとうございます!!