Generador de JSON

Relacionado

Sobre el generador de JSON y los datos mock de prueba

Casos de uso

• Desarrollo frontend: cuando un componente necesita datos mock estables y reproducibles para renderizar listas de usuarios, tarjetas de producto, detalle de pedidos, etc.
• Integración frontend cuando el backend aún no está listo: el ingeniero frontend genera datos para avanzar sin esperar la respuesta del backend
• QA escribiendo pruebas automatizadas de API: construir lotes de datos con distintos valores de campo para escenarios data-driven
• Documentación de API y ejemplos Swagger / OpenAPI: producir rápidamente ejemplos de request/response que cumplan la estructura
• Preparación de datos para pruebas de estrés y rendimiento: validar la estabilidad del sistema bajo alta concurrencia con grandes volúmenes de datos estructurados
• Migración de bases de datos y herramientas de limpieza de datos: construir JSON de muestra para validar la lógica de negocio
• Docencia y demostraciones: artículos técnicos, diapositivas y material de formación que requieren ejemplos JSON bien estructurados
• Validación de formularios y lógica de caché local en frontend: generar valores límite (muy pequeños / muy grandes / vacíos / tipos anómalos) para pruebas de borde

Cómo Usar

1. Revisa el esquema de ejemplo por defecto en el «Constructor de esquema» de la izquierda (7 campos: id / name / email / age / active / createdAt / bio) o pulsa «+» para añadir campos personalizados
2. Define para cada campo el nombre (personalizable) y el tipo (13 opciones); en tipos numéricos y de párrafo puedes indicar min / max, y en Enum una lista separada por comas
3. Marca «Generar como array» y define la cantidad (1-1000), o desmárcalo para generar un único objeto JSON
4. Pulsa el botón «Generar» arriba a la derecha; el editor de la derecha mostrará al instante el JSON formateado junto con el número de campos y de registros generados
5. Pulsa «Copiar» para pegar el resultado en tu código o herramienta de API, o «Descargar» para guardarlo como generated.json

Características

• 13 tipos de campos integrados: String / Integer / Number / Boolean / Email / Name / UUID / Date / URL / Phone / Paragraph / Enum / Array, listos para usar sin memorizar sintaxis de plantillas
• Constructor visual de campos: añade y elimina campos mediante una interfaz gráfica, define el nombre y el tipo de cada campo de forma visual (WYSIWYG), sin escribir plantillas JSON a mano
• Control de rango para números y párrafos: los tipos Integer, Number y Paragraph admiten valores mínimo y máximo personalizados para generar datos más cercanos al negocio
• Enum con valores personalizados: introduce una lista separada por comas (por ejemplo admin,user,guest) para generar opciones discretas controladas
• Cambio de objeto único a array con un clic: marca «Generar como array» e introduce la cantidad (1-1000) para alternar libremente entre un objeto JSON único y un array
• Carga rápida de esquemas de ejemplo: esquema integrado con 7 campos (id / name / email / age / active / createdAt / bio); un clic genera la muestra completa
• Panel de salida con resaltado de sintaxis: el editor CodeMirror de la derecha muestra el resultado en tiempo real con resaltado JSON, números de línea y modo lectura
• Copiar y descargar al instante: copia el resultado al portapapeles o descárgalo directamente como archivo generated.json
• Ejecución 100% local en el navegador: toda la construcción de campos y generación de datos ocurre dentro de tu navegador, sin subir nada, ideal para campos sensibles
• Adaptado a escritorio y móvil: diseño de doble columna ajustable en PC; en móvil cambia automáticamente a pestañas de entrada/salida para una operación cómoda

Ejemplos de Código

// Put generated.json under /public/mock/users.json
// Then use fetch to load it as mock data
async function fetchMockUsers() {
  const res = await fetch('/mock/users.json');
  const users = await res.json();
  console.log(`Loaded ${users.length} users`);
  return users;
}

// Inline directly into the code (useful for test cases)
const mockUsers = [
  { id: 1, name: 'Jennifer Martinez', email: 'jennifer.martinez382@example.com', age: 42, active: true },
  { id: 2, name: 'Robert Smith', email: 'robert.smith918@test.org', age: 67, active: false }
];

// Or import as a fixture in Jest / Vitest
import users from './fixtures/users.json';
test('renders user list', () => {
  render(<UserList users={users} />);
  expect(screen.getAllByRole('listitem')).toHaveLength(users.length);
});

# Install: pip install faker
from faker import Faker
import json

fake = Faker('zh_CN')  # Chinese locale

# Generate a single user
def gen_user():
    return {
        "id": fake.random_int(min=1, max=99999),
        "name": fake.name(),
        "email": fake.email(),
        "phone": fake.phone_number(),
        "address": fake.address(),
        "company": fake.company(),
        "created_at": fake.iso8601()
    }

# Batch generate 100 records and write to generated.json
users = [gen_user() for _ in range(100)]
with open('generated.json', 'w', encoding='utf-8') as f:
    json.dump(users, f, ensure_ascii=False, indent=2)

print(f"Generated {len(users)} user records")

# Assume generated.json is in the current directory and the target endpoint is POST /api/users
# Batch initialize data
for i in $(seq 1 10); do
  curl -X POST https://api.example.com/users \
    -H "Content-Type: application/json" \
    -d @generated.json | jq '.'
done

# Or extract a single record with jq and POST it
cat generated.json | jq '.[0]' | \
  curl -X POST https://api.example.com/users \
    -H "Content-Type: application/json" \
    -d @-

Preguntas Frecuentes

Solución de problemas

Glosario

JSON

JavaScript Object Notation, formato ligero de intercambio de datos formado por pares clave-valor y arrays; es el estándar de facto para APIs web y comunicación frontend-backend.

Datos Mock

Datos falsos que simulan un escenario de negocio real, usados en desarrollo frontend, integración de APIs y pruebas automatizadas cuando aún no hay backend conectado; deben mantener la misma estructura que la API real.

Schema

Definición que describe la estructura de los datos, por ejemplo «un usuario contiene los campos id, name, email». En esta herramienta, el esquema es el conjunto de nombres y tipos definidos en el constructor de campos de la izquierda.

UUID (v4)

Identificador único universal, cadena de 128 bits definida por el estándar RFC 4122. La versión v4 se basa en números aleatorios (con bits de variante 8/9/a/b); las colisiones son prácticamente imposibles y se usa como clave primaria distribuida.

Tipo de campo (Field Type)

Tipo de dato obligatorio para cada campo en esta herramienta; determina el formato del valor aleatorio generado. Por ejemplo, el tipo Email genera una cadena con formato de correo e Integer genera un entero.

Enum (enumeración)

Tipo de campo que elige al azar un valor dentro de un conjunto discreto predefinido. Por ejemplo, tres valores admin,user,guest para campos de rol, estado o nivel.

min / max

Restricción de rango aplicable solo a Integer, Number y Paragraph. Una vez definidos, los valores aleatorios se generan dentro de ese intervalo cerrado, evitando valores límite obviamente falsos.

Objeto único vs salida array

La herramienta admite dos formas de salida: desmarcando «Generar como array» se obtiene un único objeto JSON {} (útil para depurar una sola llamada); marcando la casilla e indicando una cantidad se obtiene un array [...] (útil para datos en lote).

RFC 4122

Estándar internacional para UUID que define su formato, versiones (v1-v5) y bits de variante. Los UUID generados por esta herramienta cumplen la especificación v4.

CodeMirror

Componente de editor de código en el navegador; en esta herramienta el panel de salida derecho usa CodeMirror para ofrecer resaltado de sintaxis JSON, números de línea y modo lectura.

Procesamiento local

Toda la construcción de campos y generación de datos se ejecuta en JavaScript dentro del navegador del usuario, sin subir nada a ningún servidor: es más rápido y seguro, ideal para campos de negocio sensibles.

Fixture

Archivo de datos de muestra fijo usado en pruebas. La salida del generador puede guardarse como generated.json y reutilizarse como fixture en pruebas de regresión para obtener resultados reproducibles.

Tabla rápida de tipos de campo y reglas de generación

Rango de valores, uso típico y ejemplo de los 13 tipos de campo integrados:

Escenarios comunes de generación JSON y combinaciones de campos recomendadas

A continuación se muestran varios escenarios habituales de datos de prueba de API con sus combinaciones de campos recomendadas, listas para añadir directamente:

Privacy & Security

En este generador de JSON toda la construcción de campos, la generación de datos aleatorios, la copia y la descarga se ejecutan localmente en tu navegador mediante JavaScript: el esquema que definas, los datos aleatorios generados, los nombres de campo y las cantidades no se suben a ningún servidor, ni se registran, se cachean o almacenan en la nube. Puedes usarlo con total tranquilidad con campos internos, estructuras de negocio aún no publicadas y escenarios de prueba sensibles: no existe riesgo de fuga de datos.

Authoritative References

• IETFRFC 4122 - Especificación de UUID (Identificador Único Universal)
• OfficialSitio oficial de JSON (con especificación de sintaxis)
• LibraryMock.js - Librería de datos mock para frontend
• LibraryFaker.js / Faker Python - Librerías de datos ficticios más completas
• MDNMDN - JSON.parse / JSON.stringify