JavaScript - problema con datos xml

problema con datos xml

Publicado por Sdu (4 intervenciones) el 15/01/2021 03:01:02

Hola ! Muy buenas !

Es la primera vez que hago código y por una web que estoy intentando hacer me surgió un problema con javascript:

Con el código de mas abajo estoy leyendo un xml con una estructura dada para volcar los datos en una taba de 3 columnas (Nombre, Ubicacion,Beneficio)
El xml lo carga bien, pero cuando quiero llegar a los datos con “getElementsByTagName”
No puedo llegar a ellos, me aparece por cada dato en el listado de las tablas "object HTMLCollection]"

Este es el codigo js que estoy usando:

<script>

    let xmlContent = '';

    let tableBooks = document.getElementById('losinscritos');

    fetch('inscritos.xml').then((response)=> {

        response.text().then((xml)=>{

            xmlContent = xml;

            let parser = new DOMParser();

            let xmlDOM = parser.parseFromString(xmlContent, 'application/xml');

            let books = xmlDOM.querySelectorAll('inscrito');

            books.forEach(bookXmlNode => {

                let row = document.createElement('tr');

                //inscrito

                let td = document.createElement('td');

                td.innerText = td.innerText = bookXmlNode.getElementsByTagName ("nombre");

                row.appendChild(td);

                console.log(`ver ${td.innerText}`)

                //  ubicación

                td = document.createElement('td');

                td.innerText = bookXmlNode.getElementsByTagName ("ubicacion");

                row.appendChild(td);

                //  beneficio

                td = document.createElement('td');

                td.innerText = bookXmlNode.getElementsByTagName ("beneficio");

                row.appendChild(td);

                tableBooks.children[1].appendChild(row);

});

});

});

</script>

Y este es el XML que estoy cargando:

<?xml version="1.0"?>

<lista>

   <inscrito id="uno">

      <nombre>Inscrito Uno</nombre>

      <ubicacion>Mi Hogar Uno</ubicacion>

      <beneficio>Beneficio Total Uno</beneficio>

  </inscrito>

     <inscrito id="uno">

      <nombre>Inscrito Dos</nombre>

      <ubicacion>Mi Hogar Dos</ubicacion>

      <beneficio>Beneficio Total Dos</beneficio>

  </inscrito>

      <inscrito id="uno">

      <nombre>Inscrito Tres</nombre>

      <ubicacion>Mi Hogar Tres</ubicacion>

      <beneficio>Beneficio Total Tres</beneficio>

  </inscrito>

 </lista>

Por favor pido su guía para poder resolverlo por que he tratados varias maneras de solucionarlo y llevo dos dias sin llegar a nada.

Muchísima gracias de antemano.

Saludos y que estén muy bien !

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Pos: 1

Val: 3.506

problema con datos xml

Publicado por joel (895 intervenciones) el 15/01/2021 08:27:35

Hola Sdu, un par de cosas en tu codigo...

- la función getElementsByTagName() siempre devuelve un array de valores, por lo que si la utilizas, en tu caso tienes que hacer referencia siempre al elemento 0
- al añadir el elemento a la tabla no se muy bien porque haces referencia al children[1]

El condigo funcionando quedaría algo así:

<script>

let xmlContent = '';

let tableBooks = document.getElementById('losinscritos');

fetch('inscritos.xml').then((response)=> {

    response.text().then((xml)=>{

        xmlContent = xml;

        let parser = new DOMParser();

        let xmlDOM = parser.parseFromString(xmlContent, 'text/xml');

        let books = xmlDOM.querySelectorAll('inscrito');

        books.forEach(bookXmlNode => {

            let row = document.createElement('tr');

            //inscrito

            let td = document.createElement('td');

            td.innerText = td.innerText = bookXmlNode.getElementsByTagName("nombre")[0].textContent;

            row.appendChild(td);

            console.log(`ver ${td.innerText}`)

            //  ubicación

            td = document.createElement('td');

            td.innerText = bookXmlNode.getElementsByTagName("ubicacion")[0].textContent;

            row.appendChild(td);

            //  beneficio

            td = document.createElement('td');

            td.innerText = bookXmlNode.getElementsByTagName("beneficio")[0].textContent;

            row.appendChild(td);

            tableBooks.appendChild(row);

});

});

});

</script>

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar

