Scribd
Cargar
24 vistas4 páginas

XML y JSON

Cargado por

andreszapatad14
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
24 vistas4 páginas

XML y JSON

Cargado por

andreszapatad14
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 4

Cómo leer un archivo XML y un archivo JSON utilizando JavaScript en Visual Studio Code, y cómo

mostrar los datos en una página web. Este ejemplo incluye archivos HTML, JavaScript, XML y JSON.

Paso 1: Crear el archivo `index.html`

Este archivo HTML cargará el JavaScript que lee y muestra los archivos XML y JSON.
-El archivo HTML tiene dos secciones (xml-output y json-output) donde se mostrarán los datos de XML
y JSON respectivamente.
-Se incluye el archivo app.js al final del body para que el código JavaScript sea ejecutado después de
que se cargue el HTML.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> <!-- Especifica la codificación de caracteres UTF-8 para manejar caracteres
especiales -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Hace que la página
sea responsiva para adaptarse a diferentes dispositivos -->
<title>Leer XML y JSON con JavaScript</title> <!-- El título que se mostrará en la pestaña del
navegador -->
</head>
<body>
<h1>Demostración: Leer archivos XML y JSON</h1> <!-- Encabezado principal de la página -->

<!-- Sección donde se mostrará el contenido del archivo XML -->


<h2>Datos de XML</h2>
<div id="xml-output">
Cargando datos XML... <!-- Texto temporal mientras se cargan los datos del XML -->
</div>

<!-- Sección donde se mostrará el contenido del archivo JSON -->


<h2>Datos de JSON</h2>
<div id="json-output">
Cargando datos JSON... <!-- Texto temporal mientras se cargan los datos del JSON -->
</div>

<!-- Aquí enlazamos el archivo app.js que contiene el código JavaScript -->
<script src="app.js"></script>
</body>
</html>

Paso 2: Crear el archivo XML `data.xml`

Este archivo XML será leído por JavaScript y sus datos serán mostrados en la página.
Este es un archivo XML básico que contiene una lista de personas con sus nombres, edades y
ciudades.

<?xml version="1.0" encoding="UTF-8"?> <!-- Define el tipo y la codificación del archivo XML -->
<personas> <!-- Raíz del documento XML -->
<persona> <!-- Primer objeto "persona" en el archivo XML -->
<nombre>Juan Pérez</nombre> <!-- Nombre de la persona -->
<edad>30</edad> <!-- Edad de la persona -->
<ciudad>Madrid</ciudad> <!-- Ciudad de la persona -->
</persona>
<persona> <!-- Segundo objeto "persona" -->
<nombre>María García</nombre> <!-- Nombre de la persona -->
<edad>25</edad> <!-- Edad de la persona -->
<ciudad>Barcelona</ciudad> <!-- Ciudad de la persona -->
</persona>
</personas>

Paso 3: Crear el archivo JSON `data.json`

Este archivo JSON también será leído por JavaScript.

contiene un objeto con una propiedad personas, que es una lista de objetos con las mismas
propiedades que el archivo XML (nombre, edad y ciudad).

{
"personas": [
{
"nombre": "Carlos Martínez", /* Nombre de la primera persona */
"edad": 40, /* Edad de la primera persona */
"ciudad": "Sevilla" /* Ciudad de la primera persona */
},
{
"nombre": "Ana López", /* Nombre de la segunda persona */
"edad": 35, /* Edad de la segunda persona */
"ciudad": "Valencia" /* Ciudad de la segunda persona */
}
]
}

Paso 4: Crear el archivo JavaScript `app.js`

Este archivo contendrá el código que leerá y procesará los archivos XML y JSON, y mostrará los datos
en la página.

// Función para leer el archivo XML


