当ajax响应为空时显示一条消息

我创建了一个带有ajax响应的简单表格。在这里我得到approvedOn和approvedBy为null。

但我不想将它显示为null。我想将其显示为pending。任何建议？当ajax响应为空时显示一条消息

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/

来源

2017-04-20 user7397787

你可以修改响应，以包含'null'作为值而不是字符串？如果是这样的话，你可以使用逻辑OR运算符'||'来合并值 –

在你的例子中'approvedOn'包含一个字符串，其中文字为'null'，但不是'null'值。你确定它是从服务器返回的吗？服务器应该返回''approvedOn“：null'（不包括'null'的引号），而不是''approvedOn”：“null”'。 –

现在你已经添加了对象的图像，你可以看到'null'是直接提供的，而不是你最初在代码中显示的问题的字符串。另外请注意，财产外壳是不同的 - 这是在JS中至关重要，因为它是区分大小写 –

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

(leaveList[i].approvedOn || '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 || 'pending') + '</td><td class="approvedBy">' + (leaveList[i].approvedBy || 'pending') + '</td><tr>'; 
 

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

<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>

来源

2017-04-20 06:49:31

简单使用内嵌条件是这样的：

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) 
 
    } 
 
}

<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>

来源

2017-04-20 06:49:24

只需添加一个检查，如：在您的for循环

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

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

;这应该可以让你实现它。

因此，您的新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) 
    } 
}

来源

2017-04-20 06:49:38 nyedidikeke

你可以改变你的功能这一点。

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); 
}

来源

2017-04-20 06:52:08

您可以如下创建一个函数，并调用它，当你绘制表..

试试下面的代码

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"){ 
 
    \t 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>

来源

2017-04-20 06:53:20 prog1011

你可以不喜欢它如下：

只是要在以下功能的一些变化：

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

来源

2017-04-20 06:54:39

检查是否为空，而使用三元操作循环。

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

Updated working fiddle

来源

2017-04-20 06:57:24

简单的条件可以在这种情况下帮助。这是更新的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) 
}}

来源

2017-04-20 06:57:32

当ajax响应为空时显示一条消息

回答

相关问题