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

Posted 2023-02-24

【中文标题】解析的 XML 数据无法使用 javascript 显示

【英文标题】：Parsed the XML data can't be shown using javascript

【发布时间】：2019-09-21 17:11:43

【问题描述】：

我正在尝试从来自在线 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

【参考方案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);

【参考方案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>

【讨论】：

嗨，阿米特，我只得到标题。无法获取描述和链接。请你帮忙。

一次我只能获得一个数据（标题、链接或描述）。不是一次全部。这也是我进入一个coloum。 @amit Senger

确定我正在更新我现有的答案

谢谢，我已经知道了。缺少一个支架。 @amit sengar

如果您的问题已解决，请标记答案，否则此问题将显示在未回答列表中

【参考方案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);

【讨论】：

同样的事情正在发生。如果我使用 doc.getElementsByTagName("channel"); - 然后我在它下面得到一个数据。我想要频道下的所有 。请调查一下。请参考gadgetsnow.com/rssfeeds/2147478039.cms。 @iamousseni