JSONPlaceholder es una de las herramientas favoritas de los desarrolladores cuando estamos aprendiendo o probando aplicaciones.
Básicamente, es una API REST falsa (mock API) que te permite simular peticiones a una base de datos real sin tener que configurar un servidor propio. Es ideal para practicar cómo consumir datos, diseñar interfaces o probar librerías como fetch o Axios. También te dejamos un blog donde encontraras más temas y ejemplos como estos visitar blog
¿Por qué se usa?
- Es gratuita y abierta: No necesitas registrarte ni obtener una «API Key».
- Datos realistas: Te devuelve objetos JSON que parecen reales (usuarios, publicaciones, comentarios).
- Soporta todos los métodos HTTP: Puedes practicar
GET(obtener),POST(crear),PUT/PATCH(editar) yDELETE(borrar).- Nota: Como es una API de prueba, los cambios no se guardan permanentemente en su servidor, pero te responderá como si lo hubiera hecho.
Recursos disponibles (Endpoints)
JSONPlaceholder tiene «tablas» ficticias que puedes consultar. Las principales son:
/posts: 100 publicaciones./comments: 500 comentarios./albums: 100 álbumes./photos: 5000 fotos./todos: 200 tareas pendientes./users: 10 usuarios detallados.
Ejemplos prácticos en JavaScript
Aquí tienes cómo usarlo con la función nativa fetch:
1. Obtener una publicación (GET)
Si quieres traer los datos de un post específico (por ejemplo, el ID 1):
JavaScript
fetch('https://jsonplaceholder.typicode.com/posts/1')
.then(response => response.json())
.then(data => console.log(data));
Resultado esperado:
JSON
{
"userId": 1,
"id": 1,
"title": "sunt aut facere repellat provident...",
"body": "quia et suscipit\nsuscipit recusandae..."
}
2. Crear un recurso (POST)
Si estás probando cómo enviar datos desde un formulario:
JavaScript
fetch('https://jsonplaceholder.typicode.com/posts', {
method: 'POST',
body: JSON.stringify({
title: 'Mi nuevo post',
body: 'Este es el contenido de mi post.',
userId: 1,
}),
headers: {
'Content-type': 'application/json; charset=UTF-8',
},
})
.then(response => response.json())
.then(json => console.log(json));
3. Filtrar recursos
Puedes buscar, por ejemplo, todos los posts que pertenecen al usuario con ID 1: https://jsonplaceholder.typicode.com/posts?userId=1
JavaScript para obtener los datos y HTML/CSS para mostrarlos en una tabla limpia y profesional.
Aquí tienes un código sencillo que puedes copiar en un solo archivo .html para verlo funcionar de inmediato.
Ejemplo: Tabla de Usuarios de JSONPlaceholder
Este código hace una petición al endpoint /users, procesa la respuesta y genera las filas de la tabla dinámicamente.
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Lista de Usuarios - JSONPlaceholder</title>
<style>
body { font-family: sans-serif; margin: 40px; background-color: #f4f4f9; }
table { width: 100%; border-collapse: collapse; background: white; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
th, td { padding: 12px; text-align: left; border-bottom: 1px solid #ddd; }
th { background-color: #4CAF50; color: white; }
tr:hover { background-color: #f1f1f1; }
.loader { font-style: italic; color: #666; }
</style>
</head>
<body>
<h2>Usuarios del Sistema</h2>
<div id="loading" class="loader">Cargando datos...</div>
<table id="usuarios-tabla" style="display:none;">
<thead>
<tr>
<th>ID</th>
<th>Nombre</th>
<th>Email</th>
<th>Ciudad</th>
<th>Compañía</th>
</tr>
</thead>
<tbody id="tabla-body">
</tbody>
</table>
<script>
// Función para obtener datos de la API
async function obtenerUsuarios() {
try {
const respuesta = await fetch('https://jsonplaceholder.typicode.com/users');
const usuarios = await respuesta.json();
// Ocultar mensaje de carga y mostrar tabla
document.getElementById('loading').style.display = 'none';
document.getElementById('usuarios-tabla').style.display = 'table';
const tbody = document.getElementById('tabla-body');
// Recorrer los usuarios y crear las filas
usuarios.forEach(user => {
const fila = `
<tr>
<td>${user.id}</td>
<td>**${user.name}**</td>
<td>${user.email}</td>
<td>${user.address.city}</td>
<td>${user.company.name}</td>
</tr>
`;
tbody.innerHTML += fila;
});
} catch (error) {
console.error('Error al obtener datos:', error);
document.getElementById('loading').innerText = 'Error al cargar los datos.';
}
}
// Llamar a la función
obtenerUsuarios();
</script>
</body>
</html>
¿Qué está pasando en el código?
fetch(): Es la «mano» que va a la URL de JSONPlaceholder a pedir la información.async/await: Lo usamos para que el código espere a que la API responda antes de intentar dibujar la tabla (ya que el internet no es instantáneo).- Template Literals (las comillas
`): Nos permiten mezclar código HTML con variables de JavaScript de forma muy fácil, como${user.name}. - Manipulación del DOM: Usamos
innerHTMLpara inyectar cada fila creada directamente en el cuerpo de la tabla.
¿Cuál es el siguiente paso?
Ahora que ya sabes cómo mostrar datos, ¿te gustaría aprender a filtrar la tabla con un buscador (por ejemplo, escribir un nombre y que solo aparezca ese usuario) o prefieres ver cómo enviar datos nuevos mediante un formulario?
En conclusión, JSONPlaceholder es el «campo de entrenamiento» perfecto para cualquier desarrollador.
Si tuviera que resumir todo lo que hemos visto, se reduce a estos tres puntos clave:
- Es un simulador profesional: Te permite trabajar con datos reales (usuarios, posts, fotos) sin la complicación de crear una base de datos desde cero, lo que te ahorra horas de configuración.
- Es el puente al desarrollo moderno: Al usarlo, aprendes las habilidades más demandadas hoy en día: el manejo de Promesas, el uso de
fetchy la manipulación dinámica del DOM (el contenido de tu página). - Versatilidad total: Vimos que no solo sirve para «leer» información, sino que es una herramienta completa para practicar todo el ciclo de una aplicación (ver, crear, editar y borrar datos).
En pocas palabras, es la herramienta que convierte una página web estática y aburrida en una aplicación interactiva y viva que consume información de la nube. Te dejamos otro sitio web por si gustas saber más sobre el tema explicado jsonplaceholder.typicode.com