当ajax响应为空时显示消息

时间：2017-04-20 06:42:33

标签： jquery ajax

我创建了一个带有ajax响应的简单表。我得到approvedOn和approvedBy为null。
enter image description here
但我不希望将其显示为null。我想将其显示为pending。有任何建议吗？

 var leaveList = [{
  "appliedOn": "12-02-2017",
     "levType": "causual",
     "leaveOn": "12-02-2017",
     "duration": "5 days",
     "status": "approved",
     "approvedOn": "null",
     "approvedBy": "null"
 }, {
     "appliedOn": "12-02-2017",
     "levType": "privileged",
     "leaveOn": "14-03-2017",
     "duration": "8 days",
     "status": "pending",
     "approvedOn": "13-02-2017",
     "approvedBy": "HR"
 }];
 $(document).ready(function() {
     leaveTable()
 });

 function leaveTable() {
     for (var i = 0; i < leaveList.length; i++) {
         var tab = '<tr id="' + i + '"><td>' + (i + 1) + '</td><td class="appliedOn">' + leaveList[i].appliedOn + '</td><td class="levType" >' + leaveList[i].levType + '</td><td class="leaveOn" >' + leaveList[i].leaveOn + '</td><td class="duration">' + leaveList[i].duration + '</td><td class="status">' + leaveList[i].status + '</td><td class="approvedOn">' + leaveList[i].approvedOn + '</td><td class="approvedBy">' + leaveList[i].approvedBy + '</td><tr>';

         $('#levListTable').append(tab)
     }
 }

完整代码：https://jsfiddle.net/tytzuckz/4/

8 个答案:

答案 0 :(得分：1)

简单使用这样的内联条件：

＆＃13;
＆＃13; 
var leaveList = [{
     "appliedOn": "12-02-2017",
     "levType": "causual",
     "leaveOn": "12-02-2017",
     "duration": "5 days",
     "status": "approved",
     "approvedOn": "null",
     "approvedBy": "null"
 }, {
     "appliedOn": "12-02-2017",
     "levType": "privileged",
     "leaveOn": "14-03-2017",
     "duration": "8 days",
     "status": "pending",
     "approvedOn": "13-02-2017",
     "approvedBy": "HR"
 }];
 $(document).ready(function() {
     leaveTable()
 });

 function leaveTable() {
     for (var i = 0; i < leaveList.length; i++) {
     
         var tab = '<tr id="' + i + '"><td>' + (i + 1) + '</td><td class="appliedOn">' + leaveList[i].appliedOn + '</td><td class="levType" >' + leaveList[i].levType + '</td><td class="leaveOn" >' + leaveList[i].leaveOn + '</td><td class="duration">' + leaveList[i].duration + '</td><td class="status">' + leaveList[i].status + '</td><td class="approvedOn">' + (leaveList[i].approvedOn == 'null' || leaveList[i].approvedOn == '' ? 'Pending' : leaveList[i].approvedOn) + '</td><td class="approvedBy">' + (leaveList[i].approvedBy == 'null' || leaveList[i].approvedBy == '' ? 'Pending' : leaveList[i].approvedBy) + '</td><tr>';

         $('#levListTable').append(tab)
     }
 }
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-hover table-bordered">
    <thead class="colorBlue">
        <tr>
            <td>S.No</td>
            <td>Applied On</td>
            <td>Leave Type</td>
            <td>Leave On</td>
            <td>Duration</td>
            <td>Status</td>
            <td>Approved On</td>
            <td>Approved By</td>
        </tr>
    </thead>
    <tbody id="levListTable"></tbody>
</table>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

要从您收到的对象获得所需内容，可以使用逻辑OR运算符（||）根据需要合并null值。另请注意，您显示的代码与您在控制台中显示的对象的图像具有不同的属性名称。确保您使用的名称正确，因为JS区分大小写。试试这个：

(leaveList[i].approvedOn || 'pending')

