CODEWITHSUNDEEP
javascripthtmlxmlhtml-table
Bcavanaugh934
Bcavanaugh934

Reputation: 79

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

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>

Upvotes: 0

Views: 1376

Answers (1)

FyloZ
FyloZ

Reputation: 33

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); 
}

Upvotes: 1

Related Questions