enter image description here Una de las tareas más comunes en el desarrollo de aplicaciones web es la de consumir datos remotos mediante API Rest. Empleando JavaScript es posible lograrlo usando el método Fetch.

El propósito es cargar un archivo JSON el cual contiene la información a desplegar.

Primero debemos crear un archivo HTML el cual debe contener un DIV el cual desplegará la información del JSON a cargar.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Aprendefast - Consumir JSON con Fetch</title>
    <style>
        #resultados {
            margin-top: 20px;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        .item {
            margin-bottom: 10px;
            padding: 8px;
            background-color: #f5f5f5;
        }
    </style>
</head>
<body>
    <h1>Datos desde JSON</h1>
    <button id="cargarDatos">Cargar Datos</button>
    <div id="resultados"></div>


</body>
</html>

El propósito del botón "" es la de disparar la función que cargará al JSON.

Para ello vamos a crear una etiqueta "script" antes del bloque :

<script></script>

Dentro de la etiqueta script vamos a agregar el Listener del botón "cargarDatos" que atenderá el evento "click":

 document.getElementById('cargarDatos').addEventListener('click', cargarJSON);

Enseguida definimos la función CargarJSON:

function cargarJSON() {
            // URL del archivo JSON (puede ser local o remoto)
            fetch('json/kanban.json') // Cambia esto por la URL de tu JSON
                .then(response => {
                    if (!response.ok) {
                        throw new Error('Network response was not ok');
                    }
                    return response.json();
                })
                .then(data => {
                    mostrarDatos(data);
                })
                .catch(error => {
                    console.error('Hubo un problema con la operación fetch:', error);
                    document.getElementById('resultados').innerHTML = 
                        '<p>Error al cargar los datos. Verifica la consola para más detalles.</p>';
                });
        }

La función CargarJSON usa el método Fetch para el request de un archivo llamado kanban.json, en caso de que la respuesta genere un error este se ve atrapado lanzando un mensaje de error. En caso de que la petición sea exitosa el resultado se pasa como argumento a la función mostrarDatos():

function mostrarDatos(datos) {
            const contenedor = document.getElementById('resultados');

            // Verificar si los datos son un array
            if (Array.isArray(datos)) {
                let html = '<h2>Lista de elementos</h2>';
                datos.forEach(item => {
                    html += `
                        <div class="item">
                            <h3>${item.status || 'Sin nombre'}</h3>
                            <p>ID: ${item.id || 'N/A'}</p>
                            <p>Fecha: ${item.created || 'N/A'}</p>
                        </div>
                    `;
                });
                contenedor.innerHTML = html;
            } 
            // Si es un objeto individual
            else if (typeof datos === 'object' && datos !== null) {
                contenedor.innerHTML = `
                    <h2>Detalles</h2>
                    <div class="item">
                        <h3>${datos.status || 'Sin nombre'}</h3>
                        <p>ID: ${datos.id || 'N/A'}</p>
                        <p>Email: ${datos.created || 'N/A'}</p>
                        <p>Otros datos: ${JSON.stringify(datos, null, 2)}</p>
                    </div>
                `;
            } 
            // Si no es ni array ni objeto
            else {
                contenedor.innerHTML = `<p>Formato de datos no reconocido: ${typeof datos}</p>`;
            }
        }

La función mostrarDatos es un más compleja ya que debe dar formato y presentar de forma humana la información que acabamos de recibir. Para ello iteramos en el Array de los registros para mostrar cada uno de ellos usando etiquetas HTML. Para ello definimos el View que desplegará esa información mediante la declaración siguiente:

const contenedor = document.getElementById('resultados');

Con ello la función ya sabe que en el Div "resultados" donde el usuario verá el JSON cargado.

El archivo completo se ve así:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Aprendefast - Consumir JSON con Fetch</title>
    <style>
        #resultados {
            margin-top: 20px;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        .item {
            margin-bottom: 10px;
            padding: 8px;
            background-color: #f5f5f5;
        }
    </style>
</head>
<body>
    <h1>Datos desde JSON</h1>
    <button id="cargarDatos">Cargar Datos</button>
    <div id="resultados"></div>

    <script>
        document.getElementById('cargarDatos').addEventListener('click', cargarJSON);

        function cargarJSON() {
            // URL del archivo JSON (puede ser local o remoto)
            fetch('json/kanban.json') // Cambia esto por la URL de tu JSON
                .then(response => {
                    if (!response.ok) {
                        throw new Error('Network response was not ok');
                    }
                    return response.json();
                })
                .then(data => {
                    mostrarDatos(data);
                })
                .catch(error => {
                    console.error('Hubo un problema con la operación fetch:', error);
                    document.getElementById('resultados').innerHTML = 
                        '<p>Error al cargar los datos. Verifica la consola para más detalles.</p>';
                });
        }

        function mostrarDatos(datos) {
            const contenedor = document.getElementById('resultados');

            // Verificar si los datos son un array
            if (Array.isArray(datos)) {
                let html = '<h2>Lista de elementos</h2>';
                datos.forEach(item => {
                    html += `
                        <div class="item">
                            <h3>${item.status || 'Sin nombre'}</h3>
                            <p>ID: ${item.id || 'N/A'}</p>
                            <p>Fecha: ${item.created || 'N/A'}</p>
                        </div>
                    `;
                });
                contenedor.innerHTML = html;
            } 
            // Si es un objeto individual
            else if (typeof datos === 'object' && datos !== null) {
                contenedor.innerHTML = `
                    <h2>Detalles</h2>
                    <div class="item">
                        <h3>${datos.status || 'Sin nombre'}</h3>
                        <p>ID: ${datos.id || 'N/A'}</p>
                        <p>Email: ${datos.created || 'N/A'}</p>
                        <p>Otros datos: ${JSON.stringify(datos, null, 2)}</p>
                    </div>
                `;
            } 
            // Si no es ni array ni objeto
            else {
                contenedor.innerHTML = `<p>Formato de datos no reconocido: ${typeof datos}</p>`;
            }
        }
    </script>
</body>
</html>

Para ver el ejemplo funcionando haz click aquí.

Espero que te haya sido de ayuda este artículo :)

Artículos Relacionados

Tutorial

Crear servicios Rest con SpringBoot con ayuda de IA

maestroefra
Tutorial

Formularios con JavaScript

maestroefra

Comentarios