A continuación voy a dejar un componente en JavaScript para obtener el precio de un tipo de combustible de cualquier gasolinera Española.
El HTML necesario no es complejo. Debemos declarar el componente spanish-gas-price junto a dos atributos:
data-ideess: la referencia de la gasolinera (podéis verlas todas aquí o en la página web de carburantes del gobierno).data-type: el tipo de carburante (podéis ver la lista en el comentario HTML).
<!--
Tipos de carburantes disponibles:
"Precio Biodiesel"
"Precio Bioetanol"
"Precio Gas Natural Comprimido"
"Precio Gas Natural Licuado"
"Precio Gases licuados del petróleo"
"Precio Gasoleo A"
"Precio Gasoleo B"
"Precio Gasoleo Premium"
"Precio Gasolina 95 E10"
"Precio Gasolina 95 E5"
"Precio Gasolina 95 E5 Premium"
"Precio Gasolina 98 E10"
"Precio Gasolina 98 E5"
"Precio Hidrogeno"
-->
<spanish-gas-price data-ideess="4375" data-type="Precio Gasolina 95 E5"></spanish-gas-price>
<spanish-gas-price data-ideess="13933" data-type="Precio Gasoleo A"></spanish-gas-price>
El código JavaScript con la lógica sería el siguiente.
class SpanishGasPriceComponent extends HTMLElement {
urlAPI =
"https://sedeaplicaciones.minetur.gob.es/ServiciosRESTCarburantes/PreciosCarburantes/EstacionesTerrestres/";
textLoading = "Obteniendo";
textMeasure = "€/l";
textWithoutPrice = "Sin precio";
constructor() {
super();
this.getData();
}
getData() {
// Loading
this.innerHTML = this.textLoading;
// Get data
fetch(this.urlAPI)
.then((response) => {
return response.json();
})
.then((json) => {
// Filter data
const myStation = json["ListaEESSPrecio"].filter(
(station) => station["IDEESS"] === this.dataset.ideess
);
// Print
this.render(myStation);
});
}
render(station) {
const myType = this.dataset.type;
this.innerHTML =
station.length > 0
? station[0][myType] + this.textMeasure
: this.textWithoutPrice;
}
}
customElements.define("spanish-gas-price", SpanishGasPriceComponent);
El resultado final sustituiría cada componente spanish-gas-price por el precio rescatado y filtrado del API.
1,739€/l
1,897€/l
Y eso es todo. Espero que os sea de ayuda.
{{ comments.length }} comentarios