2014-10-28 187 views
2

我是Bootstrap JS中的新成員。我有一張使用Bootsrap JS製作的表格,其數據來自Json文件。這是代碼-如何從json中刪除null對象

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-md-8"> 
      <div class="fixedscroll"> 
       <table id="user_table" class="table table-hover table-bordered table-striped responsive" style="margin-bottom: 0;" class="display"> 
        <thead> 
         <tr>         
          <th>UID</th> 
          <th>Name</th> 
          <th>Address</th> 
          <th>Tags</th> 
          <th>Edit tags</th>      
         </tr> 
        </thead> 
       </table> 
      </div> 
     </div> 
    </div> 

function showAll(){ 
    $.ajax({ 
     url: "showAll", 
     dataType:"json", 
     success:function(data){ 
      $('#user_table tr:gt(0)').remove(); 
      jQuery.each(data['Payload'], function(index, value) { 
      var row = '<tr>'        
        + '<td id="tduid">'+ value['uid']+ '</td>' 
        + '<td>'+ value['name']+ '</td>' 
        + '<td>'+ value['address']+ '</td>' 
        + '<td>'+ value['tag1']+ ',' + value['tag2']+ ',' + value['tag3']+'</td>' + '<td>'+ '<button class="deleteUser btn btn-danger" type="submit">Edit</button>' + '</td></tr>'; 

      $('#user_table').append(row); 
     }); 
    } 
}); 

現在這個Payload是我的json的名稱,它來自我稱之爲數據庫的servlet。

現在讓我們看看有3個標籤。但有些行有2個標籤。所以,當我把值JSON將JSON看起來喜歡 -

{"Payload":[{"uid":"u01","name":"Subho","address":"Dumdum","tag1":"aircel","tag2":"vodafone","tag3":"airtel"},{"uid":"u02","name":"Jeet","address":"Baruipur","tag1":"airtel","tag2":"","tag3":"aircel"},{"uid":"u03","name":"Diba","address":"Jadavpur","tag1":"vodafone","tag2":"aircel","tag3":"airtel"},{"uid":"u04","name":"Tommy","address":"Baguihati","tag1":"aircel","tag2":"vodafone","tag3":""},{"uid":"u05","name":"Jonty","address":"Rahara","tag1":"","tag2":"vodafone","tag3":"airtel"},{"uid":"u06","name":"Gourav","address":"Tripura","tag1":"aircel","tag2":"vodafone","tag3":"airtel"}]} 

現在你可以看到,對於UID = U02有2個標籤。輸出看起來像附圖。我如何刪除空白值或空值?請誰能幫我... enter image description here

+0

這段代碼很糟糕。它可以創建多個具有相同ID的單元格,將其更改爲類 – Beri 2014-10-28 07:24:20

+0

okk ..謝謝..我會這樣做的。 – Subho 2014-10-28 07:26:41

回答

2

我想,你說的有關在標籤欄額外, ...一個凌亂的解決方案是

$.ajax({ 
    url: "showAll", 
    dataType: "json", 
    success: function (data) { 
     $('#user_table tr:gt(0)').remove(); 
     jQuery.each(data['Payload'], function (index, value) { 
      var tags = $.map([value.tag1, value.tag2, value.tag3], function (value) { 
       return value || undefined; 
      }); 

      var row = '<tr>' + '<td id="tduid">' + value['uid'] + '</td>' + '<td>' + value['name'] + '</td>' + '<td>' + value['address'] + '</td>' + '<td>' + tags + '</td>' + '<td>' + '<button class="deleteUser btn btn-danger" type="submit">Edit</button>' + '</td></tr>'; 

      $('#user_table').append(row); 
     }); 
    } 
}); 

正如@Alnitak說

var tags = [value.tag1, value.tag2, value.tag3].filter(function (value) { 
    return value !== undefined; 
}); 
console.log(tags) 
+0

優秀!!!!非常感謝你@Arun P Jhony .. – Subho 2014-10-28 07:25:55

+1

我認爲你需要'.join(',')'標籤在一起。此外,「更多ES5」解決方案將使用'.filter'而不是'$ .map'。與來自其他語言的'map'函數相比,jQuery的'$ .map'的行爲有點,呃,奇怪。 – Alnitak 2014-10-28 08:17:20