# Reading XML with JavaScript

XML and JSON files can be loaded into the browser via an AJAX call. These are controlled by JavaScript. Next week we will be learning how to fetch these files from a server.

This page will focus on how we can read the contents of an XML file after it has been loaded via JavaScript.

XML can be treated as if it were HTML without any ids or classes. We will use a variety of properties and methods to access the contents of the XML elements and attributes and text nodes.

let chars = document.getElementsByTagName("character");
//This will give us a collection of all the <character> elements
let firstChar = document.getElementsByTagName("character")[0];
//This will give us the FIRST character element
let secondChar = firstChar.nextSibling;
//This will give us the SECOND character element

1
2
3
4
5
6

Here is a sample XML file which is stored on GitHub (see the link below). It has one root tag <data>. <movie> is a child of <data>. <characters> is a child of <movie>. <characters> has a series of childElementNodes, each called <character>.

<movie> has three attributes - id, title, and imdb-url. These could have been elements but I decided to make them attributes instead. It makes the XML a little smaller when you use attributes too.

We can move around inside the XML, fetching different elements by using:

let char = document.getElementsByTagName("character")[0];
let chars = char.childElementNodes;
//then loop through each of the chars
//To get the name TEXT inside the first character (The Dude)
chars[0].childElementNodes[0].firstChild.nodeValue;
//childElementNodes[0] - the <name> element inside the first <character>
//firstChild - the text node inside the <name> element
//nodeValue - the actual text from inside the <name>

1
2
3
4
5
6
7
8

NOTE: A very common error is to get the firstChild inside a node and be expecting that to be text. Instead it is a textNode object. The nodeValue property is the actual text.

We can use for loops to access each of the elements in order.

let chars = document.getElementsByTagName("character");
let numChars = chars.length;
for (let i = 0; i < numChars; i++) {
  //write out each of the actor names to the console.
  let actor = chars[i].getElementsByTagName("actor")[0];
  let actorText = actor.firstChild.nodeValue;
  console.log(actorText);
}

1
2
3
4
5
6
7
8

To fetch the attributes we use the standard getAttribute( ) method on any element node.

let movie = document.getElementsByTagName("movie")[0];
let movieId = movie.getAttribute("id");
let title = movie.getAttribute("title");
let url = movie.getAttribute("imdb-url");

1
2
3
4

The structure of the XML is designed to allow for future additions of more characters or more movies.

<?xml version="1.0" encoding="UTF-8"?>
<data>
  <movie id="tt0118715" title="The Big Lebowski" imdb-url="http://www.imdb.com/title/tt0118715/?ref_=ttfc_fc_tt">
    <characters>
      <character>
        <name>The Dude</name>
        <actor>Jeff Bridges</actor>
      </character>
      <character>
        <name>Walter Sobchak</name>
        <actor>Dan Goodman</actor>
      </character>
      <character>
        <name>Theodore Donald "Donnie" Kerabatsos</name>
        <actor>Steve Buscemi</actor>
      </character>
      <character>
        <name>Brandt</name>
        <actor>Phillip Seymour Hoffman</actor>
      </character>
      <character>
        <name>Jesus Quintana</name>
        <actor>John Turturro</actor>
      </character>
    </characters>
  </movie>
</data>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

GIST of XML file

# Look Ahead to Fetching XML Files

Back to Week 7 main page