通过 javascript 将 XMLHttpRequest 输出到 DIV

Question

我试图通过纯 JS 中的 API 调用列出当地交通系统的车站名称。我想遍历站名（其中 45 个）并将它们输出到 div id="stationDiv"

内的列表中

我得到的只是 div 中列出的 45 个空对象元素的列表。我似乎无法让循环正确输出。

XML 文件的示例

<root>
<uri>
<![CDATA[ http://api.bart.gov/api/stn.aspx?cmd=stns ]]>
</uri>
<stations>
<station>
<name>12th St. Oakland City Center</name>
<abbr>12TH</abbr>
<gtfs_latitude>37.803664</gtfs_latitude>
<gtfs_longitude>-122.271604</gtfs_longitude>
<address>1245 Broadway</address>
<city>Oakland</city>
<county>alameda</county>
<state>CA</state>
<zipcode>94612</zipcode>
</station>
//44 more station's below this

设置调用 API:

var URL ="http://api.bart.gov/api/stn.aspx?cmd=stns&key=MW9S-E7SL-26DU-VV8V"; //public key used
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
  } else {// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

xmlhttp.open("GET",URL,false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML; 

if(xmlhttp.status == 200) {
    console.log("connection successful");
} else {
    console.log("server returned a status code of " + oHttp.status);
}

循环不工作：

var x1=xmlDoc.getElementsByTagName("station");

function postNames(station) {
    var x = station.length;
    var n = 0;
    var element = document.getElementById('stationDiv');
    var html = '<ul>';
    while(n < x) {
      html += '<li>' + station[n] + '</li>';
      n++;
    }
    html += '</ul>';
    element.innerHTML = html;
}

postNames(x1);

提前谢谢你，我面前打开了多本书和 20 个标签页，但似乎无法正确输出。

请只使用纯 JS。

Answer 1

试试这个...

var x1=xmlDoc.getElementsByTagName("station");

var postNames = function(station) {
    var x = station.length;
    var n = 0;
    var element = document.getElementById('stationDiv');
    var html = '<ul>';
    while(n < x) {
      html += '<li>' + station[n].getElementsByTagName("name")[0].childNodes[0].nodeValue + '</li>';
      n++;
    }
    html += '</ul>';
    element.innerHTML = html;
}

postNames(x1);

通过 javascript 将 XMLHttpRequest 输出到 DIV

Output XMLHttpRequest to DIV via javascript

html

javascript

ajax

json

XML 文件的示例

设置调用 API:

循环不工作：