XML with Javascript

4

I've been looking at Google for a few days to read a simple XML file and display it on an HTML page using pure javascript, I do not want to use Jquery, just javascript.

I would like the XML data to be displayed in a common HTML table with TR and TD.

Is there a simple way to do this? Or some online example to test? Well I did not find it.

Thank you

    
asked by anonymous 25.04.2016 / 18:02

1 answer

3

You can make a request AJAX to read XML , once it is loaded, you can navigate through it similarly to what you navigate through DOM elements of your page, using getElementById %,% with%, etc.

Below is an example of how to read an XML with some books, as

// copiando os dados da tag 'book' para o objeto 'Book'
var Book = function (node) {
  var that = this;
  this.id = node.id;      
  [].forEach.call(node.childNodes, function (child, indice) {
    if (child.nodeType == 1) {
      that[child.nodeName] = child.textContent;
    }
  });
}

// criando um link para um XML. 
var xml = document.getElementById("xml").innerHTML;
var url = URL.createObjectURL(new Blob([xml], { type: "application/xml" }));
var tbody = document.querySelector("tbody");

// lendo um XML por AJAX.
var httpRequest = new XMLHttpRequest();
httpRequest.open("GET", url, true)
httpRequest.addEventListener("readystatechange", function () {
  if (httpRequest.readyState == 4) {
    var catalog = httpRequest.responseXML.getElementsByTagName("catalog")[0];
    var books = catalog.getElementsByTagName("book");
    [].forEach.call(books, function (node, indice) {
      var book = new Book(node);     
      var linha = document.createElement("tr");      
      for (var indice = 0; indice < 6; indice++) {
        var celula = document.createElement("td");
        linha.appendChild(celula);
      }
      
      linha.dataset.id = book.id;
      linha.children[0].textContent = book.author;
      linha.children[1].textContent = book.title;
      linha.children[2].textContent = book.genre;
      linha.children[3].textContent = book.price;
      linha.children[4].textContent = book.publish_date;
      linha.children[5].textContent = book.description;
      
      tbody.appendChild(linha);
    });
  }
});
httpRequest.send();
tr td {
  white-space: nowrap;
}

tr td:nthchild(5) {
  text-overflow: ellipsis;
}
<table>
  <thead>
    <tr>
      <th>Author</th>
      <th>Title</th>
      <th>Genre</th>
      <th>Prince</th>
      <th>Publish Date</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table> 
<template id="xml">
  <?xml version="1.0"?>
  <catalog>
    <book id="bk101">
      <author>Gambardella, Matthew</author>
      <title>XML Developer's Guide</title>
      <genre>Computer</genre>
      <price>44.95</price>
      <publish_date>2000-10-01</publish_date>
      <description>An in-depth look at creating applications 
        with XML.</description>
    </book>
    <book id="bk102">
      <author>Ralls, Kim</author>
      <title>Midnight Rain</title>
      <genre>Fantasy</genre>
      <price>5.95</price>
      <publish_date>2000-12-16</publish_date>
      <description>A former architect battles corporate zombies, 
        an evil sorceress, and her own childhood to become queen 
        of the world.</description>
    </book>
    <book id="bk103">
      <author>Corets, Eva</author>
      <title>Maeve Ascendant</title>
      <genre>Fantasy</genre>
      <price>5.95</price>
      <publish_date>2000-11-17</publish_date>
      <description>After the collapse of a nanotechnology 
        society in England, the young survivors lay the 
        foundation for a new society.</description>
    </book>
    <book id="bk104">
      <author>Corets, Eva</author>
      <title>Oberon's Legacy</title>
      <genre>Fantasy</genre>
      <price>5.95</price>
      <publish_date>2001-03-10</publish_date>
      <description>In post-apocalypse England, the mysterious 
        agent known only as Oberon helps to create a new life 
        for the inhabitants of London. Sequel to Maeve 
        Ascendant.</description>
    </book>
    <book id="bk105">
      <author>Corets, Eva</author>
      <title>The Sundered Grail</title>
      <genre>Fantasy</genre>
      <price>5.95</price>
      <publish_date>2001-09-10</publish_date>
      <description>The two daughters of Maeve, half-sisters, 
        battle one another for control of England. Sequel to 
        Oberon's Legacy.</description>
    </book>
    <book id="bk106">
      <author>Randall, Cynthia</author>
      <title>Lover Birds</title>
      <genre>Romance</genre>
      <price>4.95</price>
      <publish_date>2000-09-02</publish_date>
      <description>When Carla meets Paul at an ornithology 
        conference, tempers fly as feathers get ruffled.</description>
    </book>
    <book id="bk107">
      <author>Thurman, Paula</author>
      <title>Splish Splash</title>
      <genre>Romance</genre>
      <price>4.95</price>
      <publish_date>2000-11-02</publish_date>
      <description>A deep sea diver finds true love twenty 
        thousand leagues beneath the sea.</description>
    </book>
    <book id="bk108">
      <author>Knorr, Stefan</author>
      <title>Creepy Crawlies</title>
      <genre>Horror</genre>
      <price>4.95</price>
      <publish_date>2000-12-06</publish_date>
      <description>An anthology of horror stories about roaches,
        centipedes, scorpions  and other insects.</description>
    </book>
    <book id="bk109">
      <author>Kress, Peter</author>
      <title>Paradox Lost</title>
      <genre>Science Fiction</genre>
      <price>6.95</price>
      <publish_date>2000-11-02</publish_date>
      <description>After an inadvertant trip through a Heisenberg
        Uncertainty Device, James Salway discovers the problems 
        of being quantum.</description>
    </book>
    <book id="bk110">
      <author>O'Brien, Tim</author>
      <title>Microsoft .NET: The Programming Bible</title>
      <genre>Computer</genre>
      <price>36.95</price>
      <publish_date>2000-12-09</publish_date>
      <description>Microsoft's .NET initiative is explored in 
        detail in this deep programmer's reference.</description>
    </book>
    <book id="bk111">
      <author>O'Brien, Tim</author>
      <title>MSXML3: A Comprehensive Guide</title>
      <genre>Computer</genre>
      <price>36.95</price>
      <publish_date>2000-12-01</publish_date>
      <description>The Microsoft MSXML3 parser is covered in 
        detail, with attention to XML DOM interfaces, XSLT processing, 
        SAX and more.</description>
    </book>
    <book id="bk112">
      <author>Galos, Mike</author>
      <title>Visual Studio 7: A Comprehensive Guide</title>
      <genre>Computer</genre>
      <price>49.95</price>
      <publish_date>2001-04-16</publish_date>
      <description>Microsoft Visual Studio 7 is explored in depth,
        looking at how Visual Basic, Visual C++, C#, and ASP+ are 
        integrated into a comprehensive development 
        environment.</description>
    </book>
  </catalog>
</template>

In the above example I used a blob to create a link to an XML in memory, in an end system, this is not necessary, after all you should already have XML hosted on your Machine.

In any case, this approach can be useful if you need to read XML hosted on the User's machine, so the user will need to upload the file, so you can read the same.

// copiando os dados da tag 'book' para o objeto 'Book'
var Book = function (node) {
  var that = this;
  this.id = node.id;      
  [].forEach.call(node.childNodes, function (child, indice) {
    if (child.nodeType == 1) {
      that[child.nodeName] = child.textContent;
    }
  });
}

// criando um link para um XML. 
var tbody = document.querySelector("tbody");
var fileUpload = document.getElementById("fileUpload");

fileUpload.addEventListener("change", function (event) {
  var file = fileUpload.files[0];
  if (file.type.indexOf("xml") == -1)
    return;

  var url = URL.createObjectURL(file);
  var httpRequest = new XMLHttpRequest();
  httpRequest.open("GET", url, true)
  httpRequest.addEventListener("readystatechange", function () {
    if (httpRequest.readyState == 4) {
      var catalog = httpRequest.responseXML.getElementsByTagName("catalog")[0];
      var books = catalog.getElementsByTagName("book");
      [].forEach.call(books, function (node, indice) {
        var book = new Book(node);     
        var linha = document.createElement("tr");      
        for (var indice = 0; indice < 6; indice++) {
          var celula = document.createElement("td");
          linha.appendChild(celula);
        }

        linha.dataset.id = book.id;
        linha.children[0].textContent = book.author;
        linha.children[1].textContent = book.title;
        linha.children[2].textContent = book.genre;
        linha.children[3].textContent = book.price;
        linha.children[4].textContent = book.publish_date;
        linha.children[5].textContent = book.description;

        tbody.appendChild(linha);
      });
    }
  });
  httpRequest.send();
});
tr td {
  white-space: nowrap;
}

tr td:nthchild(5) {
  text-overflow: ellipsis;
}
<input id="fileUpload" type="file" />
<table>  
  <thead>
    <tr>
      <th>Author</th>
      <th>Title</th>
      <th>Genre</th>
      <th>Prince</th>
      <th>Publish Date</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table> 

A simpler way to get the same result is to use getElementsByTagName instead of combining FileReader with URL.createObjectURL(file) , but using XMLHttpRequest , you can use the same code base to read% local and remote% files. In any case, follow an example using XMLHttpRequest .

var file = fileUpload.files[0];
var leitor = new FileReader();
leitor.addEventListener("load", function() {
  var xmlDocument = new DOMParser().parseFromString(this.result, "text/xml");
  var catalog = xmlDocument.getElementsByTagName("catalog")[0];
  //restante do codigo aqui.
});
reader.readAsText(file );
    
25.04.2016 / 18:54