How can I parse data from XML file into HTML table using pure JavaScript?

Question

Most examples I've found haven't been helpful, as the data in this XML file is different than the examples I've seen, with fewer tags to help me loop through the data. How can I, using pure javascript, parse the data of these movies into a table on my main HTML page. I don't really have any current JavaScript to look at as I'm not even sure where to begin. But simply, I need to have the data in my XML file show up in an HTML table with pure JavaScript.

<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8">

    <title>The HTML5 Herald</title>
    <meta name="description" content="Sortable, Filterable Table">
    <link rel="stylesheet" href="styles.css">
    <script src="script.js"></script>
    </head>

    <body>
    <h3>Movies</h3>
    <table id="movielist">
        <thead>
            <tr>
                <th>Title</th>
                <th>Rating</th>
                <th>Provider</th>
                <th>Release Date</th>
            </tr>
        </thead>
        <tbody>
        <tr id="be2aed9e-e95c-410e-8e29-9d51ca0c5149">
            <td>title here</td>
            <td>rating here</td>
            <td>provider here</td>
            <td>release date here</td>
        </tr>
        </tbody>
    </table>

</body>
</html>

xml file:

<?xml version="1.0" encoding="utf-8" ?>
<videos>

  <title>Adaptation</title>
  <provider>Sony</provider>
  <released>2002-01-01</released>
  <rating>R</rating>
  <id>9c0b316c-bd1c-434a-892a-fd68ce35791c</id>

  <title>Affliction</title>
  <provider>Lionsgate</provider>
  <released>2000-04-14</released>
  <rating>UR</rating>
  <id>afe95eb3-0561-436e-86bd-98679bd2bee8</id>

  <title>All About My Mother</title>
  <provider>Sony</provider>
  <released>1999-01-01</released>
  <rating>R</rating>
  <id>439c943f-f6c7-4164-bf79-f45558e35a02</id>

  <title>American Psycho</title>
  <provider>Lionsgate</provider>
  <released>1998-12-30</released>
  <rating>R</rating>
  <id>3c81ed9d-8c21-4d0f-8664-d9232d729555</id>

  <title>Anatomy Of A Murder</title>
  <provider>Sony</provider>
  <released>1959-01-01</released>
  <rating>NR</rating>
  <id>ecd614d3-0327-414c-aba5-91b1372b48d2</id>

  <title>The Apartment</title>
  <provider>MGM</provider>
  <released>1960-01-01</released>
  <rating>NR</rating>
  <id>4fc8780a-f698-4c84-b23f-c731c6ed4ba8</id>

  <title>The Aviator</title>
  <provider>Miramax</provider>
  <released>2004-01-01</released>
  <rating>PG-13</rating>
  <id>f3603cf6-314f-4be3-a232-16d6a873bc03</id>

  <title>Awakenings</title>
  <provider>Sony</provider>
  <released>1990-01-01</released>
  <rating>PG-13</rating>
  <id>1cb742d0-b469-4fec-9beb-8f276c3d850e</id>

  <title>Bad Education</title>
  <provider>Sony</provider>
  <released>2004-01-01</released>
  <rating>NC-17</rating>
  <id>50881988-e992-4075-b608-4846370af38d</id>

  <title>A Band Called Death</title>
  <provider>Cinedigm</provider>
  <released>2013-06-23</released>
  <rating>NR</rating>
  <id>8de9223d-4ffc-405d-a177-6310d7820409</id>

</videos>

First, go through this XML DOM Tutorial, and then let us know if something isn't working. — castletheperson
– castletheperson, Commented May 12, 2016 at 20:35

FyloZ · Accepted Answer · 2016-05-12 20:38:19Z

You can use Ajax: (it's pur javascript):

function submitForm()
{ 
    var req = null; 
    if (window.XMLHttpRequest)
    {
        req = new XMLHttpRequest();
        if (req.overrideMimeType) 
        {
            req.overrideMimeType('text/xml');
        }
    } 
    else if (window.ActiveXObject) 
    {
        try {
            req = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e)
        {
            try {
                req = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {}
        }
            }


    req.onreadystatechange = function()
    { 
        if(req.readyState == 4)
        {
            if(req.status == 200)
            {
                // process a XML document here
                var doc = req.responseXML;
                var element = doc.getElementsByTagName('your element').item(0);
                var result = element.firstChild.data;

            }   
            else    
            {
                var result="Error: returned status code " + req.status + " " + req.statusText;
            }   
        } 
    }; 
    req.open("GET", "your-file.xml", true); 
    req.send(null); 
}

Collectives™ on Stack Overflow

How can I parse data from XML file into HTML table using pure JavaScript?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related