Problem displaying XML data in HTML

Question

Problem displaying XML data in HTML

Navigation

#1 by (-1 votes)

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>

This is XML and then I put my 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>

The problem is that when you open the page and it comes in blank, how do I resolve this?

html xml

asked by anonymous 16.01.2015 / 15:52

1 answer

Upload image from server to ImageView Appear button according to the condition of the php parameter

score -1 · Answer 1

Friend, replace your pure JavaScript with another using jQuery. That way it gets a bit more current. Note that you need to call jQuery.js for the code to work:)

<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',//Casotenhaencontratooarquivo,leioosdadosdoxmlsuccess:function(xml){//Pegandotodososdadosdentrodavariavelarraydoarquivoxml$(xml).find('CATALOG').each(function(){vararrayCd=[];//Variavelparaarmazenararraydepalavrasedescricao//Pegandotodososdadosdentrodavariaveloptiondoarquivoxml$(this).find('CD').each(function(){//Mostrandonatelacontent="<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>