problema con datos xml

Publicado por Sdu (4 intervenciones) el 15/01/2021 14:02:08

Hola Joel !!
muchísimas muchísimas gracias por ayudarme y enseñarme !! funciona perfectamente !

Gracias de nuevo y saludos !

Valora esta respuesta

Comentar

problema con datos xml

Publicado por Sdu (4 intervenciones) el 20/01/2021 00:59:00

Hola ! Espero estén mu bien !!

Escribo por que me hicieron un cambio en la estructura Xml que estoy leyendo; son los mismos datos pero ahora con esta estructura:

<datos>

<dato nombre="Inscrito Uno" ubicacion="Mi Hogar Uno" beneficio="Beneficio Total Uno"/>

<dato nombre="Inscrito Dos" ubicacion="Mi Hogar Dos" beneficio="Beneficio Total Dos"/>

<dato nombre="Inscrito Tres" ubicacion="Mi Hogar Tres" beneficio="Beneficio Total Tres"/>

</datos>

Por lo tanto, modifiqué el JS y lo dejé así:

<script>

let xmlContent = '';

let tableBooks = document.getElementById('losinscritos');

fetch('inscritos_atrib.xml').then((response)=> {

    response.text().then((xml)=>{

        xmlContent = xml;

        let parser = new DOMParser();

        let xmlDOM = parser.parseFromString(xmlContent, 'text/xml');

        let books = xmlDOM.querySelectorAll('datos');

        books.forEach(bookXmlNode => {

            console.log(`LARGO = ${books.length}`)

            let row = document.createElement('tr');

            //inscrito

            let td = document.createElement('td');

            td.innerText = td.innerText = bookXmlNode.getElementsByTagName("dato")[0].getAttribute("nombre");

            row.appendChild(td);

            console.log(`ver ${td.innerText}`)

            //  ubicación

            td = document.createElement('td');

            td.innerText = bookXmlNode.getElementsByTagName("dato")[0].getAttribute("ubicacion");

            row.appendChild(td);

            //  beneficio

            td = document.createElement('td');

            td.innerText = bookXmlNode.getElementsByTagName("dato")[0].getAttribute("beneficio");

            row.appendChild(td);

            tableBooks.appendChild(row);

});

});

});

</script>

Y me pinta los datos en el html, pero sólo los de la primera línea del xml.

Hice un console.log para ver el largo de “books” y claro, me da 1, me imagino que es por eso que solo pinta sólo la primera linea (creo ). Pero no he podido encontrar el por qué.

Según las personas que me pasan la estructura xml, ésta funciona por que la han usado desde hace tiempo.

Por favor, me pueden dar alguna luz.

Muchísimas gracias de antemano.

Saludos y que estén muy bien

Valora esta respuesta

Comentar

Pos: 1

Val: 3.506

problema con datos xml

Publicado por joel (895 intervenciones) el 20/01/2021 08:15:37

Hola Sdu, seria algo así:

<script>

let xmlContent = '';

let tableBooks = document.getElementById('losinscritos');

fetch('inscritos.xml').then((response)=> {

    response.text().then((xml)=>{

        xmlContent = xml;

        let parser = new DOMParser();

        let xmlDOM = parser.parseFromString(xmlContent, 'text/xml');

        let books = xmlDOM.querySelectorAll('dato');

        books.forEach(bookXmlNode => {

            let row = document.createElement('tr');

            //inscrito

            let td = document.createElement('td');

            td.innerText = td.innerText = bookXmlNode.getAttribute("nombre");

            row.appendChild(td);

            console.log(`ver ${td.innerText}`)

            //  ubicación

            td = document.createElement('td');

            td.innerText = bookXmlNode.getAttribute("ubicacion");

            row.appendChild(td);

            //  beneficio

            td = document.createElement('td');

            td.innerText = bookXmlNode.getAttribute("beneficio");

            row.appendChild(td);

            tableBooks.appendChild(row);

});

});

});

</script>

Valora esta respuesta

Comentar

problema con datos xml

Publicado por Sdu (4 intervenciones) el 27/01/2021 04:14:49

Hola Joel!!
muchísimas gracias por tu ayuda! funcionó perfecto !

gracias de nuevo !

Valora esta respuesta

Comentar

modificar imagenes

Crear un objeto para guardar contactos