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 ayudas?

No te sientas obligado a realizarme una donación, pero cada aportación me ayuda a mantener el sitio en activo para que continúe existiendo y me motiva a continuar creando nuevo contenido.

Comprame un café
Pulsa sobre la imagen
  • 1 café: Se mantiene el dominio durante 4 meses.
  • 2 cafés: Se liquida 1 mes del Servidor Web.
  • 3 cafés: Se paga 1 mes de Newsletter.

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...