Paginación con JavaScript, JSON y Bootstrap 5 -

Paginación con JS

En esta entrada, te explicaremos cómo implementar un sistema de paginación en una lista de países, utilizando JavaScript, JSON, y Bootstrap 5 para estilizar la interfaz. Este tutorial continúa lo que vimos anteriormente en el post sobre paginación con PHP, MySQL, jQuery, AJAX y Bootstrap 5, pero aquí usaremos solo JavaScript y datos estáticos en formato JSON, lo cual resulta ideal para aplicaciones de front-end sin necesidad de un servidor backend.

Estructura del Proyecto

Antes de adentrarnos en el código, aquí está la estructura básica que vamos a utilizar:

index.html: el archivo principal donde se construirá la interfaz.
paises.json: un archivo JSON con los datos de los países que usaremos para la paginación y filtrado.

Código HTML (index.html)

Este archivo define la interfaz principal, el formulario de búsqueda, y la tabla para mostrar los datos paginados.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Paginación con Filtros Independientes en JavaScript</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
    <h2 class="mb-4">Lista de Países</h2>

    <!-- Formulario de búsqueda -->
    <div class="row mb-3">
        <div class="col-md-5">
            <input type="text" id="nombre" class="form-control" placeholder="Filtrar por nombre..." onkeyup="filtrarYPaginar(1);">
        </div>
        <div class="col-md-5">
            <input type="text" id="capital" class="form-control" placeholder="Filtrar por capital..." onkeyup="filtrarYPaginar(1);">
        </div>
        <div class="col-md-2">
            <button class="btn btn-primary w-100" onclick="filtrarYPaginar(1)">Buscar</button>
        </div>
    </div>

    <!-- Tabla de países -->
    <div class="table-responsive">
        <table class="table table-bordered table-striped">
            <thead class="table-dark">
                <tr>
                    <th>Código</th>
                    <th>Nombre</th>
                    <th>Moneda</th>
                    <th>Capital</th>
                    <th>Continente</th>
                </tr>
            </thead>
            <tbody id="pais-lista">
                <!-- Los datos se cargarán aquí mediante JavaScript -->
            </tbody>
        </table>
    </div>
    <nav id="paginacion-nav" aria-label="Page navigation"></nav>
</div>

<script>
let paises = [];
let itemsPorPagina = 10;

// Cargar los datos del archivo JSON
fetch('paises.json')
    .then(response => response.json())
    .then(data => {
        paises = data.paises;
        filtrarYPaginar(1); // Mostrar la primera página al cargar los datos
    });

// Filtrar y paginar los datos
function filtrarYPaginar(pagina) {
    const nombre = document.getElementById('nombre').value.toLowerCase();
    const capital = document.getElementById('capital').value.toLowerCase();

    // Filtrar los países según los valores de búsqueda
    const paisesFiltrados = paises.filter(pais => 
        (nombre === '' || pais.nombre.toLowerCase().includes(nombre)) &&
        (capital === '' || pais.capital.toLowerCase().includes(capital))
    );

    // Calcular el total de páginas y el índice de los elementos
    const totalPaginas = Math.ceil(paisesFiltrados.length / itemsPorPagina);
    const offset = (pagina - 1) * itemsPorPagina;
    const paisesPagina = paisesFiltrados.slice(offset, offset + itemsPorPagina);

    // Mostrar los países en la tabla
    const paisLista = document.getElementById('pais-lista');
    paisLista.innerHTML = '';
    paisesPagina.forEach(pais => {
        const row = document.createElement('tr');
        row.innerHTML = `
            <td>${pais.codigo}</td>
            <td>${pais.nombre}</td>
            <td>${pais.moneda}</td>
            <td>${pais.capital}</td>
            <td>${pais.continente}</td>
        `;
        paisLista.appendChild(row);
    });

    // Actualizar los controles de paginación
    const paginacionNav = document.getElementById('paginacion-nav');
    paginacionNav.innerHTML = '';
    const paginationList = document.createElement('ul');
    paginationList.className = 'pagination justify-content-center';
    for (let i = 1; i <= totalPaginas; i++) {
        const pageItem = document.createElement('li');
        pageItem.className = `page-item ${i === pagina ? 'active' : ''}`;
        pageItem.innerHTML = `<button class="page-link" onclick="filtrarYPaginar(${i})">${i}</button>`;
        paginationList.appendChild(pageItem);
    }
    paginacionNav.appendChild(paginationList);
}
</script>
</body>
</html>

