Acceso a Datos Fichero JSON (Sencillo)

por
Tiempo de lectura: 2 minutos

Buenas tardes a tod@s os voy a dejar un tutorial de como acceder a los datos: 

<!DOCTYPE html>
<html>

<body>

    <h2>Primer ejemplo Acceso a datos formato JSON</h2>

    <p id="miDiv"></p>

    <script>
        var texto = '[{"nombre":"Laura Gonzalez", "calle":"Su casa en la montania portal 6", "telefono":877436700, "fecha":"1998-07-25"},{"nombre":"Pablo Perez", "calle":"Su casa en la playa bajo D", "telefono":637456321, "fecha":"1998-07-26"}]';
        var obj = JSON.parse(texto);
        var respuesta = obj[0]["nombre"] + "<br>" + obj[0].calle + "<br>" + obj[0].telefono + "<br>" + new Date(obj[0].fecha);
        respuesta += "<hr>";
        respuesta += obj[1]["nombre"] + "<br>" + obj[1].calle + "<br>" + obj[1].telefono + "<br>" + new Date(obj[1].fecha);
        document.getElementById("miDiv").innerHTML = respuesta;
    </script>

</body>

</html>

En primer lugar lo que hacemos es generar un JSON, en mi caso almacenado en la variable texto 

        var texto = '[{"nombre":"Laura Gonzalez", "calle":"Su casa en la montania portal 6", "telefono":877436700, "fecha":"1998-07-25"},{"nombre":"Pablo Perez", "calle":"Su casa en la playa bajo D", "telefono":637456321, "fecha":"1998-07-26"}]';

A continuación, pasamos la variable que contiene el JSON, para obtener una variable o un objeto

        var obj = JSON.parse(texto);

Ahora creamos una variable respuesta, que es donde vamos a ir mostrando los datos que obtenemos de ese JSON /tenemos que mirarlo como si estuviésemos accediendo a los datos de un array

        var respuesta = obj[0]["nombre"] + "<br>" + obj[0].calle + "<br>" + obj[0].telefono + "<br>" + new Date(obj[0].fecha);
        respuesta += "<hr>";
        respuesta += obj[1]["nombre"] + "<br>" + obj[1].calle + "<br>" + obj[1].telefono + "<br>" + new Date(obj[1].fecha);

Y por último, con la propiedad .InnerHTML, mostramos la variable de respuesta que almacena el resultado de todo el procedimiento:

        document.getElementById("miDiv").innerHTML = respuesta;

Y el resultado es el siguiente:

¡OJO! cuando en la variable de respuesta, o en cualquier otra variable, ponemos el símbolo += (respuesta+=) Lo que estamos haciendo, es concatenar todos los datos o String que añadamos en la misma variable, sin necesidad de tener varias variables.

Post Views: 10

Deja un comentario