1
<?xml version="1.0" encoding="ISO-8859-1"?>
<CATALOG>
    <CD>
        <TITLE>Empire Burlesque</TITLE>
        <ARTIST>Bob Dylan</ARTIST>
        <COUNTRY>USA</COUNTRY>
        <COMPANY>Columbia</COMPANY>
        <PRICE>10.90</PRICE>
        <YEAR>1985</YEAR>
    </CD>
    <CD>
        <TITLE>Hide your heart</TITLE>
        <ARTIST>Bonnie Tyler</ARTIST>
        <COUNTRY>UK</COUNTRY>
        <COMPANY>CBS Records</COMPANY>
        <PRICE>9.90</PRICE>
        <YEAR>1988</YEAR>
    </CD>
</CATALOG>

Este é código XML e de seguida coloco o meu HTML.

<html>  
    <head>
      <style>
        table,
        th,
        td {
          border: 1px solid black;
          border-collapse: collapse;
        }
        th,
        td {
          padding: 5px;
        }
      </style>
    </head>

    <body>

      <script>
        if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
          xmlhttp = new XMLHttpRequest();
        } else { // code for IE6, IE5
          xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.open("GET", "contactos.xml", false);
        xmlhttp.send();
        xmlDoc = xmlhttp.responseXML;

        document.write("<table><tr><th>Artist</th><th>Title</th></tr>");
        var x = xmlDoc.getElementsByTagName("CD");
        for (i = 0; i < x.length; i++) {
          document.write("<tr><td>");
          document.write(x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue);
          document.write("</td><td>");
          document.write(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
          document.write("</td></tr>");
        }
        document.write("</table>");
      </script>

    </body>
</html>

O problema é que ao abrir a página e ela vem em branco, como resolver isto?

2
  • Tenta fazer debug com alert("MensagemDeAlerta") no JavaScript para ver onde e se rebenta em algum lado.
    – Jorge B.
    Commented 16/01/2015 às 15:12
  • Ambos os códigos não funcionam no Chrome. Qual seria o problema? Commented 6/12/2017 às 23:10

1 Resposta 1

0

Amigo, substitui o seu código JavaScript puro por outro utilizando jQuery. Dessa forma fica um pouco mais atual. Note que é precisa chamar o jQuery.js para o código funcionar :)

<html>  
    <head>
      <style>
        table,
        th,
        td {
          border: 1px solid black;
          border-collapse: collapse;
        }
        th,
        td {
          padding: 5px;
        }
      </style>
    </head>

    <body>
        <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
      <script>

        $(document).ready(function(){

            $.ajax({
                url:       'contactos.xml',
                dataType: 'xml',

                // Caso tenha encontrato o arquivo, leio os dados do xml
                success: function(xml){

                    // Pegando todos os dados dentro da variavel array do arquivo xml
                    $(xml).find('CATALOG').each(function() {

                        var arrayCd = []; // Variavel para armazenar array de palavras e descricao

                        // Pegando todos os dados dentro da variavel option do arquivo xml
                        $(this).find('CD').each(function(){

                            //Mostrando na tela
                            content = "<table width='200'>";
                            content += "<tr><td>Title: </td><td>"+ $(this).find('TITLE').text() +"</td></tr>";
                            content += "<tr><td>Country: </td><td>"+ $(this).find('COUNTRY').text() +"</td></tr>";
                            content += "<tr><td>Company: </td><td>"+ $(this).find('COMPANY').text() +"</td></tr>";
                            content += "<tr><td>Price: </td><td>"+ $(this).find('PRICE').text() +"</td></tr>";
                            content += "<tr><td>Year: </td><td>"+ $(this).find('YEAR').text() +"</td></tr>";
                            content += "<tr><td>Artist: </td><td>"+ $(this).find('ARTIST').text() +"</td></tr>";
                            content += "</table><br />";


                            $("#content").append(content);
                            // Armazenando um array com indice word, description dentro do array arrayCd
                            // Voce pode utilizar esse array para enviar a outra pagina se quiser.
                            arrayCd.push(                         
                                    [ 
                                        { 'TITLE' : $(this).find('TITLE').text(),
                                            'COUNTRY' : $(this).find('COUNTRY').text(),
                                            'COMPANY' : $(this).find('COMPANY').text(),
                                            'PRICE' : $(this).find('PRICE').text(), 
                                            'YEAR' : $(this).find('YEAR').text(),
                                          'ARTIST' : $(this).find('ARTIST').text() }  
                                    ]
                                );
                        });            

                        // Exibindo dados armazenado no array
                        console.log( arrayCd );

                    }); 
                },

                // Se nao consegui ler o arquivo xml, exibo mensagem de erro no console
                error: function () {
                    console.log("Ocorreu um erro inesperado durante o processamento.");
                }
            });

        });


      </script>

    <div id="content"></div>

    </body>
</html>
3
  • 2
    Thomas, bem vindo ao SOpt. Nossa comunidade é um pouco diferente de fóruns como você viu no tour. Se possível, acrescente mais detalhes referente a sua resposta, e.g o que foi alterado e por que. Talvez esse link da nossa central seja útil. Commented 16/01/2015 às 15:49
  • eu fiz esse código em HTML mas o resultado foi uma pagina em branco. Nao sei se me consegue ajudar nisso
    – ChrisAdler
    Commented 19/01/2015 às 14:59
  • Estranho, aqui funcionou... verifique se o arquivo contactos.xml está na mesma pasta desse arquivo html e verifique qual é o retorno que aparece no console javascript Commented 19/01/2015 às 15:23

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 .