在 ajax 显示值中显示空值

Question

我设置了一个 jQuery add/update/delete table，它使用 ajax 调用控制器。一些数据字段为空。

有没有办法编写此 JavaScript 代码以在返回的数据库值为 null 时显示空值？

这是对控制器的 ajax 调用，返回数据以完成 table。

let html = '' +
'<tr>'+
'<td class="fw-normal">'+data.id+'</td>'+
'<td class="fw-normal">'+data.employment_type+'</td>'+
'<td class="fw-normal">'+data.start_date+'</td>'+
'<td class="fw-normal">'+data.end_date+'</td>'+
'<td class="fw-normal">'+data.state+'</td>'+
'<td class="fw-normal">'+data.city+'</td>'+
'<td>'+
'<form action="'+data.delete_url+'" method="post">'+
'@csrf'+
'@method('DELETE')'+
'<div class="btn-group">'+
'<a href="'+data.edit_url+'" class="btn btn-info btn-sm">ویرایش</a>'+
'<button type="submit" class="btn btn-danger btn-sm job-destroy">حذف</button>'+
'</div>'+
'</form>'+
'</td>'+
'</tr>';
$('#showJobs').append(html);

注：我要null没有显示病房。

Answer 1

考虑以下示例代码。

function checkNull(string) {
  if (string === null) {
    string = ""
  }
  return string;
}

function addRow(data) {
  var row = $("<tr>");
  $.each(data, function(key, value) {
    if (key != "delete_url" || key != "edit_url") {
      $("<td>", {
        class: "fw-normal"
      }).html(checkNull(value)).appendTo(row);
    }
  });
  $("<td>").appendTo(row);
  $("<form>", {
    action: data.delete_url,
    method: "post"
  }).appendTo($("td:last", row));
  $("<div>", {
    class: "btn-group"
  }).appendTo($("form", row));
  $("<a>", {
    href: data.edit_url,
    class: "btn btn-info btn-sm"
  }).html("ویرایش").appendTo($(".btn-group", row));
  $("<button>", {
    type: "submit",
    class: "btn btn-danger btn-sm job-destroy"
  }).html("حذف").appendTo($(".btn-group", row));
  return row;
}

$('#showJobs').append(addRow(myData));

如果你添加一些小功能，你可以很方便地使用它们来保证null不会出现在你的HTML中。

在 ajax 显示值中显示空值

Display null in ajax show value

ajax

jquery-ui