當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響應爲空時顯示一條消息

回答

相關問題