Question

我尝试运行代码，由于返回了成功的警报，我已经成功从URL中检索了json。但是，当我尝试检索数据时，json文件没有任何结果。有人可以帮我吗？

$.ajax({
    type: "GET",
    url: 'https://maps.googleapis.com/maps/api/directions/json?origin=Disneyland&destination=Universal+Studios+Hollywood&key=YOUR-API-KEY',
	dataType: "json",
    success: function(data){
    drawTable(data);
	alert("Success!");
    }
});

function drawTable(data) {
   for (var i = 0; i < data.length; i++) {
        drawRow(data[i]);
    }

}

function drawRow(rowData) {
   var row = $("<tr />")
    $("#personDataTable").append(row); 
    row.append($("<td>" + rowData.lat + "</td>"));
    row.append($("<td>" + rowData.lng + "</td>"));
	
	
}

table {
  border: 2px solid #666;   
    width: 100%;
}
th {
  background: #f8f8f8; 
  font-weight: bold;    
    padding: 2px;
}

<!DOCTYPE html>
<html>
  <head>
    <title>Json to HTML</title>
	  <meta charset="utf-8">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	    <link rel="stylesheet" href="css/table.css">
		  <script type="text/javascript" src="js/table2.js"></script>
  </head>
<body>
<table id="personDataTable">

    <tr>
        <th>Lat</th>
        <th>Lng</th>
		
        
    </tr>
</table>
</body>
</html>

我已进行编辑以添加要尝试检索的json数据，我一直收到成功连接到网页的消息，但没有检索到数据。

{
   "geocoded_waypoints" : [
  {
     "geocoder_status" : "OK",
     "place_id" : "ChIJa147K9HX3IAR-lwiGIQv9i4",
     "types" : [ "amusement_park", "establishment", "point_of_interest" ]
  },
  {
     "geocoder_status" : "OK",
     "place_id" : "ChIJzzgyJU--woARcZqceSdQ3dM",
     "types" : [ "amusement_park", "establishment", "point_of_interest" ]
  }
   ],
   "routes" : [
  {
     "bounds" : {
        "northeast" : {
           "lat" : 34.1373841,
           "lng" : -117.9220826
        },
        "southwest" : {
           "lat" : 33.8151707,
           "lng" : -118.3575585
        }
     },

Answer 1

正如其他用户评论的那样，您应该首先检查从api获取的数据是否正确。提醒您达到此目标的警报并不能保证您拥有所需的数据。另一方面，如果您有正确的数据，请考虑使用此解决方案

基于您尝试在表中绘制的数据结构，我认为可能是这样的：

[
    {
        "lat": 123,
        "lng": 456,
    }, {
        "lat": 789,
        "lng": -456,
    }, {
        "lat": 321,
        "lng": 956,
    }
]

当然会有更多数据，但我想这些是与您有关的数据。如果是这样，执行此操作的一种方法可以如下：

const dataset = [
    {
        lat: 123,
        lng: 456,
    }, {
        lat: 789,
        lng: -456,
    }, {
        lat: 321,
        lng: 956,
    }
];

function drawTable(dataset) {
    const rows = dataset.map(drawRow).join('');

    document.querySelector('#root').innerHTML = `
        <table>
            <thead>
                <tr>
                    <th>Latitude</th>
                    <th>Longitude</th>
                </tr>
            </thead>

            <tbody>
                ${rows}
            </tbody>
        </table>`;
}

function drawRow(data) {
    return `<tr>
        <td>${data.lat}</td>
        <td>${data.lng}</td>
    </tr>`;
}

// This call to the function in your example would be within the callback success in your ajax method
drawTable(dataset);

table {
    border: 2px solid #666;
    width: 100%;
}

th {
    background: #f8f8f8;
    font-weight: bold;
    padding: 2px;
}

<div id="root"></div>

Answer 2

问题在于对jQuery的不正确理解和使用。首先，您的ajax错误。我的意思是，您的文学作品的链接末尾有“ YOUR-API-KEY”，所以我不知道您如何以及为什么说成功检索了数据？但是，可以说是这样，并且可以用这样的方式来解析JSON和/或操作数据：

data = [{lat: latValue0, lng :lngValue0}, {lat: latValue1, lng : lngValue1}, ...]

我的意思是，这是根据您在代码中看到的：data[i].lat和data[i].lng

因此，有了我们这个大的IF，可以像这样完成绘制表行的实际过程：

function drawTable(data) {
  let table = $("#personDataTable");

  data.forEach(row => {
    table.append(`<tr><td>${row.lat}</td><td>${row.lng}</td></tr>`)
  });
}

就是这样。您不需要更多。如果您不熟悉ES6语法，则可以转到Babel's website，然后将ES6代码粘贴到左侧，然后查看编译到右侧的内容。顺便说一句，forEach()优于“经典” for循环。他们做的是相同的工作，但是您的语法更少，出错的空间也更少。

顺便说一句，您对jQuery的.append()的错误是混淆了在使用$选择的页面上附加字符串和附加另一个元素的麻烦。进一步了解here。

进一步阅读：

从URL成功检索Json，但表中未显示任何数据

2 个答案: