API de países, estados y ciudades para combos

API de países, estados y ciudades para combos

Muchas veces en nuestros proyectos necesitamos obtener una lista de ubicaciones de todo el mundo, hoy hablaremos sobre un API de países, estados y ciudades para estos combos o elementos de opción totalmente gratuita.

Seguramente más de alguna vez has necesitado llenar un combo con países.

Posiblemente encontraste una lista ya hecha en Internet y saliste del problema.

Sin embargo ahora necesitas que al seleccionar un país otro elemento te muestre los estados de ese país.

¡Ahora el problema es mucho mayor! ¿Y si después necesitamos las ciudades de un determinado estado? Uff


¿Sabías que?

¿Necesitas aprender algo nuevo ? Ve a Udemy, busca el tema del que quieres aprender, selecciona el curso para ti y continua con tu aprendizaje.

Udemy

De hecho ya antes habíamos hablado de un select dinámico de estados y municipios de México con PHP y jQuery, pero bastante manual.

La solución es un utilizar algún API para obtener una lista de países, estados y ciudades.

Para esto vamos a necesitar obtener acceso al API en universal-tutorial.com mediante un nombre y correo.

Una vez con nuestro token de acceso vamos a hablar sobre las url de esta API:

https://www.universal-tutorial.com/api/getaccesstoken

Es necesaria para autenticarnos, nos regresa un auth_token.

https://www.universal-tutorial.com/api/countries/

Nos regresa una lista de países.

https://www.universal-tutorial.com/api/states/[país]

Nos regresa una lista de estados.

https://www.universal-tutorial.com/api/cities/[ciudad]

Nos regresa una lista de ciudades.

Veamos cómo completar 3 combos, uno de países, uno de estados y otro de ciudades mediante ajax para un proyecto web.

A considerar que estos 3 combos se llaman item-details-countryValue, item-details-stateValue y item-details-cityValue.

Además de que revisamos si existe el valor thisClass.countryValue, thisClass.stateValue y thisClass.cityValue para establecer el valor si ya tuviéramos y lanzamos el evento change para hacer que ahora carguen los estados o ciudades.

$.ajax({
            url: 'https://www.universal-tutorial.com/api/getaccesstoken',
            method: 'GET',
            headers: {
                "Accept": "application/json",
                "api-token": "tu api token",
                "user-email": "tu@correo.com"
            },
            success: function (data) {
                if(data.auth_token){
                    var auth_token = data.auth_token;
                    $.ajax({
                        url: 'https://www.universal-tutorial.com/api/countries/',
                        method: 'GET',
                        headers: {
                            "Authorization": "Bearer " + auth_token,
                            "Accept": "application/json"
                        },
                        success: function (data) {
                            var countries = data;
                            var comboCountries = "<option value=''>Seleccionar</option>";
                            countries.forEach(element => {
                                comboCountries += '<option value="' + element['country_name'] + '">' + element['country_name']+'</option>';
                            });

                            $("#item-details-countryValue").html(comboCountries);

                            // State list

                            $("#item-details-countryValue").on("change", function(){
                                var country = this.value;
                                $.ajax({
                                    url: 'https://www.universal-tutorial.com/api/states/' + country,
                                    method: 'GET',
                                    headers: {
                                        "Authorization": "Bearer " + auth_token,
                                        "Accept": "application/json"
                                    },
                                    success: function (data) {
                                        var states = data;
                                        var comboStates = "<option value=''>Seleccionar</option>";
                                        states.forEach(element => {
                                            comboStates += '<option value="' + element['state_name'] + '">' + element['state_name'] + '</option>';
                                        });
                                        $("#item-details-stateValue").html(comboStates);

                                        // City list

                                        $("#item-details-stateValue").on("change", function () {
                                            var state = this.value;

                                            $.ajax({
                                                url: 'https://www.universal-tutorial.com/api/cities/' + state,
                                                method: 'GET',
                                                headers: {
                                                    "Authorization": "Bearer " + auth_token,
                                                    "Accept": "application/json"
                                                },
                                                success: function (data) {
                                                    var cities = data;
                                                    var comboCities = "<option value=''>Seleccionar</option>";
                                                    cities.forEach(element => {
                                                        comboCities += '<option value="' + element['city_name'] + '">' + element['city_name'] + '</option>';
                                                    });
                                                    $("#item-details-cityValue").html(comboCities);
                                                    if (thisClass.cityValue) { $("#item-details-cityValue").val(thisClass.cityValue).trigger("change"); }

                                                },
                                                error: function (e) {
                                                    console.log("Error al obtener countries: " + e);
                                                }
                                            });

                                        });

                                        if (thisClass.stateValue) { $("#item-details-stateValue").val(thisClass.stateValue).trigger("change"); }

                                    },
                                    error: function (e) {
                                        console.log("Error al obtener countries: " + e);
                                    }
                                });

                            });

                            if (thisClass.countryValue) { $("#item-details-countryValue").val(thisClass.countryValue).trigger("change"); }

                        },
                        error: function (e) {
                            console.log("Error al obtener countries: " + e);
                        }
                    });

                }
            },
            error: function (e) {
                console.log("Error al obtener countries: " + e);
            }
        });

 

Como puedes ver es bastante sencilla y solo nos conectamos a las url mencionadas anteriormente.

Si esta información sobre esta API para países, estados y ciudades para combos te ha sido de utilidad no olvides compartirla en tus redes sociales favoritas y dejarnos un comentario en la sección de abajo si tienes cualquier duda con respecto de este tema, será un placer ayudarte.

¡Hasta luego!

 

Clic para valorar esta información
[Total: 4 Promedio: 4]