1

En una página HTML5 con JS que tengo que hacer, he de simular RSS con un fichero XML (el cual simula un html con un par de etiquetas propias), que tiene articulos, mostrando primero un cabecero con un enlace a la descripción. De momento, el fichero lo lee y muestra bien, salvo por un detalle que me descuadra, salta un undefined por cada linea que muestra, adicionalmente al contenido.

JS:

    function loadDoc() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function()
    {
        if (this.readyState == 4 && this.status == 200)
            myFunction(this);    

    };

    xhttp.open("GET", "data/articles.xml", true);
    xhttp.send();
}

function mostrar(x,texto)
{
    var listado;
    listado+="<div onclick='unhide("+texto+")'> ";
    listado+="<p>";

    listado+=x.getElementsByTagName("h2")[0].childNodes[0].nodeValue; 
    listado+="</p>\n";
    listado+="</div>\n<hr />\n<br /> \n";

    return listado;
}

function myFunction(xml) {
    var i;

    var listado="";

    var x = xml.responseXML.getElementsByTagName("articulo"); 

    for (i = 0; i <x.length; i++)
    { 

        listado+=mostrar(x[i],'a'+i) //Si no llamo a una función externa, sobreescribe lo que ya había


    }

    document.getElementById("ninguno").innerHTML = listado;
}

XML:

<articulos>
    <articulo>
        <article>
            <h2>TEST</h2>
            <p></p>
        </article>
        <img href=''></img>
    </articulo>
    <articulo>
        <article>
            <h2>prueba</h2>
            <p></p>
        </article>
        <img href=''></img>
    </articulo>

</articulos>

Resultado:

Resultado

El css dudo que haga falta, pero aquí va:

div {
    border-radius: 25px;
    padding: 20px; 
    width: 200px;
    height: 150px;    

}

#hidden
{
    display:none;
}
2
  • Es posible que estés llamando a un nodo que no existe. Es por ello el undefined. Del ejemplo XML que pusiste, ¿qué necesitas obtener? Commented el 23 mar. 2017 a las 16:13
  • Aunque requeriré todos los campos eventualmente, en lo que llevo solo busco poner el titulo h2 del article, dentro de un p, que es lo que debería salír únicamente.
    – myenemy
    Commented el 23 mar. 2017 a las 16:22

2 respuestas 2

1

Aunque hayas encontrado la solución, creo que te viene bien saber que puedes hacer lo mismo y más sencillo mediante DOMParser. Esta función tiene una función (en el prototipo, valga la redundancia) llamada parseFromString que recibe dos parámetros:

  • Representación en texto de un determinado formato
  • Mime al cual convertir.

Te devolverá un documento. A partir de este, puedes seleccionar nodos como cualquier selección del DOM.

Ejemplo

let xml = `
<articulos>
    <articulo>
        <article>
            <h2>Introducción a ES6</h2>
            <p></p>
        </article>
        <img href='https://abc.com/axy'></img>
    </articulo>
    <articulo>
        <article>
            <h2>Primeros pasos con MongoDB</h2>
            <p></p>
        </article>
        <img href='https://xyz.com/plq'></img>
    </articulo>
</articulos>
`.trim();

let xmlDoc = new DOMParser().parseFromString(xml, 'text/xml');
let articles = xmlDoc.getElementsByTagName('articulo');
let articlesData = [].map.call(articles, function(article) {
  let content = article.querySelector('article');
  let link = article.querySelector('img');

  return {
    title: content.querySelector('h2').textContent,
    href: link.getAttribute('href')
  };
});

let list = document.getElementById('articles');

articlesData.forEach(function(data) {
  let li = document.createElement('li');
  let a = document.createElement('a');
  li.appendChild(a);

  a.href = data.href;
  a.textContent = data.title;

  list.appendChild(li);
});
body {
  background-color: #fff;
  padding: 50px;
}

@import url('https://fonts.googleapis.com/css?family=Noto+Sans:400,700');
h4 {
  color: #777;
  display: inline-block;
  font-family: 'Noto Sans';
  margin: 0;
}

ul {
  color: #555;
  list-style: inside;
  padding: 0;
}

a {
  color: #555;
  font-family: 'Noto Sans';
  font-size: 15px;
  display: inline-block;
  padding: 8px 10px;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.box {
  border-radius: 5px;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .23), 0 -1px 1px 0 rgba(0, 0, 0, .1);
}

.box-header {
  background-color: #f9f9f9;
  border-bottom: 1px solid #eee;
  padding: 15px;
}

.box-body {
  padding: 15px 20px;
}
<div class="box">
  <header class="box-header">
    <h4>Artículos</h4>
  </header>
  <article class="box-body">
    <ul id="articles"></ul>
  </article>
</div>

0

He encontrado el problema... Que soy tonto o algo. Ese undefined que aparece es por que intenta meter "null", que es el motivo por el cual inicio el listado en my_function a una cadena vacía.

Solo hay que inicializarlo también en mostrar, quedando:

function mostrar(x,texto)
{
    var listado="";
    listado+="<div onclick='unhide("+texto+")'> ";
    listado+="<p>";

    listado+=x.getElementsByTagName("h2")[0].childNodes[0].nodeValue; 
    listado+="</p>\n";
    listado+="</div>\n<hr />\n<br /> \n";

    return listado;
}
1

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.