Esta funcionalidade usa a biblioteca xmltojson.js para converter os dados recebidos de JSON para XML que é entendido nativamente pelo AJAX.
<script src="xmltojson.js"></script>
<script>
function getFilmes() {
let xmlHttp = new XMLHttpRequest();
xmlHttp.open('GET', '11-filmes.xml')
xmlHttp.onreadystatechange = () => {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
let XMLFilmes = xmlHttp.responseText
//console.log(XMLFilmes)
let parser = new DOMParser()
domFilmes = parser.parseFromString(XMLFilmes, 'text/xml')
//console.log(domFilmes)
jsonFilmes = xmlToJson(domFilmes)
//console.log(jsonFilmes)
for (let i in jsonFilmes['filmes']['filme']) {
let item = jsonFilmes['filmes']['filme'][i]
let divRow = document.createElement('div')
divRow.className = 'row'
let divCol = document.createElement('div')
divCol.className = 'col'
let p1 = document.createElement('p')
p1.innerHTML = '<strong>Título:</strong> ' + item['titulo']['#text']
let p2 = document.createElement('p')
p2.innerHTML = '<strong>Resumo:</strong> ' + item['resumo']['#text']
let genero = ''
for (let g in item.genero) {
if (genero) genero += ', '
genero += item.genero[g]['#text']
}
let p3 = document.createElement('p')
p3.innerHTML = '<strong>Gênero:</strong> ' + genero
let elenco = ''
for (let e in item.elenco.ator) {
if (elenco) elenco += ', '
elenco += item.elenco.ator[e]['#text']
}
let p4 = document.createElement('p')
p4.innerHTML = '<strong>Elenco:</strong> ' + elenco
let p5 = document.createElement('p')
p5.innerHTML = '<strong>Data de lançamento:</strong> ' + item.dataLancamento['#text'] + ' (' + item.dataLancamento['@attributes']['pais'] + ')'
let hr = document.createElement('hr')
divRow.appendChild(divCol)
divCol.appendChild(p1)
divCol.appendChild(p2)
divCol.appendChild(p3)
divCol.appendChild(p4)
divCol.appendChild(p5)
divCol.appendChild(hr)
document.getElementById('lista').appendChild(divRow)
}
}
if (xmlHttp.readyState == 4 && xmlHttp.status == 404) {
//..
}
}
xmlHttp.send()
}
</script>
<div class="container" id="lista">
<div class="row mb-5">
<div class="col">
<button type="button" class="btn btn-success" onclick="getFilmes()">Listar filmes</button>
</div>
</div>
</div>
Dados ( 11-filmes.xml )
<?xml version="1.0" encoding="UTF-8" ?>
<filmes>
<filme id="1">
<titulo>Vingadores: Guerra Infinita</titulo>
<resumo>Homem de Ferro, Thor, Hulk e os Vingadores se unem para combater seu inimigo mais poderoso, o maligno Thanos. Em uma missão para coletar todas as seis pedras infinitas, Thanos planeja usá-las para infligir sua vontade maléfica sobre a realidade.</resumo>
<genero>Aventura</genero>
<genero>Ação</genero>
<elenco>
<ator>Robert Downey Jr</ator>
<ator>Chris Hemsworth</ator>
<ator>Mark Ruffalo</ator>
</elenco>
<dataLancamento pais='Brasil'>26 de abril de 2018</dataLancamento>
</filme>
<filme id="2">
<titulo>Onde está segunda</titulo>
<resumo>What Happened to Monday é um filme distópico de ficção científica e suspense, escrito por Max Botkin e Kerry Williamson, dirigido por Tommy Wirkola e estrelando Noomi Rapace, Glenn Close, e Willem Dafoe.</resumo>
<genero>Ficção científica</genero>
<genero>Suspense</genero>
<elenco>
<ator>Noomi Rapace</ator>
<ator>GLENN CLOSE</ator>
<ator>WILLEM DAFOE</ator>
</elenco>
<dataLancamento pais='Franca'>30 de agosto de 2017</dataLancamento>
</filme>
</filmes>