javascript - 如何在数据网格中显示由具有属性和值的对象组成的数组？

Question

我有一个由对象组成的数组。每个对象都有属性和值。属性是纬度、经度和名称。我需要在数据 GridView 中显示此数组。下面是我的数组，

谁能分享例子或任何建议

谢谢!

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>