100

101

102

103

<!DOCTYPE html>

<head>

<title>Paginación con Filtros Independientes en JavaScript</title>

</head>

<body>

<h2 class="mb-4">Lista de Países</h2>

</div>

</div>

<button class="btn btn-primary w-100" onclick="filtrarYPaginar(1)">Buscar</button>

</div>

<tr>

<th>Código</th>

<th>Nombre</th>

<th>Moneda</th>

<th>Capital</th>

<th>Continente</th>

</tr>

</thead>

</tbody>

</table>

</div>

</div>

let paises = [];

let itemsPorPagina = 10;

// Cargar los datos del archivo JSON

fetch('paises.json')

.then(response => response.json())

.then(data => {

paises = data.paises;

filtrarYPaginar(1); // Mostrar la primera página al cargar los datos

});

// Filtrar y paginar los datos

function filtrarYPaginar(pagina) {

const nombre = document.getElementById('nombre').value.toLowerCase();

const capital = document.getElementById('capital').value.toLowerCase();

// Filtrar los países según los valores de búsqueda

const paisesFiltrados = paises.filter(pais =>

(nombre === '' || pais.nombre.toLowerCase().includes(nombre)) &&

(capital === '' || pais.capital.toLowerCase().includes(capital))

);

// Calcular el total de páginas y el índice de los elementos

const totalPaginas = Math.ceil(paisesFiltrados.length / itemsPorPagina);

const offset = (pagina - 1) * itemsPorPagina;

const paisesPagina = paisesFiltrados.slice(offset, offset + itemsPorPagina);

// Mostrar los países en la tabla

const paisLista = document.getElementById('pais-lista');

paisLista.innerHTML = '';

paisesPagina.forEach(pais => {

const row = document.createElement('tr');

row.innerHTML = `

<td>${pais.codigo}</td>

<td>${pais.nombre}</td>

<td>${pais.moneda}</td>

<td>${pais.capital}</td>

<td>${pais.continente}</td>

paisLista.appendChild(row);

});

// Actualizar los controles de paginación

const paginacionNav = document.getElementById('paginacion-nav');

paginacionNav.innerHTML = '';

const paginationList = document.createElement('ul');

paginationList.className = 'pagination justify-content-center';

for (let i = 1; i <= totalPaginas; i++) {

const pageItem = document.createElement('li');

pageItem.className = `page-item ${i === pagina ? 'active' : ''}`;

pageItem.innerHTML = `<button class="page-link" onclick="filtrarYPaginar(${i})">${i}</button>`;

paginationList.appendChild(pageItem);

}

paginacionNav.appendChild(paginationList);

}

</script>

</body>

</html>

Explicación del Código

Formulario de Búsqueda: Este formulario tiene dos campos de búsqueda, uno para el nombre del país y otro para la capital. Cada campo dispara la función filtrarYPaginar cada vez que se presiona una tecla, permitiendo filtrar los resultados en tiempo real.
Tabla de Resultados: Aquí es donde se insertarán las filas de los países paginados. La tabla es responsive gracias a la clase table-responsive de Bootstrap.
fetch y JSON: Usamos fetch para cargar el archivo paises.json, el cual contiene los datos de los países. Una vez cargados, llamamos a la función filtrarYPaginar para mostrar la primera página.
Función filtrarYPaginar:
- Filtrado: La función filtra los países según los valores ingresados en los campos de búsqueda.
- Paginación: Calcula el total de páginas y los países que pertenecen a la página actual.
- Inserción en la Tabla: Inserta los países en el tbody de la tabla.
- Controles de Paginación: Crea los botones de paginación y resalta el botón de la página actual.

Archivo JSON (paises.json)

El archivo paises.json contiene una lista de países en formato JSON. Aquí un fragmento del contenido:

{
    "paises": [
        { "codigo": "AF", "nombre": "Afganistán", "moneda": "Afghani", "capital": "Kabul", "continente": "Asia" },
        { "codigo": "AL", "nombre": "Albania", "moneda": "Lek", "capital": "Tirana", "continente": "Europa" },
        { "codigo": "DZ", "nombre": "Argelia", "moneda": "Dinar", "capital": "Argel", "continente": "África" },
        { "codigo": "AD", "nombre": "Andorra", "moneda": "Euro", "capital": "Andorra la Vieja", "continente": "Europa" },
        { "codigo": "AO", "nombre": "Angola", "moneda": "Kwanza", "capital": "Luanda", "continente": "África" },
        { "codigo": "AG", "nombre": "Antigua y Barbuda", "moneda": "Dólar del Caribe", "capital": "Saint John’s", "continente": "América" },
        { "codigo": "AR", "nombre": "Argentina", "moneda": "Peso", "capital": "Buenos Aires", "continente": "América" },
        { "codigo": "AM", "nombre": "Armenia", "moneda": "Dram", "capital": "Ereván", "continente": "Asia" },
        { "codigo": "AU", "nombre": "Australia", "moneda": "Dólar australiano", "capital": "Canberra", "continente": "Oceanía" },
        { "codigo": "AT", "nombre": "Austria", "moneda": "Euro", "capital": "Viena", "continente": "Europa" },
        { "codigo": "AZ", "nombre": "Azerbaiyán", "moneda": "Manat", "capital": "Bakú", "continente": "Asia" },
        { "codigo": "BS", "nombre": "Bahamas", "moneda": "Dólar bahameño", "capital": "Nassau", "continente": "América" },
        { "codigo": "BH", "nombre": "Baréin", "moneda": "Dinar", "capital": "Manama", "continente": "Asia" },
        { "codigo": "BD", "nombre": "Bangladesh", "moneda": "Taka", "capital": "Daca", "continente": "Asia" },
        { "codigo": "BB", "nombre": "Barbados", "moneda": "Dólar barbadense", "capital": "Bridgetown", "continente": "América" },
        { "codigo": "BY", "nombre": "Bielorrusia", "moneda": "Rublo bielorruso", "capital": "Minsk", "continente": "Europa" },
        { "codigo": "BE", "nombre": "Bélgica", "moneda": "Euro", "capital": "Bruselas", "continente": "Europa" },
        { "codigo": "BZ", "nombre": "Belice", "moneda": "Dólar beliceño", "capital": "Belmopán", "continente": "América" },
        { "codigo": "BJ", "nombre": "Benín", "moneda": "Franco CFA", "capital": "Porto Novo", "continente": "África" },
        { "codigo": "BT", "nombre": "Bután", "moneda": "Ngultrum", "capital": "Thimphu", "continente": "Asia" },
        { "codigo": "BO", "nombre": "Bolivia", "moneda": "Boliviano", "capital": "Sucre", "continente": "América" },
        { "codigo": "BA", "nombre": "Bosnia y Herzegovina", "moneda": "Marco convertible", "capital": "Sarajevo", "continente": "Europa" },
        { "codigo": "BW", "nombre": "Botsuana", "moneda": "Pula", "capital": "Gaborone", "continente": "África" },
        { "codigo": "BR", "nombre": "Brasil", "moneda": "Real", "capital": "Brasilia", "continente": "América" },
        { "codigo": "BN", "nombre": "Brunéi", "moneda": "Dólar de Brunéi", "capital": "Bandar Seri Begawan", "continente": "Asia" },
        { "codigo": "BG", "nombre": "Bulgaria", "moneda": "Lev", "capital": "Sofía", "continente": "Europa" },
        { "codigo": "BF", "nombre": "Burkina Faso", "moneda": "Franco CFA", "capital": "Uagadugú", "continente": "África" },
        { "codigo": "BI", "nombre": "Burundi", "moneda": "Franco burundés", "capital": "Gitega", "continente": "África" },
        { "codigo": "KH", "nombre": "Camboya", "moneda": "Riel", "capital": "Nom Pen", "continente": "Asia" },
        { "codigo": "CM", "nombre": "Camerún", "moneda": "Franco CFA", "capital": "Yaundé", "continente": "África" },
        { "codigo": "CA", "nombre": "Canadá", "moneda": "Dólar canadiense", "capital": "Ottawa", "continente": "América" },
        { "codigo": "CL", "nombre": "Chile", "moneda": "Peso chileno", "capital": "Santiago", "continente": "América" },
        { "codigo": "CN", "nombre": "China", "moneda": "Yuan", "capital": "Pekín", "continente": "Asia" },
        { "codigo": "CO", "nombre": "Colombia", "moneda": "Peso colombiano", "capital": "Bogotá", "continente": "América" },
        { "codigo": "CR", "nombre": "Costa Rica", "moneda": "Colón costarricense", "capital": "San José", "continente": "América" },
        { "codigo": "HR", "nombre": "Croacia", "moneda": "Kuna", "capital": "Zagreb", "continente": "Europa" },
        { "codigo": "CU", "nombre": "Cuba", "moneda": "Peso cubano", "capital": "La Habana", "continente": "América" },
        { "codigo": "CY", "nombre": "Chipre", "moneda": "Euro", "capital": "Nicosia", "continente": "Asia" },
        { "codigo": "CZ", "nombre": "República Checa", "moneda": "Corona checa", "capital": "Praga", "continente": "Europa" },
        { "codigo": "DK", "nombre": "Dinamarca", "moneda": "Corona danesa", "capital": "Copenhague", "continente": "Europa" },
        { "codigo": "DO", "nombre": "República Dominicana", "moneda": "Peso dominicano", "capital": "Santo Domingo", "continente": "América" },
        { "codigo": "EC", "nombre": "Ecuador", "moneda": "Dólar estadounidense", "capital": "Quito", "continente": "América" },
        { "codigo": "EG", "nombre": "Egipto", "moneda": "Libra egipcia", "capital": "El Cairo", "continente": "África" },
        { "codigo": "SV", "nombre": "El Salvador", "moneda": "Dólar estadounidense", "capital": "San Salvador", "continente": "América" },
        { "codigo": "FR", "nombre": "Francia", "moneda": "Euro", "capital": "París", "continente": "Europa" },
        { "codigo": "DE", "nombre": "Alemania", "moneda": "Euro", "capital": "Berlín", "continente": "Europa" },
        { "codigo": "GR", "nombre": "Grecia", "moneda": "Euro", "capital": "Atenas", "continente": "Europa" },
        { "codigo": "IN", "nombre": "India", "moneda": "Rupia india", "capital": "Nueva Delhi", "continente": "Asia" },
        { "codigo": "IT", "nombre": "Italia", "moneda": "Euro", "capital": "Roma", "continente": "Europa" },
        { "codigo": "JP", "nombre": "Japón", "moneda": "Yen", "capital": "Tokio", "continente": "Asia" },
        { "codigo": "MX", "nombre": "México", "moneda": "Peso mexicano", "capital": "Ciudad de México", "continente": "América" },
        { "codigo": "NG", "nombre": "Nigeria", "moneda": "Naira", "capital": "Abuya", "continente": "África" },
        { "codigo": "ZA", "nombre": "Sudáfrica", "moneda": "Rand", "capital": "Pretoria", "continente": "África" },
        { "codigo": "KR", "nombre": "Corea del Sur", "moneda": "Won surcoreano", "capital": "Seúl", "continente": "Asia" },
        { "codigo": "ES", "nombre": "España", "moneda": "Euro", "capital": "Madrid", "continente": "Europa" },
        { "codigo": "US", "nombre": "Estados Unidos", "moneda": "Dólar estadounidense", "capital": "Washington D.C.", "continente": "América" }
    ]
}

{

"paises": [

{ "codigo": "AF", "nombre": "Afganistán", "moneda": "Afghani", "capital": "Kabul", "continente": "Asia" },

{ "codigo": "AL", "nombre": "Albania", "moneda": "Lek", "capital": "Tirana", "continente": "Europa" },

{ "codigo": "DZ", "nombre": "Argelia", "moneda": "Dinar", "capital": "Argel", "continente": "África" },

{ "codigo": "AD", "nombre": "Andorra", "moneda": "Euro", "capital": "Andorra la Vieja", "continente": "Europa" },

{ "codigo": "AO", "nombre": "Angola", "moneda": "Kwanza", "capital": "Luanda", "continente": "África" },

{ "codigo": "AG", "nombre": "Antigua y Barbuda", "moneda": "Dólar del Caribe", "capital": "Saint John’s", "continente": "América" },

{ "codigo": "AR", "nombre": "Argentina", "moneda": "Peso", "capital": "Buenos Aires", "continente": "América" },

{ "codigo": "AM", "nombre": "Armenia", "moneda": "Dram", "capital": "Ereván", "continente": "Asia" },

{ "codigo": "AU", "nombre": "Australia", "moneda": "Dólar australiano", "capital": "Canberra", "continente": "Oceanía" },

{ "codigo": "AT", "nombre": "Austria", "moneda": "Euro", "capital": "Viena", "continente": "Europa" },

{ "codigo": "AZ", "nombre": "Azerbaiyán", "moneda": "Manat", "capital": "Bakú", "continente": "Asia" },

{ "codigo": "BS", "nombre": "Bahamas", "moneda": "Dólar bahameño", "capital": "Nassau", "continente": "América" },

{ "codigo": "BH", "nombre": "Baréin", "moneda": "Dinar", "capital": "Manama", "continente": "Asia" },

{ "codigo": "BD", "nombre": "Bangladesh", "moneda": "Taka", "capital": "Daca", "continente": "Asia" },

{ "codigo": "BB", "nombre": "Barbados", "moneda": "Dólar barbadense", "capital": "Bridgetown", "continente": "América" },

{ "codigo": "BY", "nombre": "Bielorrusia", "moneda": "Rublo bielorruso", "capital": "Minsk", "continente": "Europa" },

{ "codigo": "BE", "nombre": "Bélgica", "moneda": "Euro", "capital": "Bruselas", "continente": "Europa" },

{ "codigo": "BZ", "nombre": "Belice", "moneda": "Dólar beliceño", "capital": "Belmopán", "continente": "América" },

{ "codigo": "BJ", "nombre": "Benín", "moneda": "Franco CFA", "capital": "Porto Novo", "continente": "África" },

{ "codigo": "BT", "nombre": "Bután", "moneda": "Ngultrum", "capital": "Thimphu", "continente": "Asia" },

{ "codigo": "BO", "nombre": "Bolivia", "moneda": "Boliviano", "capital": "Sucre", "continente": "América" },

{ "codigo": "BA", "nombre": "Bosnia y Herzegovina", "moneda": "Marco convertible", "capital": "Sarajevo", "continente": "Europa" },

{ "codigo": "BW", "nombre": "Botsuana", "moneda": "Pula", "capital": "Gaborone", "continente": "África" },

{ "codigo": "BR", "nombre": "Brasil", "moneda": "Real", "capital": "Brasilia", "continente": "América" },

{ "codigo": "BN", "nombre": "Brunéi", "moneda": "Dólar de Brunéi", "capital": "Bandar Seri Begawan", "continente": "Asia" },

{ "codigo": "BG", "nombre": "Bulgaria", "moneda": "Lev", "capital": "Sofía", "continente": "Europa" },

{ "codigo": "BF", "nombre": "Burkina Faso", "moneda": "Franco CFA", "capital": "Uagadugú", "continente": "África" },

{ "codigo": "BI", "nombre": "Burundi", "moneda": "Franco burundés", "capital": "Gitega", "continente": "África" },

{ "codigo": "KH", "nombre": "Camboya", "moneda": "Riel", "capital": "Nom Pen", "continente": "Asia" },

{ "codigo": "CM", "nombre": "Camerún", "moneda": "Franco CFA", "capital": "Yaundé", "continente": "África" },

{ "codigo": "CA", "nombre": "Canadá", "moneda": "Dólar canadiense", "capital": "Ottawa", "continente": "América" },

{ "codigo": "CL", "nombre": "Chile", "moneda": "Peso chileno", "capital": "Santiago", "continente": "América" },

{ "codigo": "CN", "nombre": "China", "moneda": "Yuan", "capital": "Pekín", "continente": "Asia" },

{ "codigo": "CO", "nombre": "Colombia", "moneda": "Peso colombiano", "capital": "Bogotá", "continente": "América" },

{ "codigo": "CR", "nombre": "Costa Rica", "moneda": "Colón costarricense", "capital": "San José", "continente": "América" },

{ "codigo": "HR", "nombre": "Croacia", "moneda": "Kuna", "capital": "Zagreb", "continente": "Europa" },

{ "codigo": "CU", "nombre": "Cuba", "moneda": "Peso cubano", "capital": "La Habana", "continente": "América" },

{ "codigo": "CY", "nombre": "Chipre", "moneda": "Euro", "capital": "Nicosia", "continente": "Asia" },

{ "codigo": "CZ", "nombre": "República Checa", "moneda": "Corona checa", "capital": "Praga", "continente": "Europa" },

{ "codigo": "DK", "nombre": "Dinamarca", "moneda": "Corona danesa", "capital": "Copenhague", "continente": "Europa" },

{ "codigo": "DO", "nombre": "República Dominicana", "moneda": "Peso dominicano", "capital": "Santo Domingo", "continente": "América" },

{ "codigo": "EC", "nombre": "Ecuador", "moneda": "Dólar estadounidense", "capital": "Quito", "continente": "América" },

{ "codigo": "EG", "nombre": "Egipto", "moneda": "Libra egipcia", "capital": "El Cairo", "continente": "África" },

{ "codigo": "SV", "nombre": "El Salvador", "moneda": "Dólar estadounidense", "capital": "San Salvador", "continente": "América" },

{ "codigo": "FR", "nombre": "Francia", "moneda": "Euro", "capital": "París", "continente": "Europa" },

{ "codigo": "DE", "nombre": "Alemania", "moneda": "Euro", "capital": "Berlín", "continente": "Europa" },

{ "codigo": "GR", "nombre": "Grecia", "moneda": "Euro", "capital": "Atenas", "continente": "Europa" },

{ "codigo": "IN", "nombre": "India", "moneda": "Rupia india", "capital": "Nueva Delhi", "continente": "Asia" },

{ "codigo": "IT", "nombre": "Italia", "moneda": "Euro", "capital": "Roma", "continente": "Europa" },

{ "codigo": "JP", "nombre": "Japón", "moneda": "Yen", "capital": "Tokio", "continente": "Asia" },

{ "codigo": "MX", "nombre": "México", "moneda": "Peso mexicano", "capital": "Ciudad de México", "continente": "América" },

{ "codigo": "NG", "nombre": "Nigeria", "moneda": "Naira", "capital": "Abuya", "continente": "África" },

{ "codigo": "ZA", "nombre": "Sudáfrica", "moneda": "Rand", "capital": "Pretoria", "continente": "África" },

{ "codigo": "KR", "nombre": "Corea del Sur", "moneda": "Won surcoreano", "capital": "Seúl", "continente": "Asia" },

{ "codigo": "ES", "nombre": "España", "moneda": "Euro", "capital": "Madrid", "continente": "Europa" },

{ "codigo": "US", "nombre": "Estados Unidos", "moneda": "Dólar estadounidense", "capital": "Washington D.C.", "continente": "América" }

]

}

Este JSON se carga en paises mediante fetch en el archivo JavaScript y se utiliza para generar la paginación y los filtros en tiempo real.

Sugerencias Finales

Ajusta itemsPorPagina en el script de JavaScript para cambiar la cantidad de elementos por página.
Agrega clases de Bootstrap para mejorar el diseño y la presentación visual de los elementos.
Modifica los filtros o la tabla según los datos que necesites mostrar en tu propio proyecto.

Este tipo de paginación usando JSON es una excelente alternativa para proyectos que no requieren almacenar datos sensibles o que no dependen de una base de datos como MySQL. Dado que el archivo paises.json se encuentra de forma pública en el servidor, es ideal para compartir información de acceso general, como datos de países, productos, o contenido informativo que no necesita protección estricta. Sin embargo, para datos sensibles o con alta frecuencia de actualización, es recomendable usar una base de datos y mecanismos de autenticación y seguridad más robustos.

Ver demostración

Blog

Paginación con JavaScript, JSON y Bootstrap 5

Estructura del Proyecto

Código HTML (index.html)

Explicación del Código

Archivo JSON (paises.json)

Sugerencias Finales

También te puede interesar:

Integración de APIs REST con Fetch API, PHP y MySQL

Autenticación de Usuarios con Google OAuth en PHP

Crea tu propio CMS-Builder similar a STRAPI con PHP-MySQL

Suscríbete a nuestro boletín de noticias

Sobre Mi

Productos

Enlaces importantes

Blog

Estructura del Proyecto

Código HTML (index.html)

Explicación del Código

Archivo JSON (paises.json)

Sugerencias Finales

También te puede interesar:

Integración de APIs REST con Fetch API, PHP y MySQL

Autenticación de Usuarios con Google OAuth en PHP

Crea tu propio CMS-Builder similar a STRAPI con PHP-MySQL

Sobre Mi

Productos

Enlaces importantes

Sistema para Gestión de Archivos con PHP