En este artículo, abriremos el archivo JSON usando JavaScript . JSON significa Notación de objetos de JavaScript. Es básicamente un formato para estructurar datos. El formato JSON es un formato basado en texto para representar los datos en forma de un objeto JavaScript.
Acercarse:
- Cree un archivo JSON, agregue datos en ese archivo JSON.
- Usando JavaScript, obtenga el archivo JSON creado usando el método fetch() .
- Muestra los datos en la consola o en la ventana.
Para crear un archivo JSON:
- Abra el editor de texto, por ejemplo, Visual Studio Code, etc.
- Cree un nuevo archivo y agréguele los datos.
- Guarde este archivo con la extensión «.json».
Nota: estamos usando un archivo HTML para usar JavaScript bajo la etiqueta de secuencia de comandos .
Ejemplo 1: Para mostrar los datos en la consola. Primero cree un archivo JSON con la extensión «.json», aquí lo hemos llamado load.json con el siguiente código.
{
"users":[
{
"site":"GeeksForGeeks",
"user": "Anurag Singh"
}
]
}
Ahora, creando un archivo HTML para usar código JavaScript:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>GeeksForGeeks</h1>
<button onclick="Func()">Show Details</button>
<script>
function Func() {
fetch("./load.json")
.then((res) => {
return res.json();
})
.then((data) => console.log(data));
}
</script>
</body>
</html>
Salida: en el fragmento de código anterior, hemos creado un botón «Mostrar detalles», cuando hacemos clic en este botón, se ejecuta la función «Func». Esta función Func básicamente obtiene los detalles del archivo «load.json».
El método fetch() devuelve una promesa, una promesa es en realidad un objeto que representa un resultado futuro. El método then() se usa para esperar la respuesta del lado del servidor y registrarla en la consola.
Ventana
Consola
Ejemplo 2: Para mostrar los datos en la ventana. Estamos usando el mismo archivo JSON que se usa en el Ejemplo 1.
HTML
<!DOCTYPE html>
<html>
<body>
<h1>GeeksForGeeks</h1>
<button onclick="Func()">Show Details</button>
<p id="details"></p>
<script>
function Func() {
fetch("./load.json")
.then((res) => {
return res.json();
})
.then((data) => document.getElementById("details").innerHTML =
(data.users[0].site + " - " + data.users[0].user));
}
</script>
</body>
</html>
Salida: En el código anterior, hemos utilizado el mismo enfoque que hemos utilizado en el Ejemplo 1, aquí hemos obtenido los datos del archivo «load.json». Hemos seleccionado la identificación «detalles» y luego mostramos los datos obtenidos en la ventana usando la propiedad innerHTML.
Publicación traducida automáticamente
Artículo escrito por anuragsingh1022 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA