純粋なJavaScriptを使用してXMLファイルからHTMLテーブルにデータを解析するにはどうすればよいですか？

私が見たほとんどの例は、このXMLファイルのデータが私が見てきた例とは異なり、データをループするのに役立つタグが少なくなっているので、役に立たなかった。純粋なjavascriptを使用して、どのようにしてこれらのムービーのデータをメインのHTMLページの表に解析できますか？私はどこから始めるべきかわからないので、私は実際に見るJavaScriptを持っていません。しかし、単純に、XMLファイルのデータを純粋なJavaScriptを使ってHTMLテーブルに表示する必要があります。純粋なJavaScriptを使用してXMLファイルからHTMLテーブルにデータを解析するにはどうすればよいですか？

<!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ファイル：

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

出典

2016-05-12 Bcavanaugh934

まず、この[XML DOMチュートリアル]を経由します（http：// WWW .w3schools.com/xml/dom_intro.asp）、何かが動作していない場合はお知らせください。 – 4castle

あなたはアヤックスを使用することができます（それのPURジャバスクリプト）：

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

出典

2016-05-12 20:38:19 FyloZ

純粋なJavaScriptを使用してXMLファイルからHTMLテーブルにデータを解析するにはどうすればよいですか？

答えて

関連する問題