解析的 XML 数据无法使用 javascript 显示

Question

我正在尝试从来自在线 RSS 提要的 xml 树中获取数据。当我把它放在循环中时，数据无法显示。

这是一个普通的 HTML 文件。我正在尝试使用 javascript 将数据附加到表中。

<table id="demo"></table>

<script>
var x = new XMLHttpRequest();

x.open("GET", "https://cors-anywhere.herokuapp.com/https://www.gadgetsnow.com/rssfeeds/2147478039.cms", true);

x.onreadystatechange = function () {


  if (x.readyState == 4 && x.status == 200)
  {
    var doc = x.responseXML;
var table="<tr><th>Link</th><th>Description</th> <th>Title</th></tr>";
    var data = doc.getElementsByTagName("item");

    console.log(data);

for (i = 0; i < data.length; i++) { 

    table += "<tr><td>" +
    data[i].getElementsByTagName("link")[0].childNodes[0].nodeValue +
    "</td><td>" +
     data[i].getElementsByTagName("description")[0].childNodes[0].nodeValue +
    "</td><td>" +
     data[i].getElementsByTagName("title")[0].childNodes[0].nodeValue +
    "</td></tr>";
  }

document.getElementById("demo").innerHTML = table;

   }
};

x.send(null);

请看下面我得到的截图，

Here I am getting all the items which I need to show.

This is the error I am getting

Answer 1

您确定 URI 是正确的吗？试试这个。

var x = new XMLHttpRequest();

x.open("GET", "https://www.gadgetsnow.com/rssfeeds/2147478039.cms", true);

x.onreadystatechange = function () {


  if (this.readyState == 4 && this.status == 200)
  {
    var doc = this.responseXML;
var table="<tr><th>Link</th><th>Description</th> <th>Title</th></tr>";
    var data = doc.getElementsByTagName("channel");

    console.log(data);

for (i = 0; i < data.length; i++) { 

    table += "<tr><td>" +
    data[i].getElementsByTagName("link")[0].childNodes[0].nodeValue +
    "</td><td>" +
     data[i].getElementsByTagName("description")[0].childNodes[0].nodeValue +
    "</td><td>" +
     data[i].getElementsByTagName("title")[0].childNodes[0].nodeValue +
    "</td></tr>";
  }

document.getElementById("demo").innerHTML = table;

   }
};

x.send(null);

Answer 2

我发现数据作为列表描述中的第三个对象的问题是未定义的，所以这个错误，所以你可以改变你的脚本，比如先验证数据

<script>
var x = new XMLHttpRequest();

x.open("GET", "https://cors-anywhere.herokuapp.com/https://www.gadgetsnow.com/rssfeeds/2147478039.cms", true);

x.onreadystatechange = function () {


  if (x.readyState == 4 && x.status == 200)
  {
    var doc = x.responseXML;
var table="<tr><th>Link</th><th>Description</th> <th>Title</th></tr>";
    var data = doc.getElementsByTagName("item");

    console.log(data);

for (i = 0; i < data.length; i++) { 

    table += "<tr><td>" +
    data[i].getElementsByTagName("link")[0].childNodes[0].nodeValue +
    "</td><td>" +
(data[i].getElementsByTagName("description")[0] && data[i].getElementsByTagName("description")[0].childNodes[0]?
     data[i].getElementsByTagName("description")[0].childNodes[0].nodeValue
:'na')+
    "</td><td>" +
data[i].getElementsByTagName("title")[0] && data[i].getElementsByTagName("title")[0].childNodes[0]?
     data[i].getElementsByTagName("title")[0].childNodes[0].nodeValue
:'na' +
    "</td></tr>";
console.log("print for loop-",i)
  }

document.getElementById("demo").innerHTML = table;

   }
};

x.send(null);
</script>

更新

<script>
    var x = new XMLHttpRequest();

    x.open("GET", "https://cors-anywhere.herokuapp.com/https://www.gadgetsnow.com/rssfeeds/2147478039.cms", true);

    x.onreadystatechange = function () {


      if (x.readyState == 4 && x.status == 200) {
        var doc = x.responseXML;
        var table = "<thead><tr><th>Link</th><th>Description</th> <th>Title</th></tr></thead>";
        var data = doc.getElementsByTagName("item");

        console.log(data);
        table += "<tbody>"
        for (i = 0; i < data.length; i++) {

          table += "<tr>"
          table += "<td>" +
            (data[i].getElementsByTagName("link")[0].childNodes[0] && data[i].getElementsByTagName("link")[0]
              .childNodes[0].nodeValue ?
              data[i].getElementsByTagName("link")[0].childNodes[0].nodeValue : "na") +
            "</td>";

          table += " <td>" +
            (data[i].getElementsByTagName("description")[0] && data[i].getElementsByTagName("description")[0]
              .childNodes[0] ?
              data[i].getElementsByTagName("description")[0].childNodes[0].nodeValue :
              'na') +
            "</td>";

          table += "<td>" +
            (data[i].getElementsByTagName("title")[0] && data[i].getElementsByTagName("title")[0]
              .childNodes[0] ?
              data[i].getElementsByTagName("title")[0].childNodes[0].nodeValue :
              'na') + "</td>";
          table += "</tr>";

          console.log("print for loop-", i)
        }
        table += "</tbody>"
        document.getElementById("demo").innerHTML = table;

      }
    };

    x.send(null);
  </script>

Answer 3

除了这个，不要使用 x。

var x = new XMLHttpRequest();

x.open("GET", "https://cors-anywhere.herokuapp.com/https://www.gadgetsnow.com/rssfeeds/2147478039.cms", true);

x.onreadystatechange = function () {


  if (this.readyState == 4 && this.status == 200)
  {
    var doc = this.responseXML;
var table="<tr><th>Link</th><th>Description</th> <th>Title</th></tr>";
    var data = doc.getElementsByTagName("item");

    console.log(data);

for (i = 0; i < data.length; i++) { 

    table += "<tr><td>" +
    data[i].getElementsByTagName("link")[0].childNodes[0].nodeValue +
    "</td><td>" +
     data[i].getElementsByTagName("description")[0].childNodes[0].nodeValue +
    "</td><td>" +
     data[i].getElementsByTagName("title")[0].childNodes[0].nodeValue +
    "</td></tr>";
  }

document.getElementById("demo").innerHTML = table;

   }
};

x.send(null);