{"id":1640,"date":"2024-08-02T10:51:01","date_gmt":"2024-08-02T08:51:01","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=1640"},"modified":"2024-08-02T10:51:03","modified_gmt":"2024-08-02T08:51:03","slug":"009-selects-anidados-con-fetch","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/lenguajes\/javascript\/javascript-practico\/17-ejercicios-con-ajax\/009-selects-anidados-con-fetch\/","title":{"rendered":"009. Selects Anidados con Fetch"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">En este ejercicio utilizaremos la <strong>API<\/strong> de <strong>Copomex<\/strong>, una base de datos que tiene todos los c\u00f3digos postales, los estados de la rep\u00fablica de Mexico, las colonias, municipios&#8230;.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/api.copomex.com\/documentacion\/inicio\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/api.copomex.com\/documentacion\/inicio<\/a><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Vamos a crear un archivo denominado <em>selects-anidados.html<\/em> en el cual vamos a trabajar toda nuestra sintaxis.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;!DOCTYPE html&gt;\n&lt;html lang=\"es\"&gt;\n&nbsp; &lt;head&gt;\n&nbsp; &nbsp; &lt;meta charset=\"UTF-8\" \/&gt;\n&nbsp; &nbsp; &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/&gt;\n&nbsp; &nbsp; &lt;title&gt;Selects Anidados&lt;\/title&gt;\n&nbsp; &lt;\/head&gt;\n\n&nbsp; &lt;body&gt;\n&nbsp; &nbsp; &lt;h1&gt;Selects Anidados&lt;\/h1&gt;\n&nbsp; &nbsp; &lt;h2&gt;M\u00e9xico&lt;\/h2&gt;\n\n&nbsp; &nbsp; &lt;label for=\"select-primary\"&gt;Estados&lt;\/label&gt;\n&nbsp; &nbsp; &lt;select name=\"primary\" id=\"select-primary\"&gt;\n&nbsp; &nbsp; &nbsp; &lt;option value=\"\"&gt;Elige un estado&lt;\/option&gt;\n&nbsp; &nbsp; &lt;\/select&gt;\n&nbsp; &nbsp; &lt;p&gt;&lt;\/p&gt;\n\n&nbsp; &nbsp; &lt;label for=\"select-secondary\"&gt;Municipios&lt;\/label&gt;\n&nbsp; &nbsp; &lt;select name=\"secondary\" id=\"select-secondary\"&gt;\n&nbsp; &nbsp; &nbsp; &lt;option value=\"\"&gt;Elige un municipio&lt;\/option&gt;\n&nbsp; &nbsp; &lt;\/select&gt;\n&nbsp; &nbsp; &lt;p&gt;&lt;\/p&gt;\n\n&nbsp; &nbsp; &lt;label for=\"select-third\"&gt;Colonias&lt;\/label&gt;\n&nbsp; &nbsp; &lt;select name=\"third\" id=\"select-third\"&gt;\n&nbsp; &nbsp; &nbsp; &lt;option value=\"\"&gt;Elige una colonia&lt;\/option&gt;\n&nbsp; &nbsp; &lt;\/select&gt;\n&nbsp; &nbsp; &lt;p&gt;&lt;\/p&gt;\n\n&nbsp; &nbsp; &lt;script&gt;\n&nbsp; &nbsp; &nbsp; const d = document,\n&nbsp; &nbsp; &nbsp; &nbsp; $selectPrimary = d.getElementById(\"select-primary\"),\n&nbsp; &nbsp; &nbsp; &nbsp; $selectSecondary = d.getElementById(\"select-secondary\"),\n&nbsp; &nbsp; &nbsp; &nbsp; $selectThird = d.getElementById(\"select-third\");\n\n&nbsp; &nbsp; &nbsp; function loadStates() {\n&nbsp; &nbsp; &nbsp; &nbsp; fetch(\"https:\/\/api.copomex.com\/query\/get_estados?token=pruebas\")\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .then((res) =&gt; (res.ok ? res.json() : Promise.reject(res)))\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .then((json) =&gt; {\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(json);\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let $options = `&lt;option value=\"\"&gt;Elige un estado&lt;\/option&gt;`;\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; json.response.estado.forEach((el) =&gt; {\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $options += `&lt;option value=\"${el}\"&gt;${el}&lt;\/option&gt;`;\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $selectPrimary.innerHTML = $options;\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .catch((err) =&gt; {\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(err);\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let message = err.status || \"Ocurri\u00f3 un error\";\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $selectPrimary.nextElementSibling.innerHTML = `Error ${err.status}: ${message}`;\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });\n&nbsp; &nbsp; &nbsp; }\n\n&nbsp; &nbsp; &nbsp; function loadTowns(state) {\n&nbsp; &nbsp; &nbsp; &nbsp; fetch(\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; `https:\/\/api.copomex.com\/query\/get_municipio_por_estado\/${state}?token=pruebas`\n&nbsp; &nbsp; &nbsp; &nbsp; )\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .then((res) =&gt; (res.ok ? res.json() : Promise.reject(res)))\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .then((json) =&gt; {\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(json);\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let $options = `&lt;option value=\"\"&gt;Elige un municipio&lt;\/option&gt;`;\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; json.response.municipios.forEach((el) =&gt; {\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $options += `&lt;option value=\"${el}\"&gt;${el}&lt;\/option&gt;`;\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $selectSecondary.innerHTML = $options;\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .catch((err) =&gt; {\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(err);\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let message = err.status || \"Ocurri\u00f3 un error\";\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $selectSecondary.nextElementSibling.innerHTML = `Error ${err.status}: ${message}`;\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });\n&nbsp; &nbsp; &nbsp; }\n\n&nbsp; &nbsp; &nbsp; function loadSuburbs(suburb) {\n&nbsp; &nbsp; &nbsp; &nbsp; fetch(\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; `https:\/\/api.copomex.com\/query\/get_colonia_por_municipio\/${suburb}?token=pruebas`\n&nbsp; &nbsp; &nbsp; &nbsp; )\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .then((res) =&gt; (res.ok ? res.json() : Promise.reject(res)))\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .then((json) =&gt; {\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(json);\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let $options = `&lt;option value=\"\"&gt;Elige una colonia&lt;\/option&gt;`;\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; json.response.colonia.forEach((el) =&gt; {\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $options += `&lt;option value=\"${el}\"&gt;${el}&lt;\/option&gt;`;\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $selectThird.innerHTML = $options;\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .catch((err) =&gt; {\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(err);\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let message = err.status || \"Ocurri\u00f3 un error\";\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $selectThird.nextElementSibling.innerHTML = `Error ${err.status}: ${message}`;\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });\n&nbsp; &nbsp; &nbsp; }\n\n&nbsp; &nbsp; &nbsp; d.addEventListener(\"DOMContentLoaded\", loadStates);\n\n&nbsp; &nbsp; &nbsp; $selectPrimary.addEventListener(\"change\", (e) =&gt;\n&nbsp; &nbsp; &nbsp; &nbsp; loadTowns(e.target.value)\n&nbsp; &nbsp; &nbsp; );\n\n&nbsp; &nbsp; &nbsp; $selectSecondary.addEventListener(\"change\", (e) =&gt; {\n&nbsp; &nbsp; &nbsp; &nbsp; loadSuburbs(e.target.value);\n&nbsp; &nbsp; &nbsp; });\n&nbsp; &nbsp; &lt;\/script&gt;\n&nbsp; &lt;\/body&gt;\n&lt;\/html&gt;<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>En este ejercicio utilizaremos la API de Copomex, una base de datos que tiene todos los c\u00f3digos postales, los estados de la&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":1609,"menu_order":8,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","footnotes":""},"class_list":["post-1640","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Sutil Web","author_link":"https:\/\/sutilweb.eu\/index.php\/author\/sutilweb\/"},"uagb_comment_info":0,"uagb_excerpt":"En este ejercicio utilizaremos la API de Copomex, una base de datos que tiene todos los c\u00f3digos postales, los estados de la...","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1640","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/comments?post=1640"}],"version-history":[{"count":2,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1640\/revisions"}],"predecessor-version":[{"id":1642,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1640\/revisions\/1642"}],"up":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1609"}],"wp:attachment":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/media?parent=1640"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}