function loadXML() {
// Utilizamos fetch para cargar el archivo XML
fetch('data.xml')
.then(response => {
// Verificamos si la respuesta fue exitosa
if (!response.ok) {
throw new Error('Error al cargar el archivo XML');
}
// Convertimos la respuesta en texto ya que no es JSON
return response.text();
})
.then(str => {
// Convertimos el texto en un objeto XML DOM
const parser = new DOMParser();
const xmlDoc = parser.parseFromString(str, 'application/xml');
// Obtenemos todos los elementos 'persona' del archivo XML
const personas = xmlDoc.getElementsByTagName('persona');
let output = '';

// Iteramos sobre cada elemento 'persona'


for (let i = 0; i < personas.length; i++) {
const nombre = personas[i].getElementsByTagName('nombre')[0].textContent;
const edad = personas[i].getElementsByTagName('edad')[0].textContent;
const ciudad = personas[i].getElementsByTagName('ciudad')[0].textContent;

// Construimos la cadena de texto para mostrar en el HTML


output += `<p>Nombre: ${nombre}, Edad: ${edad}, Ciudad: ${ciudad}</p>`;
}

// Mostramos el resultado en el div con id 'xml-output'


document.getElementById('xml-output').innerHTML = output;
})
.catch(error => {
// Si ocurre un error, lo mostramos en el div
document.getElementById('xml-output').innerHTML = 'Error al cargar el archivo XML: ' +
error.message;
});
}

// Función para leer el archivo JSON


function loadJSON() {
// Utilizamos fetch para cargar el archivo JSON
fetch('data.json')
.then(response => {
// Verificamos si la respuesta fue exitosa
if (!response.ok) {
throw new Error('Error al cargar el archivo JSON');
}
// Convertimos la respuesta a formato JSON
return response.json();
})
.then(data => {
let output = '';

// Iteramos sobre cada objeto 'persona' en el archivo JSON


data.personas.forEach(persona => {
const { nombre, edad, ciudad } = persona;

// Construimos la cadena de texto para mostrar en el HTML


output += `<p>Nombre: ${nombre}, Edad: ${edad}, Ciudad: ${ciudad}</p>`;
});

// Mostramos el resultado en el div con id 'json-output'


document.getElementById('json-output').innerHTML = output;
})
.catch(error => {
// Si ocurre un error, lo mostramos en el div
document.getElementById('json-output').innerHTML = 'Error al cargar el archivo JSON: ' +
error.message;
});
}

// Cargar los archivos XML y JSON cuando se carga la página


window.onload = function() {
loadXML(); // Cargar el archivo XML
loadJSON(); // Cargar el archivo JSON
};

Explicación detallada del código:

1. Función `loadXML()`:
- Usa `fetch()` para cargar el archivo `data.xml`.
- La respuesta del `fetch()` se convierte en texto porque los archivos XML no son JSON.
- El texto se parsea usando `DOMParser()` para convertirlo en un documento DOM XML.
- Se obtiene cada elemento `persona` del archivo XML usando `getElementsByTagName()`.
- Se extraen los valores de `nombre`, `edad` y `ciudad` para cada persona.
- Se construye un HTML dinámico y se inserta en el div con el id `xml-output`.

2. Función `loadJSON()`:
- Usa `fetch()` para cargar el archivo `data.json`.
- La respuesta se convierte en JSON.
- Se itera sobre cada objeto `persona` y se extraen los valores de `nombre`, `edad` y `ciudad`.
- Se construye un HTML dinámico y se inserta en el div con el id `json-output`.

3. Función `window.onload`:
- Llama a las funciones `loadXML()` y `loadJSON()` cuando la página web se ha cargado, lo que
garantiza que se lean ambos archivos y se muestren los datos en la página.

Resumen de flujo:

- El archivo HTML contiene secciones (`divs`) donde se mostrará la información extraída de los
archivos XML y JSON.
- El archivo JavaScript utiliza `fetch()` para leer los archivos, y luego muestra los datos procesados en
la página.
- La lógica para procesar XML y JSON es similar, con la principal diferencia de cómo se maneja cada
formato de datos.

Ciclo de vida:

Cuando la página carga (window.onload), se ejecutan las funciones loadXML() y loadJSON() para cargar
y procesar los archivos XML y JSON respectivamente.

Este código te permite cargar y mostrar de forma dinámica los datos de archivos XML y JSON en una
página web.

También podría gustarte