3

Eu estou nos últimos dias buscando no Google algo que sirva para ler um arquivo XML simples e exibir em uma pagina HTML usando javascript puro, não quero usar Jquery, apenas javascript.

Eu gostaria que os dados do XML sejam exibidos em uma tabela comum HTML com TR e TD.

Tem algum jeito simples de se fazer isso ? Ou algum exemplo online para testar ? Pois eu não achei.

Obrigado

9

1 Resposta 1

3

você pode fazer uma requisição AJAX para ler o XML, uma vez que o mesmo seja carregado, você pode navegar pelo mesmo de forma semelhante ao que você navega pelos elementos DOM da sua pagina, usando getElementById, getElementsByTagName, etc.

abaixo segue um exemplo de como ler um XML com alguns livros, uma vez que

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

No exemplo acima utilizei um blob para criar um link para um XML em memoria, em um sistema final, isto não é necessario, afinal você já deve ter o XML hospedado na sua Maquina.

Em todo caso, esta abordagem pode ser util, caso precise ler um XML hospedado na maquina do Usuario, para tal o usuario irá precisar fazer o upload do arquivo, então você poderá ler o mesmo.

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

Uma forma mais simples de obter o mesmo resultado, é utilizar um FileReader no lugar de combinar o URL.createObjectURL(file) com XMLHttpRequest, mas ao utilizar o XMLHttpRequest, você pode usar a mesma base de codigo, para ler arquivos *.xml locais e remotos. Em todo caso segue um exemplo usando o FileReader.

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .