AJAX - Catálogo de filmes (XML)




Esta funcionalidade usa a biblioteca xmltojson.js para converter os dados recebidos de JSON para XML que é entendido nativamente pelo AJAX.

Código

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