JavaScript obtener precio de gasolinera Española | Programador Web Valencia

JavaScript obtener precio de gasolinera Española

1 minuto

JavaScript

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.

Esta obra está bajo una Licencia Creative Commons Atribución-NoComercial-SinDerivadas 4.0 Internacional.

Atribución/Reconocimiento-NoComercial-SinDerivados 4.0 Internacional

¿Me invitas a un café? ☕

Puedes hacerlo usando el terminal.

ssh customer@andros.dev -p 5555

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

Nueva replica  {{ formatEllipsisAuthor(replyComment.author) }}

Acepto la política de Protección de Datos.

Escribe el primer comentario

Tal vez también te interese...