如何使用javascript或jQuery访问xml中的子元素属性？

Question

我是代码开发的新手，我正在尝试建立一个项目来帮助我保留所学的技能。 这样做，我遇到了障碍。

我试图从XML文件中的节点中提取几个属性，但无法获得所需的信息。 我需要能够从节点父级中提取“数字”，并为节点中列出的每个团队提取团队“代码”。 团队数量在2到6之间波动。这是XML的示例。

我的代码如下。 当它运行时，它将获得再见周数据，但不会加载团队。 我读过的几篇文章也有类似的问题，但是有一些其他技术或数据结构不适用于我在这里使用的内容（据我所知）。 任何帮助，将不胜感激。

    <!DOCTYPE html>
<html>
    <head>
        <title>Bye Week</title>
        <script>
            var xmlhttp;

            window.onload = function()
            {
                 var url = "https://www.fantasyfootballnerd.com/service/byes/xml/test/";
                 xmlhttp = new XMLHttpRequest();
                 xmlhttp.open("GET", url, true);
                 xmlhttp.onreadystatechange = byeWeeks;
                 xmlhttp.send();
            }

            function byeWeeks()
            {
                if(xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                    var theXML = xmlhttp.responseXML.documentElement.getElementsByTagName('Week');
                    for(var i = 0; i < theXML.length; i++)
                    {
                        var week = theXML[i].getAttribute('number');
                        var team = theXML[i].getElementsByTagName('Team');


                        var out = "<b>" + team + "</b><br/>";
                        out += "Bye Week: " + week + "<br/>";


                        console.group('Output for ' + team);
                        console.log('Bye Week: ' + week);
                        console.log();
                        console.groupEnd();

                        document.getElementById('result').innerHTML += out
                    }
                }
            }
        </script>

    </head>
    <body>
        <div id="result"></div>
    </body>
</html>

Answer 1

按照附加的xml结构， team节点在一个week节点内似乎可以多个，因此您必须遍历team节点才能提取code 。

var week = theXML[i].getAttribute('number');
var teams = theXML[i].getElementsByTagName('Team');
teams.forEach(function(team) {
  console.log(team.getAttribute('code'));
});

Answer 2

我对梦幻足球并不熟悉，但是我假设每个星期都有两支球队要找。 要访问一周的子元素属性，请尝试：

var team1Name = theXML[i].childNodes[0].getAttribute("name");
var team2Name = theXML[i].childNodes[1].getAttribute("name");

team1Name应该持有“华盛顿红皮” team2Name应该持有“佛罗里达黑豹”

如果您想使用团队代码，只需将“名称”替换为“代码”

如果您不确定有多少支队伍，那么以下代码应该起作用

var teams = [];
for each (team in theXML[i].childNodes){
    teams.push(team.getAttribute("name"));
} 
//at this point teams will hold an array of team names playing that week

Answer 3

@Ashish Khandelwal这是我之前引用的数组的更新代码（我尝试将其发布为对我们的对话字符串的注释，但它太长了）。 XML可以在这里找到。

<!DOCTYPE html>
<html>
    <head>
            <title>Bye Week</title>
        <script>
            var xmlhttp;

            window.onload = function()
            {
                 var url = "https://www.fantasyfootballnerd.com/service/byes/xml/test/";
                 xmlhttp = new XMLHttpRequest();
                 xmlhttp.open("GET", url, true);
                 xmlhttp.onreadystatechange = byeWeeks;
                 xmlhttp.send();
            }

            function byeWeeks()
            {
                if(xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                    var theXML = xmlhttp.responseXML.documentElement.getElementsByTagName('Week');
                    for(var i = 0; i < theXML.length; i++)
                    {
                        var week = theXML[i].getAttribute('number');
                        var teams = theXML[i].getElementsByTagName('Team');
                        Array.from(teams).forEach(function(team) {
                            console.log(team.getAttribute('code'));
                            });

                        console.group('Output for ' + team);
                        console.log('Bye Week: ' + week);
                        console.log(theXML[i]);
                        console.log(teams.push(team.getAttribute("code")));
                        console.groupEnd();

                        document.getElementById('result').innerHTML += out
                    }
                }
            }
        </script>

    </head>
    <body>
        <div id="result"></div>
    </body>
</html>

如何使用javascript或jQuery访问xml中的子元素属性？

问题描述

3 个解决方案

解决方案1
1 2018-06-28 19:35:40

解决方案2
0 2018-06-28 19:39:32

解决方案3
0 2018-06-29 15:42:17

如何使用javascript或jQuery访问xml中的子元素属性？

问题描述

3 个解决方案

解决方案1 1 2018-06-28 19:35:40

解决方案2 0 2018-06-28 19:39:32

解决方案3 0 2018-06-29 15:42:17

解决方案1
1 2018-06-28 19:35:40

解决方案2
0 2018-06-28 19:39:32

解决方案3
0 2018-06-29 15:42:17