llevo meses estudiando programacion, por lejos la persona que mas facilidad tiene para explicar cosas dificiles, este canal deberia tener minimo un millon de reproducciones, exijo una comunidad que apoye este tipo de informacion amena y simplificada sin dejar nada importante afuera, simplicidad y carisma al explicar, 10 de 10.
La verdad que coincido con todos los comentarios, este señor tiene en don de la enseñanza, excelente muchas gracias, es un placer aprender así. Dios te bendiga
Para los que no les sirve fetch pueden usar una extension de chrome llamada web server for chrome, crea un "servidor" que se alimenta de la carpeta que seleccionen , corren y el código del video funciona perfecto
disculpa baje esa app para chrome pero tampoco me resulta, que molestia que no funcione nada de ningun tutorial donde le haga fetch a un archivo de la misma carpeta... todo ok con el link de las api publicas... si alguno consigue una forma de arreglar estos estaria agradecido.
No tenía ni idea de Fetch y me parece que tu vídeo está muy bien hecho y anima a seguir aprendiendo. Es muy ágil y no te enredas en mil demostraciones de cuánto sabes, a diferencia de lo que hacen en otros vídeos que parecen más un show de autopromoción personal que un tutorial. El tuyo es claro y directo. Intenté encontrar la forma de enviarte un par de sugerencias (una sugerencia y un informe de error, mejor dicho). La primera es que no termino de saber cuándo "data" es variable y cuándo no. Me parece que no lo es siempre en tu código, sino que en algunos sitios forma parte de la sintaxis. Si no es así, entonces es que no lo entendí muy bien, pero quizá fuera mejor que usaras distintos nombres que dejen claro cuándo es sintaxis y cuándo no.. Por ejemplo: ".then(data =>data.text())" y ".then(data=>[console.log(data)})". Aparecen con distinto color en el código, y supongo que es porque en algunos casos es variable y en otros es palabra reservada o parte de la sintaxis... Como ves, para un principante como yo, sería mejor usar cosas como "contenido", "datos", que no puedan hacer pensar que son parte del lenguaje de programación, que suele ser de palabras inglesas. La otra apreciación que quería hacerte es que en el vídeo dices que tu programa crea usuarios aletorios, pero debes decir aleAtorios, con la "a". Quería decirte esto en un mensaje más privado, pero no supe. Seguramente no tendrá remedio, pero creí mejor avisarte . Enhorabuena por tu canal.
si wn debiera enseñar en una u! Lo amé, hasta compré sus cursos poh, solo por que me dí cuenta que el compadre explica bien y esa inversión valdría la pena!
Me gustan muchos tus videos, soy muy nuevo en esto, de echo... Estoy aprendiendo con vos, arranqué con HTML y Css desde 0, luego vi los FUNDAMENTOS y ahora estoy viendo JS desde 0, solo tengo una pequeña critica, que puedes tomarla o no, se me complica mucho tener una continuidad de JS porque hay otras enseñanzas dentro de este curso y eso hace que me esté mareando un poco bastante!!! Quizás sea esa la mejor manera y me de cuenta mientras valla avanzando con este curso, pero por el momento me está mareando mucho, por lo demás te admiro mucho!!!
Totalmente de acuerdo con "linuxexp", Aunque la explicación de este "videotutorial es muy completa" que bueno tener uno de "Axios" que definitivamente es mejor alternativa que "fetch". Saludos desde Colombia.
Saludos al crack chileno de la enseñanza Web. Revisando el método fetch y comparándolo con la librería axios, aún fetch tiene un camino por recorrer. Estuve leyendo un artículo en Medium que tiene excelente información sobre esa comparación.... medium.com/@thejasonfile/fetch-vs-axios-js-for-making-http-requests-2b261cdd3af5 Detalles de fetch que afloran: 1) Para obtener los datos en Json debe hacerse en 2 pasos como Ud lo hizo acá en su video, un 2do then para capturar la respuesta de la promesa retornada en el 1er then y asi obtener la data en Json 2) El manejo de errores en fetch da resultados inesperados. Como contraparte la libreria axios tiene su costo: Cargarla en tiempo de ejecución... Así que mi estimado profe, esperamos su vídeo: Consumiendo Apis con Axios
Llegaste de vacaciones con todas las ganas del mundo jeje, me alegra que subas tanto contenido, muchísimas gracias por todo tu esfuerzo, una cosita: Ehnm me preguntaba si podías hacer un vídeo acerca de validaciones para formularios utilizando jqBootstrapValidation o si quieres hacer una serie de vídeos donde nos enseñes a validar formularios, te lo agradecería muchiisisismo. un abrazo crack
@@lnard214 No sólo sirve para eso, intentando hacer los ejercicios que explica, cuando quieras linkear archivos como el txt, si no lo haces con live server te tirara error. Una de las condiciones que la consola pide es que la dirección contenga http o https para mostrar la acción. Como live server simula un servidor lo hará sin problemas, pero si abres directamente en el navegador no lo hará y saldrá el error que he dicho. O al menos eso es lo que me ha pasado al intentar y probarlo xD
Bluuweb ! primero que nada muchas gracias por tus aportes y por la humildad con la que compartes tus conocimientos, tengo una duda respecto a esto, a mi me funciona con cualquier tipo de comillas `` o " " o ' ' (`data` o "data " o 'data ' ) sabes por que??
Hola de una api en la web, quiero extaer el dato de que corresponde a la propiedad field1 (28.75 sería el dato) en el siguente json: {"channel":{"id":1550833,"name":"DIEGO2","description":"TEMPERATURA DE EQUIPO N2","latitude":"0.0","longitude":"0.0","field1":"Temp Entrada Aire 1","field2":"Temp Salida Aire 2","field3":"Temp Entrada Refr 3","field4":"Temp Evaporador 4","field5":"Temp Salida Evaporador 5","field6":"SALTO TERMICO AIRE","field7":"HUMEDAD RELATIVA","field8":"RECALENTAMIENTO","created_at":"2021-10-27T18:48:04Z","updated_at":"2021-11-19T16:06:33Z","last_entry_id":73905},"feeds":[{"created_at":"2022-09-19T18:34:04Z","entry_id":73905,"field1":"28.75"}]} por mas que lo intento, no consigo obtenerlo... ¿como lo podría obtener?
hola amigo maestro!!!! excelente todo el contenido de tu canal. pregunta1 se habrá actualizado el javascript? ya que use contenido.innerHTML=data y anduvo prefecto al leer el txt, pregunta2 para encriptar el código para que los visitantes no nos vean la programación en javascript se puede algo fácil? saludos y gracias
inclusive master, dejo este manual por aqui esta muy bueno...Leelo desarrolloweb.com/manuales/manual-de-ecmascript-6.html#capitulos196 , podras descargar el manual, me lo e leido todo y entendi la mayoria de tus videos como sin nada.
Hola que tal me encantas tus videos estoy aprendiendo bastante, una cosas tengo un problema con el navegador Chrome al presionar el boton no me toma porque no es http o https habra alguna forma de saltar esa condición y muestre el mensaje?
Buenas al intentar pintar el texto en archivo txt me aparece este error "Pedido de origen cruzado bloqueado: La política de mismo origen no permite leer el recurso remoto en file:///C:/Users/Miguel/Documents/Programacion/Java01/texto.txt. (Razón: pedido CORS no es http). TypeError: NetworkError when attempting to fetch resource." E intentado también copiando y pegando el código como lo dejaste en la descripción y me sigue saliendo el mismo error.
Hola yo también tuve ese problema, la solución es tener instalado la extension Liver Server (en tu Visual Studio Code). Una vez instalado, le das click derecho a tu archivo html y luego en Abrir con Live Server(Open with Live Server). Se abrira el archivo con un puerto(en mi caso es el 5500) y listo . (copie y pegue otro comentario que me salvo a mi jajaj)
Hola muchas gracias por tus videos, me han ayudado muchisimo explicas muy bien parce. Tengo una duda. Porque cuando ejecuto por primera vez el boton me llama el archivo de texto con "hola soy un archivo con fetch" pero cuando modifico el contenido del archivo, me sigue trayendo la información inicional. (Corro el documento html en apache, trate de apagar y reiniciar el servidor pero tampoco funciono). De nuevo muchas gracias.
Holaa esta muy bueno el tutorial , pero me hw quedado estancado esta parte: Hello, world!
Obtener
var contenido= document.querySelector('#contenido'); function traer(){ fetch('texto.txt').then(data => data.text()).then(data =>{ console.log(data) }) /*contenido.innerHTML =`fasaafadasda`*/ }
Linea 49:Obtener Linea 55: fetch('texto.txt').then(data => data.text()).then(data =>{ y en la consola del navegador dice el siguiente error: index.html:55 Fetch API cannot load file:///C:/Users/LI/Documents/GitHub/Proyectotienda/texto.txt. URL scheme must be "http" or "https" for CORS request. traer @ index.html:55 onclick @ index.html:49 index.html:55 Uncaught (in promise) TypeError: Failed to fetch at traer (index.html:55) at HTMLButtonElement.onclick (index.html:49) de antemano gracias!!! :/, creo que el error es por que me falta levantar el servidor, como hiciste eso?
Hola, descarga el plugin de web server for chrome. 1) Seleccionas la carpeta donde esta el archivo 2) Marcas las siguientes casillas: Run in background , also on internet, accesible on local network , 3) Picas en show advanced options y seleccionas : Set cors headers, listen on IPV6 , plan , allow file upload, verbose logging 4) Copias la segunda web url que te da el pluggin y la pegas en el fetch
No se si respondas a dia de hoy, pero hago igualmente y me sale este error: fetch API cannot load file:///C:/Users/Jugla/Documents/JS/texto.txt. URL scheme must be "http" or "https" for CORS request. traer @ codigo.js:3. onclick @ index.html:16 codigo.js:3 Uncaught (in promise) TypeError: Failed to fetch at traer (codigo.js:3) at HTMLButtonElement.onclick (index.html:16) descargue el archivo que creo el profesor pensando que depronto fue un fallo mio, revise era lo mismo y no sirvio con el del profe.
Estoy en el archivo index.html pero al darle clic derecho y abrir en live Server, me sale otra pagina (127.0.0.1:5500), en mi visual studio code tengo otros workspaces pero veo q tu solo tienes agregado puros archivos. Como le hago para que me abra en el live server el index.html.? por favor
por que me sale el error fecth API cannot load URL scheme muts be "http" or "https" for CORS request ? ejecuto desde chrome el index, hay que instalar algo o es necesario el servidor que tu tienes ? pueden ayudarme ..
no tienes el server activado. anda a visual studio code, ve a extensiones y descarga live server o mejor pon en youtube bluuweb visual studio code 2 y te explicara como ocuparlo
var contenido = document.querySelector('#contenido') function traer() { fetch('texto.txt') .then(data => data.txt()) .then(data=>{ console.log(data) }) } No veo el error
Hola. no se ejecuta esa función. Me arroja el siguiente error. Fetch API cannot load file:///C:/xampp/htdocs/api-usuarios/texto.txt. URL scheme must be "http" or "https" for CORS request. Busqué en todos los foros posibles, incluido Stack Overflow, y nada. ¿Qué está ocurriendo? Muchas gracias.
A mi me arrojaba el mismo error, creo que a muchos otros tambien. No lo he solucionado pero noté que cuando intento leer datos de una api externa me funciona perfecto. A lo mejor te faltó configurar algo del Live Server.
me tiraba el mismo error y cuando active las extenciones me funciono perfecto. Tengo instaladas Beautify, ESLint, HTML CSS Support, HTML Snippets, JavaScript (ES6) code snippets, Live Server, Sass y vscode-icons las mismas son recomendadas por Bluuweb, Saludos
Hola buenas, excelentes videos, tengo ciertas dudas, el "data" se llama así porque es una palabra reservada o le podemos dar cualquier otro nombre, ya que es confuso que: data => data.text(); lo veo un poco raro y por eso pregunto, luego otra duda es, que pasaria si pongo comillas simples ( ' ' ) en vez de las comillas especiales ( ´ ´ ), porque no entiendo el por qué en este caso hay que usar esas comillas especiales. Gracias de antemano.
con respecto a la pregunta 1; no es una palabra reservada, realmente esa linea es la que hace la promesa de respuesta; yo personalmente uso la palabra "response" para darle mas semántica. con respecto a la pregunta 2; las comillas; no son estás ( ´ ´ ), sino éstas ( ` ` ), y es la forma en que ES6 agrega algo que en otros lenguajes llaman "Interpolación" o "string interpolation"; javascript lo llama plantillas de cadena de texto o "string templates". ver: ( developer.mozilla.org/es/docs/Web/JavaScript/Referencia/template_strings ).
Buenas, si yo quiero utilizar como decís un archivo .js para todo lo que respecta a javascript y no tirarlo en el mismo código de html, como hago para utilizar el document.??? Porque no logro encontrar la forma de que el mismo haga referencia al archivo html donde debería buscar. Gracias.
oscar arbey herrera moreno en el teclado debe de haber una tecla que tenga esas comillas , si mal no recuerdo están por donde las teclas de las { } . Sólo que tienes que usar ALT + la tecla o ctrl + alt + la tecla. Espero que se entienda.
Muy buena explicación!!, solo me da un problema si alguien me puede ayudar, al realizar el ejercicio del video, en la consola me aparecen dos problemas 1º) Solicitud desde otro origen bloqueada: la política de mismo origen impide leer el recurso remoto en file:///Users/javierruiz/Desktop/proyecto_web/cursos_web/bluuweb/textos/texto.txt (razón: la solicitud CORS no es http). 2º) TypeError: NetworkError when attempting to fetch resource. llevo varios días intentando resolver y no puedo, tengo un mac, y no practico en local SOY MUY NOVATO EN ESTO DE LA PROGRAMACIÓN GRACIAS
Hola yo también tuve ese problema, la solución es tener instalado la extension Liver Server (en tu Visual Studio Code). Una vez instalado, le das click derecho a tu archivo html y luego en Abrir con Live Server(Open with Live Server). Se abrira el archivo con un puerto(en mi caso es el 5500) y listo .
@@AlavergaJoseDirectos te aparece el error en consola? Lo solucione abriendo la pagina desde un servidor para que me agregara el http, utilicé el live server en vs code
Joel Miguel Valente No, un objeto es literalmente un conjunto de atributos, características y propiedades de una entidad en javascript, y JSON es un conjunto de objetos que permite ordenarlos de una forma más simple y bella. Saludos.
Saludos, no sé si ya lograron resolver el problema, en alguna parte del video Ignacio menciona que debe estar corriendo Live Server, esta es una extensión de Visual Studio Code, se instala y luego pones a ejecutar el servidor, luego abres la página y debería funcionar.
@Kurt acuña perez tambien hizo un comentario al respecto. "no tienes el server activado. anda a visual studio code, ve a extensiones y descarga live server o mejor pon en youtube bluuweb visual studio code 2 y te explicara como ocuparlo"
![❤ JAVASCRIPT: Event Delegation [Tutorial en Español]](http://i.ytimg.com/vi/_kUuH-TIEDQ/mqdefault.jpg)
llevo meses estudiando programacion, por lejos la persona que mas facilidad tiene para explicar cosas dificiles, este canal deberia tener minimo un millon de reproducciones, exijo una comunidad que apoye este tipo de informacion amena y simplificada sin dejar nada importante afuera, simplicidad y carisma al explicar, 10 de 10.
Mae, que bárbaro, su capacidad de simplificar un tema un tanto complicado es espectacular, sos un dios de la pedagogía. Inmensamente agradecido.
La verdad que coincido con todos los comentarios, este señor tiene en don de la enseñanza, excelente muchas gracias, es un placer aprender así. Dios te bendiga
sigo instruyéndome para ocupar vue de tus videos, gracias por todo el material que das
Tenes una vocación de docencia increíble. Muchas gracias!
Un genio el profe, mas claro imposible!!!
Preciso, que manera de enseñar tan sencilla y práctica.
Para los que no les sirve fetch pueden usar una extension de chrome llamada web server for chrome, crea un "servidor" que se alimenta de la carpeta que seleccionen , corren y el código del video funciona perfecto
disculpa baje esa app para chrome pero tampoco me resulta, que molestia que no funcione nada de ningun tutorial donde le haga fetch a un archivo de la misma carpeta... todo ok con el link de las api publicas... si alguno consigue una forma de arreglar estos estaria agradecido.
@@eduardocuadra6681 tengo el mismo problema eduardo no puedo hacer fech al archivo de la misma carpeta :/ algún heroe que nos pueda ayudar
No tenía ni idea de Fetch y me parece que tu vídeo está muy bien hecho y anima a seguir aprendiendo. Es muy ágil y no te enredas en mil demostraciones de cuánto sabes, a diferencia de lo que hacen en otros vídeos que parecen más un show de autopromoción personal que un tutorial. El tuyo es claro y directo. Intenté encontrar la forma de enviarte un par de sugerencias (una sugerencia y un informe de error, mejor dicho). La primera es que no termino de saber cuándo "data" es variable y cuándo no. Me parece que no lo es siempre en tu código, sino que en algunos sitios forma parte de la sintaxis. Si no es así, entonces es que no lo entendí muy bien, pero quizá fuera mejor que usaras distintos nombres que dejen claro cuándo es sintaxis y cuándo no.. Por ejemplo: ".then(data =>data.text())" y ".then(data=>[console.log(data)})". Aparecen con distinto color en el código, y supongo que es porque en algunos casos es variable y en otros es palabra reservada o parte de la sintaxis... Como ves, para un principante como yo, sería mejor usar cosas como "contenido", "datos", que no puedan hacer pensar que son parte del lenguaje de programación, que suele ser de palabras inglesas.
La otra apreciación que quería hacerte es que en el vídeo dices que tu programa crea usuarios aletorios, pero debes decir aleAtorios, con la "a". Quería decirte esto en un mensaje más privado, pero no supe. Seguramente no tendrá remedio, pero creí mejor avisarte .
Enhorabuena por tu canal.
si wn debiera enseñar en una u! Lo amé, hasta compré sus cursos poh, solo por que me dí cuenta que el compadre explica bien y esa inversión valdría la pena!
Bro lo que me estan guiando tus videos. muchas gracias por ayudarnos.
Excelente hermano, que manera tan sencilla y practica de explicar como siempre. Mil gracias por su gran aporte!!
Me gustan muchos tus videos, soy muy nuevo en esto, de echo... Estoy aprendiendo con vos, arranqué con HTML y Css desde 0, luego vi los FUNDAMENTOS y ahora estoy viendo JS desde 0, solo tengo una pequeña critica, que puedes tomarla o no, se me complica mucho tener una continuidad de JS porque hay otras enseñanzas dentro de este curso y eso hace que me esté mareando un poco bastante!!! Quizás sea esa la mejor manera y me de cuenta mientras valla avanzando con este curso, pero por el momento me está mareando mucho, por lo demás te admiro mucho!!!
Wow, vaya manera tan clara de explicar. Ya activé las notificaciones; espero el siguiente video :)
Amigo, excelente explicación. Vale la pena ver sus videos. Felicitaciones
excelente explicación, después de este tutorial se puede leer cualquier manual y entenderlo además.. gracias!
Gracias por tus comentarios! Saludos María!
Pero por la chucha que maravilla señor.
Muchas gracias don Blu.
Este man si que explica de lo mejor. Imposible no entenderle, todo un crack sigue asi!!!
Totalmente de acuerdo con "linuxexp", Aunque la explicación de este "videotutorial es muy completa" que bueno tener uno de "Axios" que definitivamente es mejor alternativa que "fetch". Saludos desde Colombia.
Saludos al crack chileno de la enseñanza Web.
Revisando el método fetch y comparándolo con la librería axios, aún fetch tiene un camino por recorrer.
Estuve leyendo un artículo en Medium que tiene excelente información sobre esa comparación....
medium.com/@thejasonfile/fetch-vs-axios-js-for-making-http-requests-2b261cdd3af5
Detalles de fetch que afloran:
1) Para obtener los datos en Json debe hacerse en 2 pasos como Ud lo hizo acá en su video, un 2do then para capturar la respuesta de la promesa retornada en el 1er then y asi obtener la data en Json
2) El manejo de errores en fetch da resultados inesperados.
Como contraparte la libreria axios tiene su costo: Cargarla en tiempo de ejecución...
Así que mi estimado profe, esperamos su vídeo: Consumiendo Apis con Axios
Explicas muy bien amigo! gracias
Llegaste de vacaciones con todas las ganas del mundo jeje, me alegra que subas tanto contenido, muchísimas gracias por todo tu esfuerzo, una cosita: Ehnm me preguntaba si podías hacer un vídeo acerca de validaciones para formularios utilizando jqBootstrapValidation o si quieres hacer una serie de vídeos donde nos enseñes a validar formularios, te lo agradecería muchiisisismo. un abrazo crack
Hola groso! Vengo siguiendo la playlist de JS, te faltó explicar un poco mas lo de Live Server. Saludos!
live server es una extension visual studio code la busca y la instala es para que no tenga que actualizar la pagina
@@lnard214 No sólo sirve para eso, intentando hacer los ejercicios que explica, cuando quieras linkear archivos como el txt, si no lo haces con live server te tirara error. Una de las condiciones que la consola pide es que la dirección contenga http o https para mostrar la acción. Como live server simula un servidor lo hará sin problemas, pero si abres directamente en el navegador no lo hará y saldrá el error que he dicho. O al menos eso es lo que me ha pasado al intentar y probarlo xD
@@Heliz14 Gracias por la explicación!
Excelente Ignacio tus videos. Muchas Gracias por compartirlo
Pero que tenés? La bola de cristal? Le venís pegando a todo lo que necesito jajaa q loco! Abrazo y muchas gracias shileno!
weon seco, la cagaste. He visto demasiado videos tutoriales y al único que le puedo entender es a ti. crack
Bluuweb ! primero que nada muchas gracias por tus aportes y por la humildad con la que compartes tus conocimientos, tengo una duda respecto a esto, a mi me funciona con cualquier tipo de comillas `` o " " o ' ' (`data` o "data " o 'data ' ) sabes por que??
Me apunto! en estos dias lo voy a tomar!
exelente... que bueno ya que no hay tutoriales a fondo de fetch api
Si es verdad... se vienen otras secciones :) Saludos
Gracias por compartir tus conocimientos!
Parabéns!!! Excelente explicação e exemplos práticos e reais!!!
voce fala muito ben
@@ricardomontalvan8533 kkkkk
Hola de una api en la web, quiero extaer el dato de que corresponde a la propiedad field1 (28.75 sería el dato) en el siguente json:
{"channel":{"id":1550833,"name":"DIEGO2","description":"TEMPERATURA DE EQUIPO N2","latitude":"0.0","longitude":"0.0","field1":"Temp Entrada Aire 1","field2":"Temp Salida Aire 2","field3":"Temp Entrada Refr 3","field4":"Temp Evaporador 4","field5":"Temp Salida Evaporador 5","field6":"SALTO TERMICO AIRE","field7":"HUMEDAD RELATIVA","field8":"RECALENTAMIENTO","created_at":"2021-10-27T18:48:04Z","updated_at":"2021-11-19T16:06:33Z","last_entry_id":73905},"feeds":[{"created_at":"2022-09-19T18:34:04Z","entry_id":73905,"field1":"28.75"}]}
por mas que lo intento, no consigo obtenerlo... ¿como lo podría obtener?
Muchas Gracias, en serio me ayudaste un montón!!
Pudieras hacer algo con fetch junto a modales..
Sería genial
genio total! re bien explicado
hola amigo maestro!!!! excelente todo el contenido de tu canal. pregunta1 se habrá actualizado el javascript? ya que use contenido.innerHTML=data y anduvo prefecto al leer el txt, pregunta2 para encriptar el código para que los visitantes no nos vean la programación en javascript se puede algo fácil? saludos y gracias
inclusive master, dejo este manual por aqui esta muy bueno...Leelo desarrolloweb.com/manuales/manual-de-ecmascript-6.html#capitulos196 , podras descargar el manual, me lo e leido todo y entendi la mayoria de tus videos como sin nada.
Hola Carlos Arturo, podrías decirme el nombre de la canción que usabas en la apertura de tus videos?
inpresionante tu cutso! ahora estoy con un problema! no carga la pagina de bootstrap
Bueno el tutorial, te pasaste, muchas gracias!!!
Excelente video, me ha ayudado mucho. Pero si quiero mostrar mas de un texto con viñetas, ¿como puedo hacer?
exelente esplicacion
Hola que tal me encantas tus videos estoy aprendiendo bastante, una cosas tengo un problema con el navegador Chrome al presionar el boton no me toma porque no es http o https habra alguna forma de saltar esa condición y muestre el mensaje?
gracias!
Buenas al intentar pintar el texto en archivo txt me aparece este error
"Pedido de origen cruzado bloqueado: La política de mismo origen no permite leer el recurso remoto en file:///C:/Users/Miguel/Documents/Programacion/Java01/texto.txt. (Razón: pedido CORS no es http).
TypeError: NetworkError when attempting to fetch resource."
E intentado también copiando y pegando el código como lo dejaste en la descripción y me sigue saliendo el mismo error.
Hola yo también tuve ese problema, la solución es tener instalado la extension Liver Server (en tu Visual Studio Code). Una vez instalado, le das click derecho a tu archivo html y luego en Abrir con Live Server(Open with Live Server). Se abrira el archivo con un puerto(en mi caso es el 5500) y listo . (copie y pegue otro comentario que me salvo a mi jajaj)
si o si hay que usar live server si no no funcionará el traer un archivo de texto local
Deberias de tener un curso en Udemy, pagaria de buena gana por el.Animate
Hola muchas gracias por tus videos, me han ayudado muchisimo explicas muy bien parce. Tengo una duda. Porque cuando ejecuto por primera vez el boton me llama el archivo de texto con "hola soy un archivo con fetch" pero cuando modifico el contenido del archivo, me sigue trayendo la información inicional. (Corro el documento html en apache, trate de apagar y reiniciar el servidor pero tampoco funciono). De nuevo muchas gracias.
simplemente gracias por existir! (L)
Sos el mejor
Holaa esta muy bueno el tutorial , pero me hw quedado estancado esta parte:
Hello, world!
Obtener
var contenido= document.querySelector('#contenido');
function traer(){
fetch('texto.txt').then(data => data.text()).then(data =>{
console.log(data)
})
/*contenido.innerHTML =`fasaafadasda`*/
}
Linea 49:Obtener
Linea 55: fetch('texto.txt').then(data => data.text()).then(data =>{
y en la consola del navegador dice el siguiente error: index.html:55 Fetch API cannot load file:///C:/Users/LI/Documents/GitHub/Proyectotienda/texto.txt. URL scheme must be "http" or "https" for CORS request.
traer @ index.html:55
onclick @ index.html:49
index.html:55 Uncaught (in promise) TypeError: Failed to fetch
at traer (index.html:55)
at HTMLButtonElement.onclick (index.html:49)
de antemano gracias!!! :/, creo que el error es por que me falta levantar el servidor, como hiciste eso?
Hola, descarga el plugin de web server for chrome.
1) Seleccionas la carpeta donde esta el archivo
2) Marcas las siguientes casillas: Run in background , also on internet, accesible on local network ,
3) Picas en show advanced options y seleccionas : Set cors headers, listen on IPV6 , plan , allow file upload, verbose logging
4) Copias la segunda web url que te da el pluggin y la pegas en el fetch
@@fernandomgo5616 cual es es plugin .... yo no lo encuentro
Saludos desde Mexicali, México
Saludos México! y Leopoldo :)
Sigues poniendo a nuestro alcance muy valiosas herramientas, gracias
No se si respondas a dia de hoy, pero hago igualmente y me sale este error:
fetch API cannot load file:///C:/Users/Jugla/Documents/JS/texto.txt. URL scheme must be "http" or "https" for CORS request.
traer @ codigo.js:3.
onclick @ index.html:16
codigo.js:3 Uncaught (in promise) TypeError: Failed to fetch
at traer (codigo.js:3)
at HTMLButtonElement.onclick (index.html:16)
descargue el archivo que creo el profesor pensando que depronto fue un fallo mio, revise era lo mismo y no sirvio con el del profe.
Si el live Server no esta corriendo te va dar error
las comillas especiales se ponen con atl+96 :D
heroe
Gracias amigo.
Sos un heroe me salvaste
Estoy en el archivo index.html pero al darle clic derecho y abrir en live Server, me sale otra pagina (127.0.0.1:5500), en mi visual studio code tengo otros workspaces pero veo q tu solo tienes agregado puros archivos. Como le hago para que me abra en el live server el index.html.? por favor
Gracias.. puedes enseñar a conectar api de criptomonedas como bittrex...
no usen onclick en etiquetas html eso ya no se usa mas para JS solo captures el id y usen eventos....
Como se puede hacer para interpretar bien los acentos cuando se hace un fetch a un archivo txt?
por que me sale el error fecth API cannot load URL scheme muts be "http" or "https" for CORS request ? ejecuto desde chrome el index, hay que instalar algo o es necesario el servidor que tu tienes ? pueden ayudarme ..
no tienes el server activado. anda a visual studio code, ve a extensiones y descarga live server o mejor pon en youtube bluuweb visual studio code 2 y te explicara como ocuparlo
@@kurtacunaperez670 gracias
hola, cuando hago la funcion me tira un error que dice "traer is not defined", como puedo solucionarlo?
var contenido = document.querySelector('#contenido')
function traer() {
fetch('texto.txt')
.then(data => data.txt())
.then(data=>{
console.log(data)
})
}
No veo el error
8:16 Hola! de cual video o lista de reproducción hablas? Quisiera el link para verlo porfa. Gracias
ruclips.net/video/8ibcDy02FAw/видео.html
Se que hace un año lo pediste pero la duda de uno es la de otro tambien
Gracias Crack!!
No me funciona los del txt. Instalé Xammp, no sirvió, instale la extensión de Chrome OK 2000, tampoco. No me funciona fetch en Local
Muestra tu código para ayudarte.
Debes activar el live server primero
@@joelfranciscovaldezaquino9014 como hago eso. tengo poco conocimiento del tema.
var contenedor=document.getElementById('contenido');
var botontraer=document.getElementById('boton');
function traer (){
fetch('texto.txt')
.then(data => data.text())
.then(data=>{
console.log(data)
contenedor.innerHTML='${data}'
})
}
botontraer.onclick=traer;
@@pedrogonzalezrivear8625 Live server es una extension en Visual Studio Code que te muestra en real time la ejecucion en el local.
Para los que les sale error deben poner el codigo en su servidor.
Hola. no se ejecuta esa función. Me arroja el siguiente error.
Fetch API cannot load file:///C:/xampp/htdocs/api-usuarios/texto.txt. URL scheme must be "http" or "https" for CORS request.
Busqué en todos los foros posibles, incluido Stack Overflow, y nada.
¿Qué está ocurriendo?
Muchas gracias.
A mi me arrojaba el mismo error, creo que a muchos otros tambien. No lo he solucionado pero noté que cuando intento leer datos de una api externa me funciona perfecto. A lo mejor te faltó configurar algo del Live Server.
me tiraba el mismo error y cuando active las extenciones me funciono perfecto.
Tengo instaladas Beautify, ESLint, HTML CSS Support, HTML Snippets, JavaScript (ES6) code snippets, Live Server, Sass y vscode-icons
las mismas son recomendadas por Bluuweb, Saludos
TENGO QUE APRENDER PRIMERO LOS CALLBAKS ANTES DE IR POR LAS PROMESAS EN JAVASCRIPT ?? :/ :/
entons con este metodo puedo ocultar una pag web? y darle estilo y todo y nadie ve el codigo
Hola no has hecho el curso de FECH en tu web.
Like 550, muy buen video
Hola buenas, excelentes videos, tengo ciertas dudas, el "data" se llama así porque es una palabra reservada o le podemos dar cualquier otro nombre, ya que es confuso que: data => data.text(); lo veo un poco raro y por eso pregunto, luego otra duda es, que pasaria si pongo comillas simples ( ' ' ) en vez de las comillas especiales ( ´ ´ ), porque no entiendo el por qué en este caso hay que usar esas comillas especiales. Gracias de antemano.
con respecto a la pregunta 1; no es una palabra reservada, realmente esa linea es la que hace la promesa de respuesta; yo personalmente uso la palabra "response" para darle mas semántica.
con respecto a la pregunta 2; las comillas; no son estás ( ´ ´ ), sino éstas ( ` ` ), y es la forma en que ES6 agrega algo que en otros lenguajes llaman "Interpolación" o "string interpolation"; javascript lo llama plantillas de cadena de texto o "string templates". ver: ( developer.mozilla.org/es/docs/Web/JavaScript/Referencia/template_strings ).
Y con archivo aparte de JS no me funciona esto, porque tienen esa manía de no hacer las cosas como son usadas en el mundo real?
Buenas, si yo quiero utilizar como decís un archivo .js para todo lo que respecta a javascript y no tirarlo en el mismo código de html, como hago para utilizar el document.??? Porque no logro encontrar la forma de que el mismo haga referencia al archivo html donde debería buscar. Gracias.
Me pasaba lo mismo, solo pase la declaración de contenido dentro de la función y listo
parcero una pregunta como se sacan esas comillas especiales?? excelentes tutoriales gracias
oscar arbey herrera moreno en el teclado debe de haber una tecla que tenga esas comillas , si mal no recuerdo están por donde las teclas de las { } . Sólo que tienes que usar ALT + la tecla o ctrl + alt + la tecla. Espero que se entienda.
Felix Mtz gracias!!
oscar arbey herrera moreno No hay de que !
@@felix9368 gracias amigo no lograba conseguir como hacer eso con la variable, las había confundido con comillas simples jajaja
@@floppy6264 no es nada
Hola. Sabes que instalé todas las extensiones que mostraste, pero el .html no me lo muestra con esos colores. Qué puede ser? muchas gracias
Eso es el Tema de Colores de VS Code. El que está usando se llama Monokai (creo), el mimo que trae Sublime.
Muy buena explicación!!, solo me da un problema si alguien me puede ayudar, al realizar el ejercicio del video, en la consola me aparecen dos problemas
1º) Solicitud desde otro origen bloqueada: la política de mismo origen impide leer el recurso remoto en file:///Users/javierruiz/Desktop/proyecto_web/cursos_web/bluuweb/textos/texto.txt (razón: la solicitud CORS no es http).
2º) TypeError: NetworkError when attempting to fetch resource.
llevo varios días intentando resolver y no puedo,
tengo un mac, y no practico en local
SOY MUY NOVATO EN ESTO DE LA PROGRAMACIÓN
GRACIAS
Hola yo también tuve ese problema, la solución es tener instalado la extension Liver Server (en tu Visual Studio Code). Una vez instalado, le das click derecho a tu archivo html y luego en Abrir con Live Server(Open with Live Server). Se abrira el archivo con un puerto(en mi caso es el 5500) y listo .
Excelente, pero ojala al explicar reemplazes la palabra "Esta cosa" por su nombre como esta función, este parrafo etc.
Que fuentes utilizas?
tengo que estar conectado a un servidor local para que el fetch funcione ?
si
Hice el siguiente ejercicio, muestro el script:
document.addEventListener('DOMContentLoaded', () => {
const $contenido = document.querySelector('#contenido'),
$btn = document.querySelector('button'),
url = 'pag1.html'
function traer() {
fetch(url)
.then(data => data.text())
.then(data => {
$contenido.innerHTML = `${data}`
})
.catch(error=>{
$contenido.innerHTML = `${error}`
})
} //traer
$btn.addEventListener('click', traer)
}) //DOMContentLoaded
Y ese es el archivo pag1.html:
p{ color:green; font-size: 2em; font-style:italic; font-weight: bold;}
Hola Mundo Como realizo un 'Single Page Application' (SPA) y luego PWA (Aplicaciones para escritorio, celulares y tablets)? Alguien puede ayudarme, gracias.
Sale TypeError: contenido is null, se habrá actualizado algo?
revise bien como tienes escrito el id, si es necesario cámbialo. El error es que no se esta identificando el objeto por el id asignado.
tengo un problema con el fecth no me carga o no me indentifica el archivo que le mando
si estas usando el navegador Microsoft Edge, data no es compatible
developer.mozilla.org/es/docs/Web/API/Fetch_API
@@micromacanudo es que creo que es algo del php
@@AlavergaJoseDirectos te aparece el error en consola? Lo solucione abriendo la pagina desde un servidor para que me agregara el http, utilicé el live server en vs code
Link para live server en Visual Studio Code goo.gl/B7vc3C
Pregunta: ¿Objeto no es lo mismo que JSON? o como java / javascript
Joel Miguel Valente No, un objeto es literalmente un conjunto de atributos, características y propiedades de una entidad en javascript, y JSON es un conjunto de objetos que permite ordenarlos de una forma más simple y bella. Saludos.
Ah gracias por responderme!
Joel Miguel Valente No hay de que , espero que se haya entendido la respuesta.
hola. me sale Fetch API cannot load. en el que estoy haciendo y en los archivos que dejaste. ayuda!!!!
me sale lo mismo... ya lo has solucionado ???
Lo mismo x3
Saludos, no sé si ya lograron resolver el problema, en alguna parte del video Ignacio menciona que debe estar corriendo Live Server, esta es una extensión de Visual Studio Code, se instala y luego pones a ejecutar el servidor, luego abres la página y debería funcionar.
@Kurt acuña perez tambien hizo un comentario al respecto. "no tienes el server activado. anda a visual studio code, ve a extensiones y descarga live server o mejor pon en youtube bluuweb visual studio code 2 y te explicara como ocuparlo"
@@heimysalvarado6274 No es un tema de servidor amigo !!
HOLA no me funciona en un JS externo por que sera??
Me pasaba lo mismo, solo pase la declaración de contenido dentro de la función y listo
EXCELENTE, solo que al principio bien razista la api de usuarios xD, aparece una mujer negra y dice MONA xD
como se escriben esas comillas?
es la tilde
nadie vino a buscar las comillas especiales xD
Cual es el link para la configuración del server?
pone en el buscador de youtube 'bluuweb visual studio code 2'
aqui hay algo que me resultó.
developer.mozilla.org/es/docs/Learn/Common_questions/set_up_a_local_testing_server
Desde el mismo visual studio code, vas a extensiones, buscas "live server" lo instalas y listo.
Cual es el link de live server?
si estás usando Visual Studio Code, desde allí mismo puedes instalarlo buscando desde las extensiones.
Es como ver un vídeo "PORNO" 🤣