Mostrar JSON en React

1. el método JSON.stringify()
2. la etiqueta <pre> en HTML
3. Mostrar JSON en React

Al crear aplicaciones web en React, es una necesidad común recibir datos externos y mostrarlos. JSON (Notación de objetos de JavaScript) es un formato comúnmente utilizado para compartir datos almacenados como objetos.

El enfoque de este artículo será mostrar cómo mostrar datos con formato JSON en React.

Si necesita imprimir datos JSON correctamente formateados, debe comprender dos conceptos: el método JSON.stringify() y el elemento <pre> en HTML.

el método JSON.stringify()

Este método toma objetos JavaScript válidos y los convierte en cadenas con formato JSON. Puede tomar hasta tres argumentos.

Sin embargo, para este artículo, solo necesitamos comprender el primer argumento, que toma objetos JavaScript válidos y los convierte en cadenas JSON.

JSON.stringify(value)

El método devuelve el argumento valor (objeto JavaScript) formateado como una cadena. El valor devuelto tiene el formato de una cadena JSON legible; sin embargo, mostrarlo para mantener la legibilidad puede ser un desafío.

la etiqueta <pre> en HTML

Los desarrolladores front-end usan la etiqueta <pre> para conservar el formato del texto. Las letras del texto tienen el mismo ancho.

También conserva espacios y saltos de línea en el texto original envuelto con esta etiqueta.

Si usa JSON.stringify() para convertir datos en una cadena JSON, debe envolver el valor devuelto con etiquetas <pre>.

Mostrar JSON en React

Aquí se explica cómo tomar un objeto de JavaScript y convertirlo en una cadena JSON y conservar un formato ordenado:

export default function App() {
  const data = { name: "Irakli", age: 24, height: 185 };
  return (
    <div className="App">
      <p>{JSON.stringify(data)}</p>
      <pre>{JSON.stringify(data)}</pre>
    </div>
  );
}

Abra la demostración en vivo de CodeSandbox para ver el código en vigor.

La demostración en vivo contiene la cadena JSON con y sin la etiqueta <pre>. Puede ayudarlo a comprender visualmente la diferencia entre texto con formato y sin formato.