0

Con el código de más 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].

Muchísima gracias de antemano.

¡Saludos y que estén muy bien!

Este es el codijo JS y XML

let xmlContent = '';
    let tableinscritos = 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 dinscritos = xmlDOM.querySelectorAll('inscrito');

            dinscritos.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);
                

                tableinscritos.children[1].appendChild(row);
                
            });
            
        });
    }); 
    
    /*ESTE ES EL XML
    <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>
    
 */
1
  • Prueba usando xmlDOM.querySelector('nombre'). Aunque cada inscrito tenga solo una tupla de atributos, getElementsByTagName siempre devuelve HTMLCollection tal como querySelectorAll siempre devuelve NodeList.
    – ffflabs
    Commented el 15 ene. 2021 a las 3:18

2 respuestas 2

0

Muchísimas gracias!!

pero ahora lamentablemente me cambiaron la estructura Xml que estoy leyendo; son los mismos datos pero ahora con la estructura de código de más abajo.

Por lo tanto, modifiqué el JS, 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

Este es el código que hice:

<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>
    <!--ESTE ES EL XML AHORA
    <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>

    -->
0

te simplifico la vida usa jquery para iterar por el Xml y la tabla ponla en texto y luego le das append a la tabla en el HTML.

let xml = `<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>`;

    parser = new DOMParser();
    XmlDoc = parser.parseFromString(xml,"text/xml");

    let table = '';
    $(XmlDoc).find('dato').each(function () {

        table += `<tr>
                    <td>${$(this).attr('nombre')}</td>
                    <td>${$(this).attr('ubicacion')}</td>
                    <td>${$(this).attr('beneficio')}</td>
                 </tr>`;

    });

    $("#Tabla tbody").append(table);
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <table class="table" id="Tabla">
        <thead>
            <th>Nombre</th>
            <th>Ubicación</th>
            <th>Beneficio</th>
        </thead>
        <tbody></tbody>
    </table>
</body>

</html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.