#3 AJAX con JavaScript | Consumiendo una API pública - Tutorial sin jQuery
Вставка
- Опубліковано 8 вер 2024
- En este video aprenderemos a consumir una API pública con Ajax de Javascript, donde nuestro sitio web HTML no se recargará ya que todo será de forma asíncrona.
El desarrollo de nuestro proyecto es sin jQuery.
API: mindicador.cl/
Suscríbete aquí: / bluuweb
Descarga los archivos del curso aquí: goo.gl/4tZAZb
MÁS CURSOS DE BLUUWEB!
📌 HTML Y CSS: goo.gl/yoMdMZ
📌 JAVASCRIPT: goo.gl/hnQkog
📌 JQUERY: goo.gl/Ag7XsG
📌 CSS GRID: goo.gl/nR56pT
📌 VISUAL STUDIO CODE: goo.gl/cvu57R
📌 BOOTSTRAP 4: goo.gl/npezrj
📌 PHOTOSHOP: goo.gl/1C9k5n
📌 PSD A HTML: goo.gl/VYX2V6
📌 TEMAS WORDPRESS: goo.gl/GeiVNm
📌 PHP Y MYSQL: goo.gl/oao1QT
📌 FORMULARIOS CON PHP Y AJAX: goo.gl/GKpZAH
📌 ANGULAR: goo.gl/WJhtnC
📌 FIREBASE/FIRESTORE: goo.gl/bpKL9i
📌 PHP LARAVEL: goo.gl/iAbPBy
📌 MATERIALIZE CSS: goo.gl/7pSFY5
📌 IONIC: goo.gl/RNGKTD
📌 SASS: goo.gl/ba7mEE
📌 PROGRAMACIÓN BÁSICA: goo.gl/HksyVi
¿Quiéres apoyar el canal?
Curso de Bootstrap 4 PREMIUM!
Accede con un súper descuento aquí: goo.gl/VQZwKg
También puedes seguirme en Facebook: / bluuweb
Finalmente visita mi sitio web: www.bluuweb.org
![LocalStorage [Conceptos y definiciones] ❤ JAVASCRIPT ❤](http://i.ytimg.com/vi/7hR7oTpDukc/mqdefault.jpg)
Saludos desde Caracas - Venezuela.
Excelente vídeo mi estimado profe.
Referente al subst existen 2 alternativas:
1) cadena.substring(indiceA[, indiceB'])
2) cadena.slice(inicioTrozo[, finTrozo])
Observando que la fecha viene de la Api en formato ISO 8601 y la hora en UTC, para mostrar la fecha y hora usaría la librería moment.js, el código de la fecha quedaría así:
${moment(item.fecha).format('DD/MM/YYYY, hh:mm:ss a')
Y la salida sería por ejemplo: 07/09/2018, 12:00:00 am
Pero como siempre hay muchas formas de hacer lo mismo.
Éxitos profe y gracias por estos valiosos aportes.
Wuau que genial! lo voy a intentar, lo de las fechas me parece muy útil :) Muchas gracias por compartir conocimiento!! yupi!!
hola,gracias ,como llamo la libreria moment.js
@@oremet47844 te recomiendo que no uses librerias para darle formato a la fecha y hora, si estas aprendiendo... para que agarres mas agilidad corta la cadena de la fecha por dia, mes y year y guardas cada una en una variable, y luego ordenas la cadena como desees.. dd/mm/yy. y tambien evitas ponerle carga adicional al proyecto. recuerda que el navegador antes de compilar y renderizar la pagina, debe de descargar el codigo js. Entre mas liviana sea tu app. mas rápida sera... Saludos!
Saludos desde Maracaibo - Venezuela, muy interesantes tus clases y sobre todo explicas claro y sin divagar. Para formatear la fecha a base de un string la forma más fácil y moderna es esta: ${ new Date(item.fecha).toLocaleDateString() }
Excelente manera de explicar, me alegra que un compatriota se dedique a enseñar. Hice cada ejercicio pausando el video y me quedó super claro. Muchas gracias.
${index.fecha.substring(0,10)}
No es recomendable utilizar el onClik directamente en el index ya que si quieres generar la información de manera dinámica eso seria un problema, veo mas optimo hacer el llamado por el id, si estas generando de manera dinámica.
Muchas gracias don Blu , sinceramente salgo de la pega con ganas de llegar a la casa para ver que puedo aprender hoy y me tiene muy motivado , don Blu ud tiene un método pedagógico tremendo explica todo sin dejar lugar a dudas lo felicito y le reitero mis agradecimientos.
primero practique angular sin saber ajax... cuanto dolor de cabeza me hubiera ahorrado para tratar de comprender asincronia y peticiones HTTP. Ahora si comprendo mejor en que se basa Angular con su SPA.Excelente video
Brother saludos desde Rio de Janeiro, primer vídeo que veo de este canal y valió la pena cada segundo del vídeo. Like y suscripción de one!
Muy bien explicado. El único priblema que veo (en este curso en particular que es el primero que veo) es que falta un índice, y que se mezclan conceptos que están en otros cursos (tipos de fetch, ajax, jquery...). Quizá se podría organizar algo mejor. Repito que es por ponerle algo a mejorar, ya que el trabajo que llevas a cabo y la gratuidad de los cursos ya lo convierten en algo admirable. Gracias por compartir.
Profesor gracias por esta clase me has ayudado a integrar IoT, para mostrar las lecturas de un sensor de temperatura en una web al presionar un botón, ahora mi reto será guardar esas lecturas en una BD muchísimas gracias profesor
Muchas gracias por el tremendo apoyo!!! 😍😍😍
El evento onclick de html no es soportado al 100% por todos los navegadores. (versiones viejas), por supuesto. en cambio addEventListener es un standar. por lo tanto, es 100% soportado por cualquier dispositivo que use un navegador o entorno de ejecucion JS. Saludos!
Explicaste de manera excelente, entendí todo muy bien, gracias por tu aportación.
Buenísimo, que bien explicas !!! bravo ya soy fan, vere los demas tutoriales.
eres es un crack facil y dinamico gracias por tu conocimiento =)
Gracias! la próxima semana más videos :) Saludos!
ya que estaba repasando aporto, item.fecha.slice(0,10)
abrazo fuerte¡
exacto
Si, de hecho nunca probe substring
Hola ya estaba esperando este curso jj desde Cuba te sigo
Guau! genial! bienvenido! :)
Excelente explicación espero sigas compartiendo videos!
Profesor chileno,excelente explicación,muchas gracias
ashgdvajfsydajwetfviwuefvbasuefydu MUCHAS GRACIAS SIEMPRE ME LA SUBES CON TUS VIDEOS A VECES SE PASA POR EL AUTOPLAY Y YA NO LE DOY MEGUSTA PERO SIEMPRE TRATO MEUQEAN MUCHOS CURSOS ASI Q TE ESPERAN UCHOS PULGARES HACIA ARRIBA... otra vez muchas gracias por tu tiempo.
excelente como siempre, puedes hacer un curso de Amazon Web Service, como intanciar un maquina y migrar alguna página, saludos
Gracias Maestro Shileeenoooo!!! Te sigo a donde vayas genio!!!!
jajajaja algún día te invitaré un café :) Saludos!
Buenas, me han servido mucho tus videos ademas de ser muy claros, son muy amenos.
En algunas APIs me surge el problem de CORS Access-Control-Allow-Origin, tienes alguna solucion? He probado varias modificaciones pero sin exito
Un cordial saludo...
Me parece que eres una bestia, dice mi amigo Guille
master harás los tutoriales de jquery con ajax y para comunicarse con una bd?? gracias buenísimos los tutoriales
Wao GRACIAS!!
BLuuweb, excelente vídeo muy bueno ... Saludos
Hola este video tenia una explicacion anterior pero no lo encuentro, cual seria?No entindo bien los status y redystate, y cundo hacemos la instancia new, cual es el video anterior? Gracias
Muchas gracias por el tutorial, la forma de explicar es facil de entender lo cual se agradece. Si puedo preguntar, como haria con una api privada para incluir usuario y contrasena?
Gracias de nuevo y suerte
Costo pero pude. Gracias man
Excelente, gracias
muy bueno !
Gracias! :)
En la fecha de hoy con este proceso no puedo realizar el consumo de una api publica, por favor me puede indicar como hacer el consumo de una api publica, muchas gracias
Slice es lo nuevo en js en ves de substring
Hola como harìa para hacer lo mismo del parametro (valor) con la nueva forma de escribir funciones en javascrip que es de esta forma ()=>{}
excelente Profe , una pregunta en un reproductor de mp3 como seria cuando cambie de pista cambie la caratula y el nombre de la canción... muy buen tutorial saludos de Colombia
Hola gente. No me está resultando: al presionar el botón "dólar", abajo aparece literal "${item.fecha} | ${item.valor}" en vez de mostrarme la fecha y el valor del dólar.
me pasa lo mismo y no se que es
@Jencarlos gracias, probaré y publicaré mi resultado.
@Jencarlos muchas gracias!
@Jencarlos gracias!!!
Genial
donde puedo agregar el CORS Para que no me lo bloquee al consumirlo
Hola! Antes que nada AMO tus cursos!! Te molesto con una consulta, tengo el mismo código que vos, y me gustaría por ejemplo poder sumar todos los valores de la columna precio, (cada uno con su antecesor )... Como podría hacerlo?? Agradezco mucho tu respuesta!! Saludos desde Arg.
Hola Lucas, puedes lograr lo que preguntas declarando una variable let suma = 0; fuera del bucle For, para luego dentro del bucle for debes ir sumando cada valor, con el siguiente código sumas todos los valores que recorre el for.
suma += item.valor;
para corroborar puedes hacer un console.log(suma); fuera del for y revisar.
saludos
slice() method para cortar un string
Hola Tenes video donde haces paginas web con laravel y boostrap?
Holaaa tengo muchas dudas tengo que pedirle a url los datos de json :c
Saludos, buen video entendible, como seria si la api tiene una authentication bearer?
Agregas la cabecera bearer con su respectivo token y la envias. eso es todo men.
objRequest.setRequestHeader('tucabecera', 'valor_token');
Sabes como insertar datos a una api publica desde formularios?
y se puede escribir un JSON desde vainilla javascript? sea en un servidor local o en un servidor remoto
Sí se puede.
Ayuda, tengo un problema cuando intento utilizar la API pokeapi.co/ ya que me pide realizar una petición por cada pokemon esto sugiere que la pagina demore en cargar al hacer la petición de forma sincrónica, pero si la hago asincronica los datos no salen en orden, alguna manera de agilizar las llamadas a la API???
alguien sabe como guardar datos en un archivo json
Amigo tengo una API privada de un proveedor con las claves de acceso. Como hago para llamar los datos?
El nuevo metodo para substraer es Slide()
Para el minuto 12:43 use un regex:
item.fecha.replace(/[:].+/, "")
¿Cómo se llama el Tema que usas en el VC, amigo?
Pudiste encontrarlo?
@@LasTManuu El tema lo puedes buscar como Palenight en las extensiones ;)
@@ozcarr753 Gracias, aunque entre tus videos hay uno donde lo hablas y aprovecho de sacar las demás extensiones jajaj
Al intentar reproducir el ejemplo, éste no se ejecuta porque el servidor mindicador.cl/api está caído.
lo hice con fetch y es menos código, y más sencillo :)
A mi no me funciona :/
Siga probandoo jeje
tengo una duda, como puedo ordenar todo eso en una tabla y de mayor a menor segun el valor? porfa es urgenteee
JavaScript tiene varios metodos de ordenamiento pero puedes utilizar este sort()
AYUDA!!!! ACTUALICE VISUAL STUDIO A LA VERSION 1.27 Y YA NO PUEDO ESCRIBIR "HTML:5" PARA INICIAR UN NUEVO PROYECTO, YA BUSQUE Y NO ENCUENTRO RESPUESTA, DESINSTALE Y VOLVI A INSTALAR Y NADA. 10/SEP/2018
😱😱😱😱😱
RESUELTO!!! ESTA SENCILLO DE RESOLVER, PERO ESTÁ OCULTO EN EL PROGRAMA EL PROBLEMA
ocupo , item.fecha.substring(0,10)
El nuevo metodo es el SLICE() en vez de SUBSTR()
tambien tienes el metodo substring().
Los 2 heredan de String.prototype
Fuente:
developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/substring
ua-cam.com/video/M3w4S94Vl7Q/v-deo.htmlm15s
Es substring no substr
Gracias!! :) vamos a probarlo he he he :)
Para los strings en Js existen 3 posibles metodos para lograr extraer fagmentos de un String, estos son substring(params), substr(params) y slice(params), cada uno extrae pero de una manera diferente de acuerdo a los argumentos que reciba
Gracias! son lo máximo! :)
@@bluuweb No hay que darlas jajaja, HACES BUENOS VÍDEOS!
Hola bluuweb que tal estas .? Soy suscriptor te sigo .. te envíe un e-mail a tu página web por que necesitaba información acerca de ionic. Necesito compartas tus conocimientos ! Puedes escribirme a mi face?
Aquí te dejo mi link para comunicarnos . Yo intenté escribirte en Facebook pero no lo logre. Este es mi face para que me escribas m.facebook.com/sebastian.montanez.127
ua-cam.com/video/Af6LP8dZWDI/v-deo.html Saludos amigo la mejor pedagogía q he visto felicitaciones, me gustaría si podría hacer un video parecido a este q se lo paso en el link ya en este video no me corre el programa he echo paso a paso to y me sale muchos errores en consola gracias
Buenos tutos, serían perfectos si hablaras normal.
jajaja jamás hablaré normal jijiji Saludos
@@bluuweb jajaja yo no encuentro nada de raro como habla jaja sera que soy shileeenooo iwal jajaj
Los primeros 6 minutos del vídeo sobran bastante, si el tutorial es de consumir API, no te tires 6 minutos especificando cómo hacer un botón, es bastante confuso y debería estar en otro vídeo