AJAX - Catálogo de filmes (JSON)



Exemplo de AJAX convertendo dados do XML para o JSON

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

Código

    <script src="xmltojson.js"></script>
    <script>
        function getFilmes() {
            let xmlHttp = new XMLHttpRequest();
            xmlHttp.open('GET', '10-filmes.json')

            xmlHttp.onreadystatechange = () => {
                if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                    let jsonFilmes = JSON.parse(xmlHttp.responseText);

                    //console.log(jsonFilmes['filmes'])

                    for (let i in jsonFilmes['filmes']) {
                        let item = jsonFilmes['filmes'][i]

                        //console.log(item.generos[0])

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

                        let p2 = document.createElement('p')
                        p2.innerHTML = '<strong>Resumo:</strong> ' + item['resumo']

                        let genero = ''
                        for (let g in item.generos) {

                            //console.log(item.generos[g]['genero']);

                            if (genero) genero += ', ';

                            genero += item.generos[g]['genero'];
                        }


                        let p3 = document.createElement('p')
                        p3.innerHTML = '<strong>Gênero:</strong> ' + genero

                        //console.log(item.elenco);

                        let elenco = ''
                        for (let e in item.elenco) {

                            //console.log(item.elenco[e]['ator']);

                            if (elenco) elenco += ', '
                            elenco += item.elenco[e]['ator'];
                        }

                        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>