＆＃13;
＆＃13; 
var leaveList = [{
  "appliedOn": "12-02-2017",
  "levType": "causual",
  "leaveOn": "12-02-2017",
  "duration": "5 days",
  "status": "approved",
  "approvedOn": null,
  "approvedBy": null
}, {
  "appliedOn": "12-02-2017",
  "levType": "privileged",
  "leaveOn": "14-03-2017",
  "duration": "8 days",
  "status": "pending",
  "approvedOn": "13-02-2017",
  "approvedBy": "HR"
}];

$(document).ready(function() {
  leaveTable()
});

function leaveTable() {
  for (var i = 0; i < leaveList.length; i++) {
    var tab = '<tr id="' + i + '"><td>' + (i + 1) + '</td><td class="appliedOn">' + leaveList[i].appliedOn + '</td><td class="levType" >' + leaveList[i].levType + '</td><td class="leaveOn" >' + leaveList[i].leaveOn + '</td><td class="duration">' + leaveList[i].duration + '</td><td class="status">' + leaveList[i].status + '</td><td class="approvedOn">' + (leaveList[i].approvedOn || 'pending') + '</td><td class="approvedBy">' + (leaveList[i].approvedBy || 'pending') + '</td><tr>';

    $('#levListTable').append(tab)
  }
}
＆＃13; 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<table class="table table-hover table-bordered">
  <thead class="colorBlue">
    <tr>
      <td>S.No</td>
      <td>Applied On</td>
      <td>Leave Type</td>
      <td>Leave On</td>
      <td>Duration</td>
      <td>Status</td>
      <td>Approved On</td>
      <td>Approved By</td>
    </tr>
  </thead>
  <tbody id="levListTable"></tbody>
</table>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：1)

只需添加支票，如下所示：

if (leaveList[i].approvedOn === 'null') {
    leaveList[i].approvedOn = 'pending';
}

if (leaveList[i].approvedBy === 'null') {
    leaveList[i].approvedBy = 'pending';
}
在你的for循环中

;这应该使你能够实现它。

因此，您的新leaveTable()功能是：

function leaveTable() {
  for (var i = 0; i < leaveList.length; i++) {
    if (leaveList[i].approvedOn === 'null') {
      leaveList[i].approvedOn = 'pending';
    }
    if (leaveList[i].approvedBy === 'null') {
      leaveList[i].approvedBy = 'pending';
    }
    var tab = '<tr id="' + i + '"><td>' + (i + 1) + '</td><td class="appliedOn">' + leaveList[i].appliedOn + '</td><td class="levType" >' + leaveList[i].levType + '</td><td class="leaveOn" >' + leaveList[i].leaveOn + '</td><td class="duration">' + leaveList[i].duration + '</td><td class="status">' + leaveList[i].status + '</td><td class="approvedOn">' + leaveList[i].approvedOn + '</td><td class="approvedBy">' + leaveList[i].approvedBy + '</td><tr>';
    $('#levListTable').append(tab)
  }
}

答案 3 :(得分：1)

您可以更改此功能。

function leaveTable() {
  if (leaveList.length==0){
    var tab = '<tr id="' + i + '"><td colspan="8" style="text-align: center">Pending..</td></tr>';
  } else {
    for (var i = 0; i < leaveList.length; i++) {
      var tab = '<tr id="' + i + '"><td>' + (i + 1) + '</td><td class="appliedOn">' + leaveList[i].appliedOn + '</td><td class="levType" >' + leaveList[i].levType + '</td><td class="leaveOn" >' + leaveList[i].leaveOn + '</td><td class="duration">' + leaveList[i].duration + '</td><td class="status">' + leaveList[i].status + '</td><td class="approvedOn">' + leaveList[i].approvedOn + '</td><td class="approvedBy">' + leaveList[i].approvedBy + '</td><tr>';
    }
  }
  $('#levListTable').append(tab);
}

答案 4 :(得分：1)

您可以创建如下的函数，并在渲染表时调用它。

