json to html

Perform JSON to HTML conversion online with Node.js.

Exibir JSON(JavaScript Object Notation) em formato HTML é essencial ao construir painéis, relatórios visuais ou incorporar dados estruturados em conteúdo web. Em vez de formatar os dados manualmente, agora você pode converter JSON em HTML no Node.js usando o poderoso GroupDocs.Conversion Cloud SDK — uma API REST que simplifica a transformação de documentos.

Neste tutorial, vamos guiá-lo sobre como converter um arquivo JSON em um documento HTML limpo e pronto para navegador usando Node.js.

📌 Navegação Rápida

🚀 Por que converter JSON para HTML?

HTML é o formato padrão para exibir dados na web. Ao converter JSON (JavaScript Object Notation) em HTML, os desenvolvedores podem:

  • ✅ Renderizar dados estruturados em layouts amigáveis ao usuário.
  • ✅ Incorpore JSON em websites ou aplicativos web.
  • ✅ Crie tabelas ou blocos legíveis a partir de JSON aninhado.
  • ✅ Exporte respostas da API para páginas HTML legíveis.

⚙️ Instalar o SDK do GroupDocs para Node.js

GroupDocs.Conversion Cloud SDK for Node.js oferece uma maneira leve de integrar a conversão de formatos de arquivo em suas aplicações baseadas em JavaScript. Para começar:

  1. Instale via npm:
npm install groupdocs-conversion-cloud --save
  1. Obtenha suas credenciais de API (Client ID e Client Secret) no GroupDocs Cloud Dashboard. Para mais informações, você pode seguir as instruções especificadas neste tutorial.

🛠️ Converter JSON para HTML em Node.js

Aqui está como converter um arquivo JSON em HTML usando o GroupDocs.Conversion Cloud SDK no Node.js:

📌 Passo 1: Importar SDK e 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);

📌 Passo 2: Faça o upload do arquivo JSON para a nuvem

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

📌 Passo 3: Definir opções de conversão (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.");

// More examples over https://github.com/groupdocs-conversion-cloud/groupdocs-conversion-cloud-dotnet
// Obtenha suas credenciais da API 
string clientId = "XXXXXX-XXXXXXXXX-4088-9ca0-55c38f4b7f22";
string clientSecret1 = "XXXXXXXXXXXXXXXXXXXX";

// Crie uma instância da classe Configuration e inicialize-a com o Client ID & Client Secret
Configuration configuration = new Configuration(clientId, clientSecret);
// Defina a URL base da API para realizar a conversão de JSON para HTML online
configuration.setApiBaseUrl("https://api.groupdocs.cloud");

// Inicialize uma instância do ConvertApi com o objeto de Configuração.
ConvertApi convertApi = new ConvertApi(configuration);

ConvertSettings settings = new ConvertSettings();
settings.setStorageName("internal");
settings.setFilePath("input.json");
settings.setFormat("HTML");
settings.setOutputPath("myResultant.html");
    
// Use o método ConvertDocument para converter JSON em um arquivo 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

Imagem:- Uma prévia da conversão de JSON para HTML realizada com Node.js.

  • O JSON de entrada usado no exemplo acima pode ser baixado a partir de este link.

💻 Converter JSON para HTML via cURL

Enquanto usa GroupDocs.Conversion Cloud com comandos cURL, você também pode realizar conversão de JSON para HTML. Esta abordagem não apenas simplifica a automação e a integração em vários fluxos de trabalho, mas proporciona uma transformação de dados independente da plataforma, fácil de scriptar e permite uma transformação de dados de alta qualidade e sem costura, sem exigir codificação extensa.

Gerar um token de acesso JWT com base nas credenciais do cliente e, em seguida, executar o seguinte 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, substitua inputFile pelo nome do arquivo JSON de entrada, myResultant pelo nome do arquivo HTML resultante e accessToken por um token de acesso JWT personalizado.

  • Você pode considerar executar o seguinte comando se o requisito for salvar o HTML resultante no disco 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\"}"

✅ Conclusão

Converter JSON para HTML usando o GroupDocs.Conversion Cloud SDK para Node.js ajuda os desenvolvedores a gerar conteúdo web dinâmico, legível e apresentável a partir de dados estruturados. Seja você construindo painéis de administração, automatizando relatórios ou trabalhando com respostas de API JSON, este SDK simplifica o processo com uma saída HTML limpa.

📚 Recursos Úteis

🌐 Aplicativo Online Gratuito de JSON para HTML

Para experimentar as incríveis capacidades GroupDocs.Conversion Cloud no navegador da web, você pode considerar usar nosso aplicativo gratuito e leve JSON to HTML Conversion App.

conversor de json para html

🔗 Artigos Relacionados

Recomendamos visitar os seguintes links para saber mais sobre: