Skip to content

Instantly share code, notes, and snippets.

@Dalboz

Dalboz/ipc.html

Last active March 1, 2024 18:34
Show Gist options
  • Save Dalboz/08f422827554d833eaac87f5086eb7d9 to your computer and use it in GitHub Desktop.
Save Dalboz/08f422827554d833eaac87f5086eb7d9 to your computer and use it in GitHub Desktop.
Download ZIP
One-liner para obtener índices de precios del transporte
Raw
ipc.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table from API with Bootstrap</title>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body class="bg-light">
<div class="container mt-5">
<div class="row mb-3">
<div class="col-md-4">
<label for="startDate">From Date:</label>
<input type="date" id="startDate" class="form-control" value="2022-01-01">
</div>
<div class="col-md-4">
<label for="endDate">To Date:</label>
<input type="date" id="endDate" class="form-control" value="2024-12-31">
</div>
<div class="col-md-4">
<label for="datosSerie">DATOS_SERIE Value:</label>
<input type="text" id="datosSerie" class="form-control" value="IPC251889">
</div>
</div>
<div class="mb-3">
<button onclick="filterData()" class="btn btn-primary">Apply Filter</button>
<button onclick="updateDatosSerie()" class="btn btn-secondary">Update DATOS_SERIE</button>
</div>
<table class="table table-bordered table-hover" id="data-table">
<thead class="thead-dark">
<tr>
<th>Date</th>
<th>Value</th>
<th>COD</th>
<th>Nombre</th>
</tr>
</thead>
<tbody>
<!-- Table content will be inserted here -->
</tbody>
</table>
</div>
<script>
var originalData; // To store the original data
$(document).ready(function() {
fetchData(); // Fetch data initially
});
function fetchData() {
var datosSerie = $("#datosSerie").val();
// Make the API request using jQuery AJAX
$.ajax({
url: "https://servicios.ine.es/wstempus/js/ES/DATOS_SERIE/" + datosSerie,
type: "GET",
data: {
nult: 25,
tip: "AM"
},
headers: {
"Accept": "application/json"
},
success: function(data) {
console.log("API Response:", data);
try {
if (data && data.Data && Array.isArray(data.Data)) {
originalData = {
COD: data.COD,
Nombre: data.Nombre,
Data: data.Data
}; // Store the original data
displayData(originalData);
} else {
throw new Error("Invalid or unexpected API response format.");
}
} catch (error) {
console.error("Error parsing API response:", error.message);
}
},
error: function(error) {
console.error("Error fetching data:", error);
}
});
}
function filterData() {
var startDate = new Date($("#startDate").val()).getTime();
var endDate = new Date($("#endDate").val()).getTime();
// Filter data based on selected date range
var filteredData = originalData.Data.filter(function(item) {
var date = new Date(item.Fecha).getTime();
return date >= startDate && date <= endDate;
});
displayData({
COD: originalData.COD,
Nombre: originalData.Nombre,
Data: filteredData
});
}
function updateDatosSerie() {
fetchData(); // Trigger API query with updated DATOS_SERIE
}
function displayData(data) {
console.log("Displaying data:", data);
var tableBody = $("#data-table tbody");
tableBody.empty(); // Clear existing rows
$.each(data.Data, function(index, item) {
console.log("Processing item:", item);
// Assuming 'Fecha', 'Valor', 'COD', and 'Nombre' are the correct property names
var date = new Date(item.Fecha);
var formattedDate = date.toLocaleDateString();
tableBody.append("<tr><td>" + formattedDate + "</td><td>" + item.Valor + "</td><td>" + data.COD + "</td><td>" + data.Nombre + "</td></tr>");
});
}
</script>
</body>
</html>
Raw
ipc.sh
curl -i -H "Accept: application/json" -X GET "https://servicios.ine.es/wstempus/js/ES/DATOS_SERIE/IPC251889?nult=25&?tip=AM"
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment