json to html

Realiza la conversión de JSON a HTML en línea con Node.js.

Mostrar JSON(JavaScript Object Notation) datos en HTML formato es esencial al construir paneles, informes visuales o incrustar datos estructurados en contenido web. En lugar de formatear datos manualmente, ahora puedes convertir JSON a HTML en Node.js utilizando el potente GroupDocs.Conversion Cloud SDK — una API REST que simplifica la transformación de documentos.

En este tutorial, te guiaremos a través de cómo convertir un archivo JSON en un documento HTML limpio y listo para el navegador utilizando Node.js.

📌 Navegación Rápida

🚀 ¿Por qué convertir JSON a HTML?

HTML es el formato estándar para mostrar datos en la web. Al convertir JSON (JavaScript Object Notation) a HTML, los desarrolladores pueden:

  • ✅ Renderizar datos estructurados en diseños amigables para el usuario.
  • ✅ Integrar JSON en sitios web o aplicaciones web.
  • ✅ Crear tablas o bloques legibles a partir de JSON anidado.
  • ✅ Exportar respuestas de API a páginas HTML legibles.

⚙️ Instalar el SDK de GroupDocs para Node.js

GroupDocs.Conversion Cloud SDK para Node.js ofrece una forma ligera de integrar la conversión de formatos de archivo en sus aplicaciones basadas en JavaScript. Para comenzar:

  1. Instalar a través de npm:
npm install groupdocs-conversion-cloud --save
  1. Obtén tus credenciales de API (Client ID y Client Secret) del GroupDocs Cloud Dashboard. Para más información, puedes seguir las instrucciones especificadas en este tutorial.

🛠️ Convertir JSON a HTML en Node.js

Aquí está cómo convertir un archivo JSON a HTML usando GroupDocs.Conversion Cloud SDK en Node.js:

📌 Paso 1: Importar SDK y configurar API

const { Configuration, ConvertApi, FileApi, UploadFileRequest, ConvertSettings, ConvertDocumentRequest } = require("groupdocs-conversion-cloud");
const config = new Configuration("YOUR_CLIENT_ID", "YOUR_CLIENT_SECRET");
const convertApi = new ConvertApi(config);
const fileApi = new FileApi(config);

📌 Paso 2: Cargue el archivo JSON en la Cloud

const fs = require("fs");
const uploadRequest = new UploadFileRequest("input.json", fs.createReadStream("input.json"));
await fileApi.uploadFile(uploadRequest);

📌 Paso 3: Configurar opciones de conversión (JSON → HTML)

const settings = new ConvertSettings();
settings.filePath = "input.json";
settings.format = "html";
settings.outputPath = "converted/output.html";

const request = new ConvertDocumentRequest(settings);
await convertApi.convertDocument(request);
console.log("✅ JSON converted to HTML successfully.");

// Más ejemplos en https://github.com/groupdocs-conversion-cloud/groupdocs-conversion-cloud-dotnet
// Obtén tus credenciales de API 
string clientId = "XXXXXX-XXXXXXXXX-4088-9ca0-55c38f4b7f22";
string clientSecret1 = "XXXXXXXXXXXXXXXXXXXX";

// Crear una instancia de la clase Configuration e inicializarla con el Client ID y Client Secret
Configuration configuration = new Configuration(clientId, clientSecret);
// Define la URL base de la API para realizar la conversión de JSON a HTML en línea.
configuration.setApiBaseUrl("https://api.groupdocs.cloud");

// Inicializa una instancia de ConvertApi con el objeto Configuration.
ConvertApi convertApi = new ConvertApi(configuration);

ConvertSettings settings = new ConvertSettings();
settings.setStorageName("internal");
settings.setFilePath("input.json");
settings.setFormat("HTML");
settings.setOutputPath("myResultant.html");
    
// Use el método ConvertDocument para convertir JSON a archivo HTML.
ConvertDocumentRequest request = new ConvertDocumentRequest(settings);
List<StoredConvertedResult> response = convertApi.convertDocument(request);
    
// Check the response and print success message
if (response != null && response.equals("OK")) {
    System.out.println("Conversion successful! Resultant HTML file is saved at: " + response.getFilePath());
}
json to html

Imagen:- Una vista previa de la conversión de JSON a HTML realizada con Node.js.

  • El JSON de entrada utilizado en el ejemplo anterior se puede descargar de este enlace .

💻 Convertir JSON a HTML a través de cURL

Mientras usas GroupDocs.Conversion Cloud con comandos cURL, también puedes realizar la conversión de JSON a HTML. Este enfoque no solo simplifica la automatización y la integración en varios flujos de trabajo, sino que proporciona una transformación de datos independiente de la plataforma, fácil de scriptar y permite una transformación de datos continua y de alta calidad sin requerir codificación extensa.

Generar un token de acceso JWT basado en credenciales de cliente y luego ejecutar el siguiente comando:

curl -v "https://api.groupdocs.cloud/v2.0/conversion" \
-X POST \
-H "accept: application/json" \
-H "authorization: Bearer {YOUR_ACCESS_TOKEN}" \
-H "Content-Type: application/json" \
-d "{  \"StorageName\": \"internal\",  \"FilePath\": \"{inputFile}\",  \"Format\": \"html\",  \"OutputPath\": \"{myResultant}\"}"

Por favor, reemplace inputFile con el nombre del archivo JSON de entrada, myResultant con el nombre del archivo HTML resultante y accessToken con un token de acceso JWT personalizado.

  • Puede considerar ejecutar el siguiente comando si el requisito es guardar el HTML resultante en la unidad local:
curl -v "https://api.groupdocs.cloud/v2.0/conversion" \
-X POST \
-H "accept: application/json" \
-H "authorization: Bearer {accessToken}" \
-H "Content-Type: application/json" \
-d "{  \"StorageName\": \"internal\",  \"FilePath\": \"input.json\",  \"Format\": \"html\"}"

✅ Conclusión

Convertir JSON a HTML utilizando GroupDocs.Conversion Cloud SDK para Node.js ayuda a los desarrolladores a generar contenido web dinámico, legible y presentable a partir de datos estructurados. Ya sea que estés construyendo paneles de administración, automatizando informes o trabajando con respuestas de API JSON, este SDK simplifica el proceso con una salida HTML limpia.

📚 Recursos Útiles

🌐 Aplicación en línea gratuita para convertir JSON a HTML

Para experimentar las increíbles capacidades GroupDocs.Conversion Cloud en el navegador web, puede considerar usar nuestra aplicación gratuita y ligera JSON to HTML Conversion App.

convertidor de json a html

🔗 Artículos Relacionados

Recomendamos visitar los siguientes enlaces para aprender más sobre: