How do I access sub-child attributes in xml using javascript or jQuery?

Question

I'm new to code development and I'm trying to build a project to help me retain the skills I have learned. In doing so, I've hit a snag.

I am trying to pull a couple of attributes from nodes in an XML file but having trouble getting to what I need. I need to be able to pull the "number" from the node parent and the team "code" for each team listed in the node. The number of teams fluctuate between 2 and 6. Here's a sample of the XML.

My code is below. When it runs, it will get the bye week data but it won't load the teams. Several posts that I've read have had a similar issue but with some other technology or data structure in place that didn't apply to what I'm working with here (as far as I could tell). Any help would be appreciated.

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

Ashish Khandelwal · Accepted Answer · 2018-06-28 19:35:40Z

1

As per the attached xml structure it seems the team node can be multiple inside a week node, so you would have to iterate over the team nodes in order to extract the code.

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

answered Jun 28, 2018 at 19:35

Ashish Khandelwal

414 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

wcameron14 Over a year ago

I tried this but it got a "forEach is not a function for xmlHttpRequest.ByeWeeks". I tried making it an array like this:

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

This worked for the first week (week 4) but then it threw another error saying "team" is not defined for xmlHttpRequest.ByeWeeks. I'm assuming this is because it dropped the variable? So would I need to set a loop around the array somehow?

Ashish Khandelwal Over a year ago

@wcameron14 Can you please share the xml data for which it's failing and also share the modified code you are using. It would help me deducing the issue you are facing.

Ashish Khandelwal Over a year ago

@wcameron14 Can you also attach the modified code you are using if it's not much to ask ?

wcameron14 Over a year ago

It wouldn't fit here...see it in the answer below. Thanks for your help.

wade king · Accepted Answer · 2018-06-28 19:55:03Z

0

I'm not familiar with fantasy football but I'm assuming each week there is two teams that you want to retrieve. To access the child element attributes for week try:

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

team1Name should be holding "washington redskins" team2Name should be holding "florida panthers"

if you want the team code just replace "name" with "code"

if you're not sure how many teams there are the following code should work

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

edited Jun 28, 2018 at 19:55

answered Jun 28, 2018 at 19:39

wade king

3734 silver badges14 bronze badges

Comments

wcameron14 · Accepted Answer · 2018-06-29 15:42:17Z

@Ashish Khandelwal Here's the updated code with the array that I referenced earlier (I tried to post it as a comment on our conversation string but it was too long). 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>

Collectives™ on Stack Overflow

How do I access sub-child attributes in xml using javascript or jQuery?

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related