Escribir contenido...

xmatias Siguiendo

Gamma
Verificación en dos pasos activada
Verificado por Whatsapp
Desde
8 Jun 2014
Mensajes
281
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.
 

sanmen1593

Lambda
SEO
Verificación en dos pasos activada
Verificado por Whatsapp
Desde
17 Dic 2010
Mensajes
2.935
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:
 

nullPointer

Beta
Programador
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
24 May 2014
Mensajes
45
Hola xmatias,

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

Insertar CODE, HTML o 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 edición:

xmatias

Gamma
Verificación en dos pasos activada
Verificado por Whatsapp
Desde
8 Jun 2014
Mensajes
281
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.
 

nullPointer

Beta
Programador
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
24 May 2014
Mensajes
45
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:
Insertar CODE, HTML o 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.

Insertar CODE, HTML o 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.png

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:
Insertar CODE, HTML o PHP:
xmlhttp.open('GET','http://localhost/parsearXML/ejemplo.xml',false);
y
Insertar CODE, HTML o 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.
Insertar CODE, HTML o 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 edición:

xmatias

Gamma
Verificación en dos pasos activada
Verificado por Whatsapp
Desde
8 Jun 2014
Mensajes
281
Y si quiero tener esto por ejemplo...

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

xmatias

Gamma
Verificación en dos pasos activada
Verificado por Whatsapp
Desde
8 Jun 2014
Mensajes
281
No es solo un hipervinculo, es un codigo que aun no pienso, lo de la tabla era solo un ejemplo.
 

nullPointer

Beta
Programador
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
24 May 2014
Mensajes
45
No es solo un hipervinculo, es un codigo que aun no pienso, lo de la tabla era solo un ejemplo.

Prueba con esto:
Insertar CODE, HTML o 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.

;)
 

xmatias

Gamma
Verificación en dos pasos activada
Verificado por Whatsapp
Desde
8 Jun 2014
Mensajes
281
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
 

nullPointer

Beta
Programador
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
24 May 2014
Mensajes
45
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 edición:
Arriba