Build a HTML Table with Javascript by Parsing a XML file

I made the mistakes so you don’t have to. Learn how to loop and parse through data from a XML file and put it into a HTML file. This works great when you are creating tables that need the latest information from a source you don’t own. In this case, I pulled and displayed data for a local softball league within Wordpress from an insecure XML file so that it updates after every round of matches.

My local softball league gave me the task of displaying up-to-date tables for the various divisions on our Wordpress site. It was to show the Team name, position of the team in the table respective to other teams, and the points they had each accumulated. We are a league under the British Softball Federation, who display results in their own tables such as this and who’s developer kindly provided us with a XML file (ty!) that was created using the documentation given by their data provider.

Having parsed a JSON file before, I had somewhere to begin.

And it also landed me with my first challenge. I’m Parsing XML and not JSON, so I encountered my first error.

A simple fix - I replaced response.json with response.text. Bingo, I’m on the move, I have data:

Now the next challenge — how do you actually parse through this data? I didn’t know but I knew the internet did. The process of finding an answer to your technical problem (when a beginner), whether it be parsing a XML file or otherwise, comes down to trial and error — you must find, trial and test several solutions to find code that you can understand and that you can make work. So the next part of my method came from W3 Schools and XML parsing, where I must manipulate the data and parse through it

Success! I have a document in the console!

Next task: show the individual teams in the console so I knew where my data lay. I used “getElementsByTagName(“Team”)” as “Team” was a tag given in the XML file.

I then applied this to a variable, “Teams” so I could iterate through them one by one, as well as creating 3 other variables for Team Name, Position and Points Accumulated. For this, you will need to create a for loop, incrementing by one each time to the length of “Teams”.

To pick up the values of variables, the dev console gives a really handy tool. Use the arrows next to the individual team to expand the data, find the data you are looking to pick up (in the case of team name: team > attributes > name > value) and hover over it with your mouse (not shown). This will give you the

This is the hard part, done.

The final part was to display these in a table. I had started with a HTML table boilerplate with three column headers,

and my aim was to add a table row for each Teams’s name, position and points. For this, I created a constant variable called “row”, where I would inject the variable of position, team and points into each table cell / table data (td).

Now the fun bit, let’s take the data from the dev console and place it into the HTML. You’ll see that I had started my table body by labelling it with id “results”. So that the Javascript knows where to start putting my new HTML rows, I created a constant variable called “results” and set it to a query selector. The final part was to inject my rows after the “results” table body ID, using the method “insertAdjacentHTML(“beforend”, HTML to be injected)

Et voilà, the full final code piece to get it to work:

Extra: Our Wordpress site uses a SSL certificate and I was fetching from an insecure site (see how the bsf.spawtz link is http only?!). To allow our secure site to pull data from Spawtz, I added a “s” on the end of http to make it secure. Hopefully this method works for you, too.