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

时间:2018-06-28 18:45:27

标签: javascript xml html5 parent-child

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

我正在尝试从XML文件的节点中提取几个属性,但无法获得所需的内容。我需要能够从节点父级中提取“数字”,并为节点中列出的每个团队提取团队“代码”。团队数量在2到6之间波动。Here's a sample of the 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>

3 个答案:

答案 0 :(得分:1)

根据所附的xml结构,似乎team节点在week节点内可以是多个节点,因此您必须迭代team节点才能提取{ {1}}。

code

答案 1 :(得分:0)

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

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

答案 2 :(得分:0)

@Ashish Khandelwal 这是我之前引用的带有数组的更新后的代码(我尝试将其发布为对我们的对话字符串的注释,但它太长了)。 The XML can be found here.

<!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>