Acceder a datos personalizados con JavaScript

HTML5

Microdatos y datos personalizados

En este post explicaré cómo acceder a datos personalizados mediante JavaScript. Con la introducción de los micodatos, HTML5 tiene una API que define el DOM de datasets o conjunto de datos. Esto ayudaría a filtrar datos en el lado del cliente sin necesidad de hacer una llamada al servidor.

Pondré el ejemplo de películas que empleé en el post anterior de la serie pero, añadiré un elemento <p> donde se imprimirá la información de los microdatos.

XHTML
1
2
3
4
5
6
7
<ul>
    <li data-estreno="1985" data-director="Robert Zemeckis" data-genero="Ciencia ficción">Regreso al futuro</li>
    <li data-estreno="1994" data-director="Robert Zemeckis" data-genero="Comedia dramática">Forrest Gump</li>
    <li data-estreno="1997" data-director="James Cameron" data-genero="Drama">Titanic</li>
    <li data-estreno="1994" data-director="Steven Spielberg" data-genero="Drama histórico">La lista de Schindler</li>
</ul>
<p></p>

Y cerca del cierre del <body>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
    var peliculas = document.getElementsByTagName("li");
    var output = "Directores de los 80s 90s: ";
    for (var i=0; i < peliculas.length; i++) {
        output += peliculas[i].dataset.director;
        if (i != (peliculas.length-1)) {
            output += ", "
        }
    }
    document.getElementsByTagName("p")[0].innerHTML = output;
</script>

En este javascript primero se crea un array de todos los elementos li y se declara el string que se imprimirá. En el bucle se recorre cada elemento li y con dataset se recogen los datos personalizados. En este caso uso dataset.director para acceder a data-director si quisiera acceder a género dataset.genero y lo mismo con estreno usando dataset.estreno.

Además, en el bucle se concatena los datos que se van sacando añadiendo una coma, salvo cuando sea el último elemento, entonces no añadirá una coma. Al final la cadena output se imprime en el primer <p> del documento.

Qué hacer si no funciona en un navegador?

Si tuvieses algún problema con el navegador, se podría acceder a los datos personalizados usando el método getAttribute(). Entonces el bucle quedaría así en caso de que la API no funcione.

JavaScript
1
2
3
4
5
6
7
8
9
10
for (var i=0; i < peliculas.length; i++) {
     if (peliculas[i].dataset) {
            output += peliculas[i].dataset.director;
        } else {
            output += peliculas[i].getAttribute("data-director");  
     }
   if (i != (peliculas.length-1)) {
     output += ", "
   }
}

Y hasta aquí acceder a datos personalizados con javasSript, espero que le saquéis partido. A seguir picando 🙂