Frontend HTML con botones
Primero, crearemos los botones necesarios y los espacios para mostrar los resultados:
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Gesti贸n de Datos en Formatos</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header>
<nav>
<ul class="menu">
<li><a href="index.html">Inicio</a></li>
<li><a href="admin.html">Administrador</a></li>
<li><a href="user.html">Usuario</a></li>
<li><a href="investigacion.html">Investigaci贸n</a></li>
</ul>
</nav>
</header>
<main>
<h1>Gesti贸n de Datos en Diferentes Formatos</h1>
<button onclick="convertToXML()">Convertir a XML</button>
<button onclick="convertToCSV()">Convertir a CSV</button>
<button onclick="convertToYAML()">Convertir a YAML</button>
<button onclick="convertToHTML()">Convertir a HTML</button>
<button onclick="convertToPlainText()">Convertir a Texto Plano</button>
<button onclick="convertToCode()">Convertir a C贸digo</button>
<h2>Resultado</h2>
<pre id="output"></pre>
</main>
<script src="scripts.js"></script>
</body>
</html>
JavaScript para las conversiones
Crearemos funciones para cada formato. Aqu铆 est谩n las funciones que interact煤an con el backend, obtienen los datos y los convierten.
// URL del backend
const API_URL = "http://localhost:3000/get-data/datos.json";
// Funci贸n para obtener datos desde el backend
async function fetchData() {
try {
const response = await fetch(API_URL);
return await response.json();
} catch (error) {
console.error("Error al obtener datos:", error);
return null;
}
}
// Convertir datos a XML
function convertToXML() {
fetchData().then(data => {
if (!data) return;
let xml = '<?xml version="1.0" encoding="UTF-8"?>\n<registroUsuarios>\n';
data.forEach(item => {
xml += " <usuario>\n";
for (let key in item) {
xml += ` <${key}>${item[key]}</${key}>\n`;
}
xml += " </usuario>\n";
});
xml += "</registroUsuarios>";
document.getElementById("output").textContent = xml;
});
}
// Convertir datos a CSV
function convertToCSV() {
fetchData().then(data => {
if (!data) return;
const keys = Object.keys(data[0]);
const csv = [keys.join(",")].concat(
data.map(item => keys.map(key => item[key]).join(","))
).join("\n");
document.getElementById("output").textContent = csv;
});
}
// Convertir datos a YAML
function convertToYAML() {
fetchData().then(data => {
if (!data) return;
let yaml = "";
data.forEach(item => {
for (let key in item) {
yaml += `${key}: ${item[key]}\n`;
}
yaml += "---\n";
});
document.getElementById("output").textContent = yaml;
});
}
// Convertir datos a HTML
function convertToHTML() {
fetchData().then(data => {
if (!data) return;
let html = "<table border='1'>\n<tr>";
const keys = Object.keys(data[0]);
keys.forEach(key => html += `<th>${key}</th>`);
html += "</tr>\n";
data.forEach(item => {
html += "<tr>";
keys.forEach(key => html += `<td>${item[key]}</td>`);
html += "</tr>\n";
});
html += "</table>";
document.getElementById("output").innerHTML = html;
});
}
// Convertir datos a texto plano
function convertToPlainText() {
fetchData().then(data => {
if (!data) return;
let plainText = "";
data.forEach(item => {
for (let key in item) {
plainText += `${key}: ${item[key]}\n`;
}
plainText += "\n";
});
document.getElementById("output").textContent = plainText;
});
}
// Convertir datos a formato "c贸digo" estructurado
function convertToCode() {
fetchData().then(data => {
if (!data) return;
const code = JSON.stringify(data, null, 2);
document.getElementById("output").textContent = code;
});
}
Explicaci贸n del c贸digo
- Estructura:
- Cada bot贸n llama a una funci贸n que solicita datos al backend y los convierte al formato deseado.
- Recuperaci贸n de datos:
- La funci贸n
fetchDatahace una solicitud HTTP al backend para obtener los datos en formato JSON.
- La funci贸n
- Conversi贸n:
- Las funciones procesan los datos y los convierten a diferentes formatos (XML, CSV, YAML, HTML, texto plano, c贸digo estructurado).
- Visualizaci贸n:
- Los resultados se muestran en un
<pre>en el frontend para facilitar la lectura.
- Los resultados se muestran en un
Backend (opcional para compatibilidad)
Si quieres garantizar la exportaci贸n en m煤ltiples formatos directamente desde el backend, podr铆as implementar endpoints espec铆ficos en Node.js que env铆en los datos ya convertidos.
Tags
Backend