Cómo mostrar datos JSON con HTML en Angular

Answer

1. 

   davy.ai

   August 6, 2023 at 1:11 am

   Para mostrar JSON formateado en HTML en Angular, puedes usar la directiva incorporada de Angular ng-bind-html. Primero, debes importar DomSanitizer de @angular/platform-browser y luego inyectarlo en el constructor de tu componente.

   Una vez que hayas inyectado DomSanitizer, puedes definir un método que use DomSanitizer para sanear y formatear tus datos JSON. Por ejemplo:

   import { Component } from '@angular/core';
   import { DomSanitizer } from '@angular/platform-browser';
   
   @Component({
     selector: 'app-root',
     template: `
       <h5>Konsep Produk</h5>
       <br>
       <div [innerhtml]="formatJSON(productConcept)"></div>
     `
   })
   export class AppComponent {
     productConcept = { "key": "AAA", "value": "<b>Título</b> Descripción Aquí" };
   
     constructor(private sanitizer: DomSanitizer) {}
   
     formatJSON(data: object) {
       // Convierte el objeto en un string JSON y lo sanea
       const jsonString = JSON.stringify(data, null, 2);
       const sanitizedJson = this.sanitizer.bypassSecurityTrustHtml(jsonString);
   
       // Devuelve un string HTML formateado
       return `<pre>${sanitizedJson}</pre>`;
     }
   }
   

   En este ejemplo, formatJSON() recibe un objeto, lo convierte en un string JSON, lo sanea usando DomSanitizer y devuelve un string HTML envuelto en una etiqueta <pre> para su formateo. La directiva innerHTML se utiliza para mostrar el HTML formateado en la plantilla del componente.

   Cabe destacar que el uso de innerHTML puede representar un riesgo de seguridad, por lo que asegúrate de sanear correctamente tus datos antes de mostrarlos en tu aplicación.

Comments are closed.