如何在數據網格中顯示由屬性和值對象組成的數組？

Question

我有一個由對象組成的數組。每個對象都有屬性和值。屬性是緯度，經度和名稱。我需要在數據網格視圖中顯示此數組。下面是我的陣列，

可以在任何一個份額的例子有什麼建議或

謝謝！

Answer 1

試試這個：

$(function(){ 
 
var data = [{ 
 
    "Latitude": 18.00, 
 
    "Longitude": 23.00, 
 
    "Name": "Pune" 
 
}, { 
 
    "Latitude": 14.00, 
 
    "Longitude": 24.00, 
 
    "Name": "Mumbai" 
 
}, { 
 
    "Latitude": 34.00, 
 
    "Longitude": -4.00, 
 
    "Name": "Delhi" 
 
},{ 
 
    "Latitude": 23.00, 
 
    "Longitude": 23.00, 
 
    "Name": "Jaipur" 
 
}]; 
 
$.each(data,function(index,value) { 
 

 
     row="<tr><td>"+value.Latitude+"</td><td>"+value.Longitude+"</td><td>"+value.Name+"</td><tr>"; 
 
    
 
    $("#grid").append(row); 
 
}); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="grid"> 
 
    <tr> 
 
    <th> 
 
     Latitude 
 
    </th> 
 
    <th> 
 
     Longitude 
 
    </th> 
 
    <th> 
 
     Place 
 
    </th> 
 
    </tr> 
 
</table>

隨着動態標題

但是，如果所有的對象具有相同的屬性

$(function() { 
 
    var data = [{ 
 
    "Latitude": 18.00, 
 
    "Longitude": 23.00, 
 
    "Name": "Pune" 
 
    }, { 
 
    "Latitude": 14.00, 
 
    "Longitude": 24.00, 
 
    "Name": "Mumbai" 
 
    }, { 
 
    "Latitude": 34.00, 
 
    "Longitude": -4.00, 
 
    "Name": "Delhi" 
 
    }, { 
 
    "Latitude": 23.00, 
 
    "Longitude": 23.00, 
 
    "Name": "Jaipur" 
 
    }]; 
 
    header = "<tr>" 
 
    $.each(data[0], function(prop, value) { 
 
    header += "<th>" + prop + "</th>"; 
 
    }); 
 
    header += "</tr>" 
 
    $("#grid").append(header); 
 

 
    $.each(data, function(index, obj) { 
 

 
    row = "<tr>"; 
 
    $.each(obj, function(prop, value) { 
 
     row += "<td>" + value + "</td>"; 
 
    }); 
 
    row += "</tr>"; 
 

 
    $("#grid").append(row); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="grid"> 
 
</table>

它只會工作

Answer 2

由於jquery是在你的標籤問題中指定的，很多jquery插件允許生成datagrid。 jQuery的官方網站是一個不錯的選擇開始挖網絡：

https://plugins.jquery.com/tag/datagrid/

Answer 3

你可以簡單的方式和非常大的文檔和社區可用於自定義數據表幫助使用dataTables jquery plugin。

var dataSet = [{ 
 
    "Latitude": 18.00, 
 
    "Longitude": 23.00, 
 
    "Name": "Pune" 
 
}, { 
 
    "Latitude": 14.00, 
 
    "Longitude": 24.00, 
 
    "Name": "Mumbai" 
 
}, { 
 
    "Latitude": 34.004654, 
 
    "Longitude": -4.005465, 
 
    "Name": "Delhi" 
 
},{ 
 
    "Latitude": 23.004564, 
 
    "Longitude": 23.007897, 
 
    "Name": "Jaipur" 
 
}]; 
 
$(document).ready(function() { 
 
    $('#example').DataTable({ 
 
     data: dataSet, 
 
     "columns": [ 
 
      { "data": "Name" ,"title":"Custom Name"}, 
 
      { "data": "Latitude" }, 
 
      { "data": "Longitude" }, 
 
      
 
     ] 
 
    }); 
 
});

@import "https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css";

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script> 
 
<table id="example" class="display" cellspacing="0" width="100%"> 
 
     <thead> 
 
      <tr> 
 
       <th>Name</th> 
 
       <th>Latitude</th> 
 
       <th>Longitude</th> 
 
       
 
      </tr> 
 
     </thead> 
 
     
 
    </table>