{"id":7756,"date":"2022-05-25T21:27:30","date_gmt":"2022-05-25T21:27:30","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=7756"},"modified":"2022-05-26T04:22:26","modified_gmt":"2022-05-26T04:22:26","slug":"como-mover-una-barra-de-progreso-con-javascript","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/como-mover-una-barra-de-progreso-con-javascript\/","title":{"rendered":"Como mover una barra de progreso con JavaScript"},"content":{"rendered":"

Las barras de progreso son un recurso que utilizo much\u00edsimo para hacerle saber al usuario que debe esperar a que un proceso se ejecute por completo antes de seguir interactuando con la p\u00e1gina.<\/p>\n

Un ejemplo claro ser\u00eda el proceso de una subida de archivos o una caga de informaci\u00f3n.<\/p>\n

Este tutorial es una continuaci\u00f3n de Barras de progreso con CSS<\/a> donde pod\u00e9is encontrar la estructura HTML<\/strong> de las barras de progreso y su maqueaci\u00f3n a trav\u00e9s de las hojas de estilos en cascada.<\/p>\n

Una vez tengas completa la visualizaci\u00f3n de la barra de progreso en tu sitio ya puedes volver aqu\u00ed donde te voy a ense\u00f1ar un truco para mover la barra de progreso despu\u00e9s de pulsar un bot\u00f3n.<\/p>\n

Es m\u00e1s f\u00e1cil de lo que parece. F\u00edjate a continuaci\u00f3n.<\/p>\n

El bot\u00f3n de ejecuci\u00f3n de la barra de progreso<\/h2>\n

Cerca de la barra de progreso que ya tienes, puedes ubicar un bot\u00f3n como este:<\/p>\n

<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<<\/span>button id=<\/span>"executeButton"<\/span> class<\/span>=<\/span>"btn btn-primary"<\/span> onclick=<\/span>"moveProgressBar()"<\/span>><<\/span>i class<\/span>=<\/span>"fa-solid fa-bars-progress"<\/span>><\/<\/span>i><\/span> Ejecutar acci\u00f3n<\/<\/span>button><\/span><\/pre><\/div><\/div>\n
Debe fijarte en el identificador del bot\u00f3n y en el atributo onclick donde estamos llamando a una funci\u00f3n llamada moveProgressBar().<\/p>\n
La funci\u00f3n JavaScript que permite el movimiento de la barra de progreso<\/h2>\n
En el archivo JavaScript<\/strong> de tu proyecto puedes crear una funci\u00f3n de la siguiente manera:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
function<\/span> moveProgressBar(<\/span>)<\/span> {<\/span>\n    const<\/span> executeButton =<\/span> document.getElementById<\/span>(<\/span>'executeButton'<\/span>)<\/span>;<\/span>\n    executeButton.disabled<\/span> =<\/span> true<\/span>;<\/span>\n    const<\/span> progressBar =<\/span> document.getElementById<\/span>(<\/span>'myBar'<\/span>)<\/span>;<\/span>\n    const<\/span> progresBarText =<\/span> progressBar.querySelector<\/span>(<\/span>'.progress-bar-text'<\/span>)<\/span>;<\/span>\n    let percent =<\/span> 0<\/span>;<\/span>\n    progressBar.style<\/span>.width<\/span> =<\/span> percent +<\/span> '%'<\/span>;<\/span>\n    progresBarText.textContent<\/span> =<\/span> percent +<\/span> '%'<\/span>;<\/span>\n \n    let progress =<\/span> setInterval(<\/span>function<\/span>(<\/span>)<\/span> {<\/span>\n        if<\/span> (<\/span>percent >=<\/span> 100)<\/span> {<\/span>\n            clearInterval(<\/span>progress)<\/span>;<\/span>\n            executeButton.disabled<\/span> =<\/span> false<\/span>;<\/span>\n            alert<\/span>(<\/span>'fin'<\/span>)<\/span>;<\/span>\n        }<\/span> else<\/span> {<\/span>\n            percent =<\/span> percent +<\/span> 1<\/span>;<\/span> \n            progressBar.style<\/span>.width<\/span> =<\/span> percent +<\/span> '%'<\/span>;<\/span>\n            progresBarText.textContent<\/span> =<\/span> percent +<\/span> '%'<\/span>;<\/span>\n        }<\/span>\n    }<\/span>,<\/span> 1000)<\/span>;<\/span>  \n}<\/span><\/pre><\/div><\/div>\n
Cada vez que se pulsa este bot\u00f3n con identificador \u00abexecuteButton\u00bb, desactivo el\u00a0 mismo para evitar que vuelva a ser pulsado mientras la barra de progreso est\u00e1 en marcha.<\/p>\n
Identifico los elementos de la barra de progreso que me interesan.<\/p>\n
Defino una variable \u00abpercent\u00bb iniciando en 0.<\/p>\n
Establezco el porcentaje o valor de \u00abpercent\u00bb como ancho en modo porcentaje (%) de la barra de progreso.<\/p>\n
Y el mismo porcentaje se lo agrego al texto de la barra de progreso.<\/p>\n
Luego, defino una variable \u00abprogress\u00bb que contiene una llamada que se ejecuta cada 1 segundo con setInterval().<\/p>\n
Dentro de esta funci\u00f3n, compruebo que el valor de la variable \u00abpercent\u00bb no haya pasado de 100 para incrementar su valor en 1, ampliar el ancho de la barra de progreso en un 1% y mostrar el valor del progreso en el texto de la barra de progreso.<\/p>\n
Cuando la variable \u00abpercent\u00bb llega a 100 ser\u00e1 el fin del progreso. Por eso, limpio la ejecuci\u00f3n del intervalo, habilito de nuevo el bot\u00f3n y muestro una alerta de confirmaci\u00f3n.<\/p>\n
Estructura HTML de la barra de progreso<\/h2>\n
Por si no te ha quedado claro el aspecto visual que puede tener tu barra de progreso, la estructura HTML<\/strong> podr\u00eda ser algo como lo que sigue:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<div<\/span><\/a> class<\/span>=<\/span>"progress"<\/span>><\/span>\n    <div<\/span><\/a> id<\/span>=<\/span>"myBar"<\/span> class<\/span>=<\/span>"progress-bar"<\/span> style<\/span>=<\/span>"width:0%;"<\/span>><\/span>\n        <span<\/span><\/a> class<\/span>=<\/span>"progress-bar-text"<\/span>><\/span>0%<\/<\/span>span<\/span><\/a>><\/span>\n    <\/<\/span>div<\/span><\/a>><\/span>\n<\/<\/span>div<\/span><\/a>><\/span><\/pre><\/div><\/div>\n
Maquetaci\u00f3n de la barra de progreso<\/h2>\n
Luego, puedes aplicarle los siguientes estilos:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
.progress<\/span> {<\/span>\n    height<\/span>:<\/span> 35px<\/span>;<\/span>\n    width<\/span>:<\/span> 100<\/span>%<\/span>;<\/span>\n    border<\/span>:<\/span> 1px<\/span> solid<\/span> #428bca<\/span>;<\/span>\n    border-radius:<\/span> 5px<\/span>;<\/span>\n    background-color<\/span>:<\/span> #e6f3fa<\/span>;<\/span>\n    margin-bottom<\/span>:<\/span> 15px<\/span>;<\/span>\n}<\/span>\n \n.progress-bar<\/span> {<\/span>\n    height<\/span>:<\/span> 100<\/span>%<\/span>;<\/span>\n    background<\/span>:<\/span> #428bca<\/span>;<\/span>\n    display<\/span>:<\/span> flex;<\/span>\n    align-items:<\/span> center<\/span>;<\/span>\n    transition:<\/span> width<\/span> 0.25s;<\/span>\n    border-radius:<\/span> 5px<\/span>;<\/span>\n}<\/span>\n \n.progress-bar-text<\/span> {<\/span>\n    margin-left<\/span>:<\/span> 10px<\/span>;<\/span>\n    font-weight<\/span>:<\/span> bold<\/span>;<\/span>\n    color<\/span>:<\/span> #cce7f5<\/span>;<\/span>\n}<\/span>\n \nbutton[<\/span>disabled=<\/span>"disabled"<\/span>]<\/span> {<\/span>\n    opacity:<\/span> 0.7<\/span>;<\/span>\n}<\/span><\/pre><\/div><\/div>\n
Resultado<\/h2>\n
\"Barra<\/p>\n
Conclusiones<\/h2>\n
Esta funci\u00f3n consigue muy bien su objetivo que, no es m\u00e1s que mover la barra de progreso en un 1% cada segundo.<\/p>\n
Esto significa que cada movimiento se realiza cada segundo y siempre que se ejecuta lo hace de la misma manera y tarda el mismo tiempo en ejecutarse.<\/p>\n
En realidad, el tiempo de ejecuci\u00f3n de las barras de progreso suele ser variable y asociado al tiempo real que tarde realmente una tarea o proceso.<\/p>\n
Por eso, en pr\u00f3ximos tutoriales relacionados ilustrar\u00e9 un ejemplo siempre y cuando me lo pid\u00e1is con concurrencia en los comentarios.<\/p>\n
<\/i> Ver demo<\/a> <\/i> Descargar<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Las barras de progreso son un recurso que utilizo much\u00edsimo para hacerle saber al usuario que debe esperar a que un proceso se ejecute por completo antes de seguir interactuando con la p\u00e1gina. Un ejemplo claro ser\u00eda el proceso de una subida de archivos o una caga de informaci\u00f3n. Este tutorial es una continuaci\u00f3n de […]<\/p>\n","protected":false},"author":1,"featured_media":7761,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14],"tags":[162],"class_list":["post-7756","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-progress-bar"],"yoast_head":"\nComo mover una barra de progreso con JavaScript - Jose Aguilar Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Como mover una barra de progreso con JavaScript - Jose Aguilar Blog\" \/>\n<meta property=\"og:description\" content=\"Las barras de progreso son un recurso que utilizo much\u00edsimo para hacerle saber al usuario que debe esperar a que un proceso se ejecute por completo antes de seguir interactuando con la p\u00e1gina. Un ejemplo claro ser\u00eda el proceso de una subida de archivos o una caga de informaci\u00f3n. Este tutorial es una continuaci\u00f3n de […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jose-aguilar.com\/blog\/como-mover-una-barra-de-progreso-con-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"Jose Aguilar Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/joseaguilarblog\" \/>\n<meta property=\"article:published_time\" content=\"2022-05-25T21:27:30+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-05-26T04:22:26+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2022\/05\/Como-mover-una-barra-de-progreso-con-JavaScript.png\" \/>\n\t<meta property=\"og:image:width\" content=\"500\" \/>\n\t<meta property=\"og:image:height\" content=\"500\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Jose Aguilar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:site\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jose Aguilar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/como-mover-una-barra-de-progreso-con-javascript\/\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/como-mover-una-barra-de-progreso-con-javascript\/\",\"name\":\"Como mover una barra de progreso con JavaScript - Jose Aguilar Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/como-mover-una-barra-de-progreso-con-javascript\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/como-mover-una-barra-de-progreso-con-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2022\/05\/Como-mover-una-barra-de-progreso-con-JavaScript.png\",\"datePublished\":\"2022-05-25T21:27:30+00:00\",\"dateModified\":\"2022-05-26T04:22:26+00:00\",\"author\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/como-mover-una-barra-de-progreso-con-javascript\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jose-aguilar.com\/blog\/como-mover-una-barra-de-progreso-con-javascript\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/como-mover-una-barra-de-progreso-con-javascript\/#primaryimage\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2022\/05\/Como-mover-una-barra-de-progreso-con-JavaScript.png\",\"contentUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2022\/05\/Como-mover-una-barra-de-progreso-con-JavaScript.png\",\"width\":500,\"height\":500,\"caption\":\"Como mover una barra de progreso con JavaScript\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/como-mover-una-barra-de-progreso-con-javascript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.jose-aguilar.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Como mover una barra de progreso con JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/\",\"name\":\"Jose Aguilar Blog\",\"description\":\"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\",\"name\":\"Jose Aguilar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"caption\":\"Jose Aguilar\"},\"description\":\"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.\",\"sameAs\":[\"https:\/\/plus.google.com\/114357189801512615537\"],\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Como mover una barra de progreso con JavaScript - Jose Aguilar Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"es_ES","og_type":"article","og_title":"Como mover una barra de progreso con JavaScript - Jose Aguilar Blog","og_description":"Las barras de progreso son un recurso que utilizo much\u00edsimo para hacerle saber al usuario que debe esperar a que un proceso se ejecute por completo antes de seguir interactuando con la p\u00e1gina. Un ejemplo claro ser\u00eda el proceso de una subida de archivos o una caga de informaci\u00f3n. Este tutorial es una continuaci\u00f3n de […]","og_url":"https:\/\/www.jose-aguilar.com\/blog\/como-mover-una-barra-de-progreso-con-javascript\/","og_site_name":"Jose Aguilar Blog","article_publisher":"https:\/\/www.facebook.com\/joseaguilarblog","article_published_time":"2022-05-25T21:27:30+00:00","article_modified_time":"2022-05-26T04:22:26+00:00","og_image":[{"width":500,"height":500,"url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2022\/05\/Como-mover-una-barra-de-progreso-con-JavaScript.png","type":"image\/png"}],"author":"Jose Aguilar","twitter_card":"summary_large_image","twitter_creator":"@JoseAguilarBlog","twitter_site":"@JoseAguilarBlog","twitter_misc":{"Escrito por":"Jose Aguilar","Tiempo de lectura":"4 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jose-aguilar.com\/blog\/como-mover-una-barra-de-progreso-con-javascript\/","url":"https:\/\/www.jose-aguilar.com\/blog\/como-mover-una-barra-de-progreso-con-javascript\/","name":"Como mover una barra de progreso con JavaScript - Jose Aguilar Blog","isPartOf":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/como-mover-una-barra-de-progreso-con-javascript\/#primaryimage"},"image":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/como-mover-una-barra-de-progreso-con-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2022\/05\/Como-mover-una-barra-de-progreso-con-JavaScript.png","datePublished":"2022-05-25T21:27:30+00:00","dateModified":"2022-05-26T04:22:26+00:00","author":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11"},"breadcrumb":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/como-mover-una-barra-de-progreso-con-javascript\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jose-aguilar.com\/blog\/como-mover-una-barra-de-progreso-con-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/como-mover-una-barra-de-progreso-con-javascript\/#primaryimage","url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2022\/05\/Como-mover-una-barra-de-progreso-con-JavaScript.png","contentUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2022\/05\/Como-mover-una-barra-de-progreso-con-JavaScript.png","width":500,"height":500,"caption":"Como mover una barra de progreso con JavaScript"},{"@type":"BreadcrumbList","@id":"https:\/\/www.jose-aguilar.com\/blog\/como-mover-una-barra-de-progreso-con-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.jose-aguilar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Como mover una barra de progreso con JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/www.jose-aguilar.com\/blog\/#website","url":"https:\/\/www.jose-aguilar.com\/blog\/","name":"Jose Aguilar Blog","description":"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11","name":"Jose Aguilar","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","caption":"Jose Aguilar"},"description":"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.","sameAs":["https:\/\/plus.google.com\/114357189801512615537"],"url":"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/"}]}},"_links":{"self":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/7756","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/comments?post=7756"}],"version-history":[{"count":0,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/7756\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media\/7761"}],"wp:attachment":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media?parent=7756"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/categories?post=7756"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/tags?post=7756"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}