尝试以下代码 

 var leaveList = [{
     "appliedOn": "12-02-2017",
     "levType": "causual",
     "leaveOn": "12-02-2017",
     "duration": "5 days",
     "status": "approved",
     "approvedOn": "null",
     "approvedBy": "null"
 }, {
     "appliedOn": "12-02-2017",
     "levType": "privileged",
     "leaveOn": "14-03-2017",
     "duration": "8 days",
     "status": "pending",
     "approvedOn": "13-02-2017",
     "approvedBy": "HR"
 }];
 $(document).ready(function() {
     leaveTable()
 });

 function leaveTable() {
     for (var i = 0; i < leaveList.length; i++) {
         var tab = '<tr id="' + i + '"><td>' + (i + 1) + '</td><td class="appliedOn">' + leaveList[i].appliedOn + '</td><td class="levType" >' + leaveList[i].levType + '</td><td class="leaveOn" >' + leaveList[i].leaveOn + '</td><td class="duration">' + leaveList[i].duration + '</td><td class="status">' + leaveList[i].status + '</td><td class="approvedOn">' + GetValue(leaveList[i].approvedOn) + '</td><td class="approvedBy">' + GetValue(leaveList[i].approvedBy) + '</td><tr>';

         $('#levListTable').append(tab)
     }
 }
 
 function GetValue(dbVal){
 
  if(dbVal.toString() == "null"){
  	return "pending";
  }
  else
  {
   return dbVal;
  }
 }
 
 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<table class="table table-hover table-bordered">
    <thead class="colorBlue">
        <tr>
            <td>S.No</td>
            <td>Applied On</td>
            <td>Leave Type</td>
            <td>Leave On</td>
            <td>Duration</td>
            <td>Status</td>
            <td>Approved On</td>
            <td>Approved By</td>
        </tr>
    </thead>
    <tbody id="levListTable"></tbody>
</table>

答案 5 :(得分：1)

你可以这样做：

只需在下面的功能中进行一些更改：

function leaveTable() {
     for (var i = 0; i < leaveList.length; i++) {

            var approvedOn = leaveList[i].approvedOn;
            if(leaveList[i].approvedOn == "null"){
            approvedOn = 'Pending';
        }

        var approvedBy = leaveList[i].approvedBy;
            if(leaveList[i].approvedBy == "null"){
            approvedBy = 'Pending';
        }
         var tab = '<tr id="' + i + '"><td>' + (i + 1) + '</td><td class="appliedOn">' + leaveList[i].appliedOn + '</td><td class="levType" >' + leaveList[i].levType + '</td><td class="leaveOn" >' + leaveList[i].leaveOn + '</td><td class="duration">' + leaveList[i].duration + '</td><td class="status">' + leaveList[i].status + '</td><td class="approvedOn">' + approvedOn + '</td><td class="approvedBy">' + approvedBy + '</td><tr>';

         $('#levListTable').append(tab)
     }
 }

点击此处JS Fiddle Code

答案 6 :(得分：1)

使用三元运算符循环时检查为空。

 var approvedOn = leaveList[i].approvedOn =='null'?'pending': leaveList[i].approvedOn;
 var approvedBy =  leaveList[i].approvedBy =='null'?'pending': leaveList[i].approvedBy;

Updated working fiddle

答案 7 :(得分：1)

在这种情况下，一个简单的条件可以帮助。这是更新后的leaveTable()函数。

function leaveTable() {
 for (var i = 0; i < leaveList.length; i++) {    
     var tab = '<tr id="' + i + '"><td>' + (i + 1) + '</td><td class="appliedOn">' + leaveList[i].appliedOn + '</td><td class="levType" >' + leaveList[i].levType + '</td><td class="leaveOn" >' + leaveList[i].leaveOn + '</td><td class="duration">' + leaveList[i].duration + '</td><td class="status">' + leaveList[i].status + '</td><td class="approvedOn">' + ((!leaveList[i].approvedOn || leaveList[i].approvedOn === "null") ? "Pending" : leaveList[i].approvedOn)  + '</td><td class="approvedBy">' + ((!leaveList[i].approvedBy || leaveList[i].approvedBy === "null") ? "Pending" : leaveList[i].approvedBy) + '</td><tr>';
     $('#levListTable').append(tab)
 }}
相关问题
最新问题