Importar JSON
Contenido del curso
Importar JSON
Contenido del curso
Ricardo Andrés Nakanishi
Tomás André Peñaloza Avilés
Abel da Cunha
David Alejandro Cuastumal Bucheli
Andre Huaman Yovera
Diego Reyes
Cristian Torres
Kenneth Angulo L
Jefred Bedoya
Edgar Jean Marco Gamarra Rojas
Es muy buen consejo y recomiendo recordar los métodos nativos de JSON, son muy útiles tanto para trabajar y visualizar resultados de endpoints sin pasar de variable en variable, sobre todo en entrevistas de trabajo!
Esta clase no la entendí a la primera, pero aquí se los simplifico:
Se puede pasar a referencias de esta forma:
import { user } from './json/data.json' const { name, lastname } = user document.querySelector('#app').innerHTML = ` <p>Nombre ${name}</p> <p>Apellido ${lastname}</p> `
npm run build: Minifica el código de javaScript y muestra lo que se importo del JSON, también reemplaza los acentos por el carácter hexadecimal que le corresponde.
Lo que hace vite gracias a rollup es optimizar para que traiga solamente lo que es necesario. Optimiza tanto el peso como velocidad de carga de los sitios web y al momento de utilizar una librería o archivo JSON muy grande donde no se utilice todo nos ayuda para el performance de nuestras aplicaciones y páginas web
Podemos importarlo de esta manera:
import data from './data.json'; document.querySelector('#app').innerHTML = `<pre>${JSON.stringify(data)}</pre>`
O También podemos importar solamente algunos datos del JSON de esta manera:
import { user } from './data.json' document.querySelector('#app').innerHTML = `<pre>${JSON.stringify(user)}</pre>`
La etiqueta <pre> en HTML se utiliza para definir texto preformateado, lo que significa que el texto dentro de esta etiqueta se muestra exactamente como está escrito en el código fuente, incluyendo espacios en blanco, saltos de línea y cualquier otro formato de texto.
La etiqueta <pre> es útil cuando se desea mostrar bloques de texto que requieren una representación precisa, como código fuente, poesía, ASCII art, tablas o cualquier otro contenido que dependa de la disposición y espaciado exactos de los caracteres.
Aquí tienes un ejemplo de cómo se utiliza la etiqueta <pre> en HTML:
<pre> Esto es un bloque de texto preformateado. Aquí puedes escribir múltiples líneas de texto y mantener el formato tal y como aparece en el código fuente. </pre>
En el navegador, el contenido dentro de la etiqueta <pre> se mostrará con el mismo formato de texto y respetando los espacios en blanco y saltos de línea:
Esto es un bloque de texto preformateado. Aquí puedes escribir múltiples líneas de texto y mantener el formato tal y como aparece en el código fuente.
Es importante destacar que la etiqueta <pre> no solo afecta al formato del texto, sino también a la tipografía, como el uso de una fuente de ancho fijo. Por lo tanto, es ideal para mostrar texto que requiere una representación precisa y conservar el formato original.
Me parece loquísimo la manera en que vite nos ayuda en la optimización de lo que usemos desde archivos json, ya amo vite
gracias por la clase !!
¿Cuándo debería usar JSON en mi proyecto?
Es muy recomendable utilizar archivos JSON para manejar datos estáticos que no cambian con frecuencia, como catálogos de productos de prueba, traducciones para internacionalización o variables de configuración del entorno. Al separar estos datos de la lógica de tus componentes, mantienes un código mucho más limpio, organizado y fácil de mantener a medida que el proyecto escala.
La importación de JSON en Vite es nativa y directa, permitiendo tratar archivos de datos como módulos de JavaScript.
Puntos clave
import data from './archivo.json'.data.propiedad.{ "user":{ "name":"Pedro", "lastname":"Gamarra" }, "session":{ "id":"string session" }}