Escrever conteúdo...

  • Autor Autor xmatias
  • Data de início Data de início
Tradução em andamento: em alguns minutos este tópico estará em português. Por enquanto, o conteúdo está no original em espanhol. Ver original
X

xmatias

Gamma
Verificación en dos pasos activada
Hola, estoy tratando de procesar unos datos XML por js e imprimirlos, sin embargo no se como escribirlos en un div en específico sin que se me borre todo el contenido de la página ya que estoy usando la función document.write. Mi archivo es este:

HTML:
<html>
<body>

<script>


function escribir() {
xmlhttp=new XMLHttpRequest();
xmlhttp.open("GET","http://localhost/parse xml/ejemplo.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
	var x=xmlDoc.getElementsByTagName("ANIMES");
		document.write("<table border='1'>");
	for (i=0;i<x.length;i++)
	{
		document.write("<tr><td>");
		document.write(x[i].getElementsByTagName("TITULO")[0].childNodes[0].nodeValue);
		document.write("</td><td>");
		document.write(x[i].getElementsByTagName("ID")[0].childNodes[0].nodeValue);
		document.write("</td></tr>");
	}
		document.write("</table>");
}
</script>
<script src="./jquery-1.10.2.js"></script>
<div id="contenido"></div>
<script type="text/javascript" >

	 $(document).ready(function(){
        escribir();
    });
</script>
</body>
</html>

Espero me ayuden, saludos.
 
Foi útil? Participe da conversa

Com sua conta grátis você pode responder, mandar mensagem privada ao autor e comprar com Saldo retido: o pagamento é liberado quando você recebe o combinado.

Leva 30 segundos · você volta a este tópico ao terminar
Utiliza mejor append en vez de write. Y escribes para el id del div que quieres.

Ejemplo, si div con id="info"

pones ('#info').append()

Y pones adentro lo que quieres que escribe dentro de ese div :encouragement:
 
Podrías modificarme el código por favor, gracias.
 
Hola xmatias,

Te dejo una modificación de tu código. Lo he probado y funciona.

Inserir CODE, HTML ou PHP:
function escribir() {
	var xmlhttp = new XMLHttpRequest();
	    xmlhttp.open('GET','localhost/parse xml/ejemplo.xml',false);
	    xmlhttp.send();
	var xmlDoc = xmlhttp.responseXML;
	var x = xmlDoc.getElementsByTagName('ANIMES');
	var tabla = document.createElement('table');
	    tabla.setAttribute('border', '1');
	for (i=0 ; i < x.length ; i++) {
		var elementoXML = x[i];
		var fila = document.createElement('tr');
		for (j = 0 ; j < elementoXML.children.length ; j++) {
			var celda = document.createElement('td');
			var texto = document.createTextNode(elementoXML.children[j].textContent);
			celda.appendChild(texto);
			fila.appendChild(celda);
		}
		tabla.appendChild(fila);
	}
	$('#contenido').append(tabla);
}

Espero que te sirva.

Un saludo.

😉
 
Última edição:
Gracias nullPointer, pero como puedo almacenar cada dato en una variable y despúes imprimirla? porque tu código me imprime todos los datos del XML y no los campos que yo quiero...

Saludos.
 
Hola xmatias,

Puedes añadir un Array con los valores que quieres imprimir y luego comprobar el nodeName de cada elemento que recorremos para ver si se encuentra en dicho Array. Si es que sí, lo imprime.

Mira, te indico el ejemplo que me he creado:

Me he creado el siguiente XML de prueba:
Inserir CODE, HTML ou PHP:
<?xml version="1.0" encoding="UTF-8"?>
<PELICULAS>
	<ANIMES>
		<ANIME>
			<ID>001</ID>
			<TITULO>Akira</TITULO>
			<DIRECTOR>Katsuhiro Otomo</DIRECTOR>
			<FECHA>1988</FECHA>
		</ANIME>
		<ANIME>
			<ID>002</ID>
			<TITULO>Ghost in the Shell</TITULO>
			<DIRECTOR>Mamoru Oshii</DIRECTOR>
			<FECHA>1995</FECHA>		
		</ANIME>
		<ANIME>
			<ID>003</ID>
			<TITULO>Mi vecino Totoro</TITULO>
			<DIRECTOR>Hayao Miyazaki</DIRECTOR>
			<FECHA>1988</FECHA>	
		</ANIME>
		<ANIME>
			<ID>004</ID>
			<TITULO>Death Note</TITULO>
			<DIRECTOR>Shusuke Kaneko</DIRECTOR>
			<FECHA>2006</FECHA>		
		</ANIME>
	</ANIMES>
</PELICULAS>

Luego, en javascript me creo un Array con el nombre de los nodos que quiero imprimir. Cuando recorramos el XML, comprobaremos si el nodeName coincide con alguno de los elementos del Array que hemos creado. Si es que sí, lo añade a la tabla.

Inserir CODE, HTML ou PHP:
// Datos que queremos imprimir en la tabla
[B][COLOR="#FF0000"]var infoNecesaria = ['ID', 'TITULO'];[/COLOR][/B]

//Función que lee el XML y crea la tabla con la información deseada.
function escribir() {
	var xmlhttp = new XMLHttpRequest();
		xmlhttp.open('GET','http://localhost/parsearXML/ejemplo.xml',false);
		xmlhttp.send();
	var xmlDoc = xmlhttp.responseXML;
	var x = xmlDoc.getElementsByTagName('ANIME');
	var tabla = document.createElement('table');
		tabla.setAttribute('border', '1');
	for (i=0 ; i < x.length ; i++) {
		var elementoXML = x[i];
		var fila = document.createElement('tr');
		debugger;
		for (j = 0 ; j < elementoXML.children.length ; j++) {
			[B][COLOR="#FF0000"]if (infoNecesaria.indexOf(elementoXML.children[j].nodeName) != -1) {[/COLOR][/B]
				var celda = document.createElement('td');
				var texto = document.createTextNode(elementoXML.children[j].textContent);
				celda.appendChild(texto);
				fila.appendChild(celda);
			[B][COLOR="#FF0000"]}[/COLOR][/B]
		}
		tabla.appendChild(fila);
	}
	$('#contenido').append(tabla);
}

Como sólo quiero imprimir el ID y el Título, obtengo algo como esto:

parseXML.webp

Pruébalo y si tienes cualquier problema, no dudes en preguntar.

Un saludo.

NOTA: Si copias mi función directamente, asegúrate de cambiar las siguientes líneas por las tuyas:
Inserir CODE, HTML ou PHP:
xmlhttp.open('GET','http://localhost/parsearXML/ejemplo.xml',false);
y
Inserir CODE, HTML ou PHP:
var x = xmlDoc.getElementsByTagName('ANIME');
😉

Edito!!!!
Hola de nuevo xmatias,
Como veo que estás usando JQuery, te paso una modificación de la función en la que utilizamos la librería tanto para la petición Ajax, como para recorrer el XML. De esta manera, sólo tendrías que modificar el Array que te he comentado antes, para mostrar los campos que quieras en el orden que quieras.

Te pego el código adaptado al tuyo para que sólo tengas que hacer un copy/paste.
Inserir CODE, HTML ou PHP:
// Datos que queremos imprimir en la tabla
var infoNecesaria = ['TITULO', 'ID'];

//Función que lee el XML y crea la tabla con la información deseada.
function escribir() {
    var tabla = document.createElement('table');
    tabla.setAttribute('border', '1');
    $.ajax({
        type : 'GET',
        dataType : 'xml',
        url : 'ejemplo.xml',
        success : function(xmlResponse) {
            $(xmlResponse).find('ANIMES').each(function() {
                var fila = document.createElement('tr');				
                for (i = 0 ; i < infoNecesaria.length ; i++) {
                    var celda = document.createElement('td');
                    var texto = document.createTextNode($(this).find(infoNecesaria[i]).text());
                    celda.appendChild(texto);
                    fila.appendChild(celda);
                }
                tabla.appendChild(fila);
            });
            $('#contenido').append(tabla);
        },
        error : function() {						
            alert('No se ha encontrado el fichero XML!!');
        }        
    });
}

Bueno, pues ya me comentas qué tal te ha ido.

Un saludo.

😉
 
Última edição:
Y si quiero tener esto por ejemplo...

codigo....
<a href=" ID "> NOMBRE </a>
codigo......
 
Y si quiero tener esto por ejemplo...

codigo....
<a href=" ID "> NOMBRE </a>
codigo......

No entiendo bien. ¿Quieres crear hipervínculos dentro de una tabla o crear simples enlaces con lo obtenido del XML?
 
No es solo un hipervinculo, es un codigo que aun no pienso, lo de la tabla era solo un ejemplo.
 
No es solo un hipervinculo, es un codigo que aun no pienso, lo de la tabla era solo un ejemplo.

Prueba con esto:
Inserir CODE, HTML ou PHP:
function escribir() {
    $.ajax({
        type : 'GET',
        dataType : 'xml',
        url : 'ejemplo.xml',
        success : function(xmlResponse) {
            $(xmlResponse).find('ANIMES').each(function() {	
                var enlace = document.createElement('a');
                enlace.href = $(this).find('ID').text();
                var textoEnlace = document.createTextNode($(this).find('NOMBRE').text());
                enlace.appendChild(textoEnlace);
                $('#contenido').append(enlace).append($(document.createElement('br')));
            });
            
        },
        error : function() {						
            alert('No se ha encontrado el fichero XML!!');
        }        
    });
}

A ver qué tal.

Saludos.

😉
 
Gracias por tu ayuda y paciencia nullPointer, pero creo que no me entiendes mi idea :ambivalence: tengo un codigo html x por ejemplo

<div id="anime"><img src="imagen.php?=ID"></img><a href="anime?id=ID">TITULO</a></div>

Como puedo hacer algo así de manera mas fácil, es decir ir modificando el código según lo necesite, no ir creando elementos como links o tablas...

Saludos
 
Muy buenas las expliciones!
 
Gracias por tu ayuda y paciencia nullPointer, pero creo que no me entiendes mi idea :ambivalence: tengo un codigo html x por ejemplo

<div id="anime"><img src="imagen.php?=ID"></img><a rel="nofollow" href="anime?id=ID">TITULO</a></div>

Como puedo hacer algo así de manera mas fácil, es decir ir modificando el código según lo necesite, no ir creando elementos como links o tablas...

Saludos

Sinceramente xmatias, no logro entender lo que quieres hacer. Sorry 🙁
¿Tu intención es almacenar en variables el contenido del XML y luego modificar manualmente el HTML con esos valores, según te convenga? ¿Es eso?

Muy buenas las expliciones!

Gracias yoguille. 🙂

Un saludo.
 
Última edição:
Voltar
Topo