Question

我正在尝试从XML树中获取数据，该XML树来自在线RSS feed。虽然我将其放入循环中，但无法显示数据。

这是一个普通的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

不使用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);

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

您确定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);

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

3 个答案: