Fetch - Javascript - Cómo mostrar datos desde una API

Поделиться
HTML-код
  • Опубликовано: 16 ноя 2024

Комментарии • 166

  • @yaeluriel
    @yaeluriel 3 года назад +13

    Exelente, tú siempre con lo mejor de lo mejor y explicado muy fácil.🙌

    • @informaticadp
      @informaticadp  3 года назад +2

      Muchas gracias Yael! Viste estos temas no son complicados. Te mando un abrazo.

  • @PedroSerranoGr
    @PedroSerranoGr 2 года назад +4

    Fantástico video. Al fin alguien que sabe explicar las cosas de forma sencilla en su esencia, sin saturar de sobreingeniería con Node/NPM/babel... Que es innecesario en muchos casos.

    • @informaticadp
      @informaticadp  2 года назад +1

      Muchas gracias Pedro!!! Te mando un abrazo y gracias nuevamente.

  • @quinojuan2
    @quinojuan2 2 года назад +9

    Me encantó la practicidad. También es una muestra de respeto al tiempo ajeno que adelantes el video cuando escribis codigo. Muchisimas gracias por todo tu trabajo.

    • @informaticadp
      @informaticadp  2 года назад

      Muchas gracias Juan Carlos!!! Abrazo!

    • @peremos7781
      @peremos7781 3 месяца назад

      "muestra de respeto al tiempo ajeno" no sea payaso, el interesado es uno, quiere también una tacita de café?

  • @hectorfidalgo606
    @hectorfidalgo606 Год назад

    Muy muy bueno. La diccion de tu voz es clarisima, la orientacion y esctructurado del video lo hacen Excelente. Felicitaciones

  • @kayser2945
    @kayser2945 5 месяцев назад

    gracias por ayudarme bro, quiero hacer una web de la F1 y con tu video pude sacar los primeros datos... gracias!

  • @websdevgio
    @websdevgio 7 месяцев назад

    Muchas gracias muestra en pocas líneas cosas que llevo tratando de aprender hace rato mil gracias de verdad

  • @patriciovillarroel8403
    @patriciovillarroel8403 3 года назад +1

    Muchas gracias por tu tiempo, aporte y explicación, sin duda el mejor haciendo estos webinar...

    • @informaticadp
      @informaticadp  3 года назад

      Te agradezco mucho Patricio! Saludos.

  • @jairoortega8398
    @jairoortega8398 3 года назад +8

    Un aporte en la linea 52 console.table(data) y muestra por consola los datos en formato de tabla. Gracias por tus videos. Esperamos un CRUD. Saludos.

  • @josemanuelmartinellreynald5785
    @josemanuelmartinellreynald5785 2 года назад

    Saludos desde Cuba.

  • @JorgeRomero-om9cy
    @JorgeRomero-om9cy 2 года назад

    Muchisimas gracias por el vídeo me sirvio demasiado para poder hacer una APP con el JavaScript soy nuevo pero muchas gracias por tu vídeo.

  • @LATNOK33
    @LATNOK33 3 года назад +2

    Genial, muchas gracias por dedicar parte de tú tiempo en enseñar, bendiciones para ti.

  • @MarianoCasalini-cp1yv
    @MarianoCasalini-cp1yv 10 месяцев назад

    Me encantó el video y la forma en que lo explicas.
    Muchas gracias!

  • @diegoarmandohernandezforer3637
    @diegoarmandohernandezforer3637 Год назад +1

    muchas gracias, que buen ejemplo, puedes hacer uno con fetch y POST?

  • @lian3400
    @lian3400 Год назад

    Buenazo, eres de los pocos que no usan codigo raro y extravagante para demostrar que "saben programar". Los mejores codigos son aquellos que pueden ser entendidos por cualquiera 🙏

    • @informaticadp
      @informaticadp  Год назад

      Muchas gracias Lian! eso tratamos, sobre todo que se entiendan los temas. Abrazo!

  • @espiralciencias
    @espiralciencias 2 месяца назад

    Muchas gracias excelente explicación

  • @jhongut
    @jhongut 10 месяцев назад

    Nooo, simplemente genial como explicas

  • @sherlockh.4238
    @sherlockh.4238 2 года назад

    Gracias maquina. Estoy empezando con JS en la universidad y no podia mostrar la info en el html.

  • @Ed-fq3kz
    @Ed-fq3kz 2 года назад

    Que gran video, fácil de entender...gracias..!!

  • @carloszapata1698
    @carloszapata1698 9 месяцев назад

    Excelente, tu explicación, muchas gracias

  • @robertobaldizon8206
    @robertobaldizon8206 3 года назад

    Mas claro imposible. Muchas gracias. Me encantó el video. Saludos.

  • @zayrarojas9169
    @zayrarojas9169 7 месяцев назад

    Enseña muy bonito , muchas gracias. Bnediciones

  • @elkevdlt
    @elkevdlt 2 года назад +2

    Excelente video!, se entendió todo perfecto. Suscrito, saludos desde uy 🇺🇾.
    P.D: que tema de vs code usas? Me gustan los colores 😁

  • @miguelvasquez9849
    @miguelvasquez9849 Год назад

    muy buen video. En cuanto a seguridad hay algún problema detectado de poder hacerlo de esta manera?

  • @FlorenciaMarcazzo
    @FlorenciaMarcazzo Год назад

    Muy buena explicación 🎉

  • @jesuscuriel4953
    @jesuscuriel4953 4 месяца назад

    fenomeno eres un crack te aprecio mucho siguelo haciendo

    • @informaticadp
      @informaticadp  4 месяца назад

      Muchas gracias Jesús!!!

    • @jhaydev
      @jhaydev 3 месяца назад

      @@informaticadp Bro no se si ya lo hiciste pero deberias hacer un update de este video usando, async y await para mejores prácticas no?

  • @fabriqr2930
    @fabriqr2930 Год назад

    Todo entendible a la prefeccion :D

  • @zimcity6970
    @zimcity6970 2 года назад

    Gracias , gran aporte a la comunidad

  • @tecnicoliquen6126
    @tecnicoliquen6126 3 года назад

    Super Excelente Plus !! Muchas gracias Maestro Gustavo

  • @neftalirodriguez6477
    @neftalirodriguez6477 2 года назад

    Muchas gracias!!!! Me sirvió bastante

  • @loo.989
    @loo.989 Год назад

    No puedo estar mas maravillada con este video. Realmente muchas gracias. Quisiera preguntarte si tienes algún ejemplo similar así pero en vez de incrustar los datos en una tabla hacerlo en unas Cards con imagenes. Por ej: una card que contenga: una imagen, un titulo y una descripcion. Saludos!

    • @informaticadp
      @informaticadp  Год назад +1

      Muchas gracias!!!! Creo que hay Ejemplos en el canal pero con react y la alternativa a fetch, axios. Igual podemos hacer algo. Fijate en la lista de JavaScript apps. Saludos!

  • @beticohernandez8039
    @beticohernandez8039 3 года назад

    Pro fe muy bien como siempre.
    Me gustaría que hicieras un carrito de compras.

    • @informaticadp
      @informaticadp  3 года назад

      Gracias Betico! Un carrito de compras con laravel 8?

    • @beticohernandez8039
      @beticohernandez8039 3 года назад

      Muy bien para cuando estará esos videos?

    • @informaticadp
      @informaticadp  3 года назад

      Ni siquiera tengo ese proyecto. Más adelante haremos más con Laravel. Próximo curso es un CRUD con MongoDB, Bootstrap 5 y Node.

  • @paoloaraya2526
    @paoloaraya2526 3 года назад

    videazo, bien explicado, claro, y practico.

  • @francoortega72
    @francoortega72 2 года назад

    Excelente, se le puede agregar un buscador?

  • @alejandropena2941
    @alejandropena2941 6 месяцев назад +1

    Hola buenas tengo una consulta.
    Resulta que me encuentro programando una página web en la cual estoy usando dos API´s una creada por mí mismo y otra pública. La función que utilizo para poder mostrar los datos es prácticamente idéntica a la que muestras en el video (Yo la tengo en un archivo .json aparte), pero resulta que para la API que cree yo mismo funciona perfectamente, pero en el caso de la publica no.
    La API publica muestra un elemento (Una bebida alcohólica) aleatoria de una Arraylist.
    Al momento de mirar la consola me doy cuenta que para mi API los datos que devuelve tiene el siguiente formato:
    (9) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
    Mientras que para la API publica muestra lo siguiente:
    {drinks: Array(1)}
    Quería saber como puedo trabajar con esta API, ya que si por ejemplo la llamo solo me devuelve valores 'undefined'

  • @breentrejo
    @breentrejo 2 года назад +1

    Excelente video, lo hice y me funcionó, pero intente con otra api de usuarios y no me desplegó la info :(

  • @vassi4203
    @vassi4203 2 года назад

    explicas muy bien wacho

  • @danyrojas7248
    @danyrojas7248 2 года назад

    Muchas gracias

  • @diegoprimo6089
    @diegoprimo6089 2 года назад

    Todos tus videos son excelentes como siempre y muy bien explicados.
    ¿Como hago para completar esa tabla con los datos que me muestra un endpoint json?

  • @otaxhu
    @otaxhu Год назад

    recomiendas usar document.createElement y el metodo appendChild para hacer esto? o es mejor utilizar templates strings de html?

  • @cootrancznortearchivos6238
    @cootrancznortearchivos6238 3 года назад +1

    Soy novato, pero me encanta esto, lastima que esto no es algo que estudie solo es mi joby y creo aplicaciones pero en seguridad y api no se es nada... no me da pena decirlo pero muy interesante.

    • @informaticadp
      @informaticadp  3 года назад +1

      Así es, Javascript puro es una maravilla. De hecho todos los frameworks surgen de aquí. Saludos.

  • @emanuelretamozo6288
    @emanuelretamozo6288 2 года назад

    genial, muy didactico gracias

  • @ivanruiz1754
    @ivanruiz1754 3 года назад +1

    Gracias, buen video.

  • @stivensalazar3947
    @stivensalazar3947 Год назад

    hola, esto se puede desde un proyecto creado en angular?, por que tengo muchos componentes html y no se muestra en la que quiero nisiquiera aparece

  • @jazo2212
    @jazo2212 Год назад +3

    El 95% de los videos tutoriales en RUclips en sus ejemplos para cargar un DATTABLES utilizan datos de JSON PLACEHOLDER. Pregunto, porque no usar información mas real como una base de registros de Excel o Access (estas herramientas se usan en todas las empresas)? seria de mucha utilidad a usuarios que nos estamos insertando en la WEB.

  • @NokrisMx
    @NokrisMx 7 месяцев назад

    Muchas gracias :)

  • @erickortizgasca2859
    @erickortizgasca2859 Год назад

    buen video!

  • @emilianooliveto5028
    @emilianooliveto5028 2 года назад +1

    también podrías usar un .forEach o un .map, verdad?
    Buen video y buena explicación!

    • @informaticadp
      @informaticadp  2 года назад +1

      Totalmente. Muchas gracias!!!

    • @guillermodanielmazzarigiov1768
      @guillermodanielmazzarigiov1768 2 года назад

      Pregunta de novato, su bastante nuevo en esto, podrías usar métodos de array? Cómo filter o algún otro? Me entró la duda por lo que mencionan map

    • @emilianooliveto5028
      @emilianooliveto5028 2 года назад

      @@guillermodanielmazzarigiov1768 Lo qué pasa es que .forEach() y .map() lo podes utilizar ya que recorren el array y podes iterar sobre ellos. En cambio con .filter() es para filtrar elementos del array en base a la condición que vos le aplicas. Existen otros métodos de array que cada uno tiene sus diferentes funcionalidades.

  • @diegoarmandohernandezforer3637

    que template usas para vs code?

  • @luiscardozo1419
    @luiscardozo1419 2 года назад

    buenas, solamente al actualizar se traerán los datos nuevos o se puede poner eso en el código, un actualización automática cada 5 min , por ej., saludos

  • @juandavidduarte9375
    @juandavidduarte9375 2 года назад

    Buen vídeo, saludos!

  • @miguela.coau.393
    @miguela.coau.393 4 месяца назад

    Buenas, no puedo mostras la informaciòn, tengo el siguiente error;
    TypeError: Cannot set properties of null (setting 'innerHTML')
    at mostrarData (index.html:60:49)
    at index.html:49:21
    En la consola se muestra la informacion
    console.log(body)
    , pero la siguiente linea NO
    document.getElementById('data').innerHTML =body

  • @maicolestivenlopez109
    @maicolestivenlopez109 Год назад

    Se gano otro seguirdor 😁

  • @danielbriceno3658
    @danielbriceno3658 2 года назад

    Hola, una pregunta, y como se haria para no estar llamando a la url, no tendria sentido llamarla de nuevo si nada ha cambiado.

  • @cristhianaguilarverduguez1698
    @cristhianaguilarverduguez1698 3 года назад

    Genial Maestro

  • @rafalongo7
    @rafalongo7 2 года назад

    gracias crack!!! tome su like

  • @fredy151516
    @fredy151516 2 года назад

    Como puedo hacer un inicio de sesión con una api, js y html?? Alhun consejo

  • @pupoxws983
    @pupoxws983 Год назад

    GRACIAS , UNA PREGUNTA HE LEIDO QUE innerHTML YA NO DEBERIA USARSE, QUE DEBERIA USARSE append o appendChild, TIENES ALGUN VIDEO EXPLICANDO ESTOS METODOS?

    • @informaticadp
      @informaticadp  Год назад

      Hola bro! Por qué no debería usarse innerHTML ? Saludos.

    • @pupoxws983
      @pupoxws983 Год назад

      @@informaticadp LEI QUE POR TEMAS DE SEGURIDAD QUE ES VULNERABLE

  • @jassanzuleta5317
    @jassanzuleta5317 3 года назад

    Excelente, amigo tengo una consulta, para este tipo de peticiones que me recomendarías usar o cual es mejor, Ajax Fetch o Axios, gracias 👍🏽

    • @informaticadp
      @informaticadp  3 года назад +1

      Muchas gracias! Es una forma de mostrar todas las alternativas y tener más recursos como desarrolladores. Todas son buenas alternativas. Abrazo.

    • @gabrielcarmnn
      @gabrielcarmnn Год назад

      Fetch y axios se usan mas

  • @valenciapaginasweb
    @valenciapaginasweb 2 года назад

    Podrias explicar como hacer la api con php??? Gracias

  • @RooneyTodd
    @RooneyTodd 3 года назад

    Como puedo consumir una API local en Node JS (Servidor Local), esta en el puerto 3000 y no me funciona...

  • @andresmendoza7105
    @andresmendoza7105 3 года назад +1

    Profe nos enseñarias React por favor jeje

    • @informaticadp
      @informaticadp  3 года назад

      Totalmente. Tengo pendiente React en el canal. Este año esperemos hacer un CRUD y una SPA. Saludos.

  • @s.h.3406
    @s.h.3406 2 года назад

    como hago un calendario solo con JavaScript.. osea sin JQUERY

  • @josueisaac5792
    @josueisaac5792 2 года назад

    Hola buenas Tardes, Sabes de existe alguna manera de pintar un jason en html de manera local sin tener un servidor, para evitar este error "Solicitud de origen cruzado bloqueada: La misma política de origen no permite la lectura de recursos remotos en file:///C:/Users/id/Desktop/API/name.json. (Razón: Solicitud CORS no http). "

  • @borisbarzotto5785
    @borisbarzotto5785 3 года назад

    Gracias

  • @KaoruGoyle
    @KaoruGoyle 3 года назад

    Y por ejemplo como sería si cuando creamos un reporte interno para la empresa, pero usamos el API de otro sistema que ya tenemos (como el sistema de facturación) donde ya estan dados de alta todo, y para no hacerlo dos veces.
    Como podríamos llamar a esa API y usar esos datos para insertarlos en nuestro nuevo registro?: O sea para usar los datos mas allá de consumir y mostrar.

  • @guillermodanielmazzarigiov1768
    @guillermodanielmazzarigiov1768 2 года назад

    Excelente video! Si quisiera hacer esto teniendo una API key, podría ponerlo así:
    fetch(url+API key)
    Si me pueden aclarar la duda, agradecido

    • @emilianooliveto5028
      @emilianooliveto5028 2 года назад

      Si pero no podes declarar una variable con 2 palabras separadas como en este caso API key. Sería fetch(url + apiKey) o también fetch(`${url} ${apiKey}`)

    • @informaticadp
      @informaticadp  2 года назад

      Muchas gracias!! Asi es como dijo el compañero Emiliano. Saludos!

  • @mdelama
    @mdelama 3 года назад

    Excelente amigo

  • @lequiel93
    @lequiel93 Год назад

    Ví 3516384138581 de y en todos muestran exactamente el mismo ejemplo. No se puede mostrar 1 SOLO DATO sin hacer ningun bucle?

  • @marczlong9382
    @marczlong9382 3 года назад

    no entendí una mierda(soy muy limitado) pero bien explicado... gracias

    • @informaticadp
      @informaticadp  3 года назад

      Nooo, que parte no entendiste? La idea es que todos aprendan!

  • @TunGrefgItsJoss
    @TunGrefgItsJoss 3 года назад

    Podrías hacer un crud con fetch y por cierto excelente video

    • @informaticadp
      @informaticadp  3 года назад

      Muchas gracias. Buena idea lo del CRUD.

  • @mdelama
    @mdelama 3 года назад

    Bien explicado

  • @programadorweb1587
    @programadorweb1587 3 года назад

    Excelente !

  • @yezcodados689
    @yezcodados689 3 года назад +1

    Este es para crear una api?

  • @desarrolladortres3652
    @desarrolladortres3652 2 года назад

    Qué tal profe, me sirvio bastante, pero como puedo jalar mi controlador desde la url? ya lo intente y no me deja, me sale error 500

  • @JuanPabloRezlan
    @JuanPabloRezlan 3 года назад

    Bravo

  • @pandem0ni0
    @pandem0ni0 8 месяцев назад

    voy una semana tratando de obtener una solicitud con fetch method : get pero desde un controlador que recibe un parametro ayuda po favor :(

    • @informaticadp
      @informaticadp  8 месяцев назад

      Que paso bro? Compartí esa parte del código

  • @stevenperez3487
    @stevenperez3487 2 года назад

    Buenas como lo hago alfabeticamente en la tabla ?

  • @beticohernandez9536
    @beticohernandez9536 3 года назад

    Hola pro fe, un crud con esa Api se podrá hacer?

    • @informaticadp
      @informaticadp  3 года назад

      Hola! No, porque esa API es de jsonplaceholder es de un servicio externo.

  • @joseairpods8592
    @joseairpods8592 2 года назад

    como le puedo agregar un buscador y filtración de datos?

    • @informaticadp
      @informaticadp  2 года назад

      Aquí lo explico. Es muy simple y está el código fuente. Saludos.
      ruclips.net/video/FpArxvAsdek/видео.html

  • @Azur999
    @Azur999 2 года назад +1

    Aun que el video es viejo, me gustaria saber como se puede hacer una api que busque el usuario por id sin tener que ponerle el post/1 en el url, se lo agradeceria mucho la verdad

  • @valentinavega7838
    @valentinavega7838 3 года назад

    Genial. Una pregunta ¿Cómo se llama el tema de tu VSCode? :3

    • @informaticadp
      @informaticadp  3 года назад +1

      Hola Valentina. El tema para VSC se llama Outrun night. Saludos.

    • @valentinavega7838
      @valentinavega7838 3 года назад

      @@informaticadp ¡Gracias!

  • @victorcix
    @victorcix 3 года назад +1

    Se podrá hacer un crud con api en php

    • @informaticadp
      @informaticadp  3 года назад +1

      Totalmente. En el canal hay un par de cursos con API con PHP.

    • @informaticadp
      @informaticadp  3 года назад +2

      Te paso este curso. Usamos una API con PHP y otra con Node.
      ruclips.net/p/PLrAw40DbN0l0ziD-_7LKx61xFhGjVbqbW

    • @victorcix
      @victorcix 3 года назад +1

      @@informaticadp se agradece

  • @hernanacevedo7081
    @hernanacevedo7081 2 года назад

    ¿porqué no funciona con una url de tipo localhost? me sale en blanco la tabla, solo me aparecen los datos por consola

  • @pedroperez-abc
    @pedroperez-abc 3 года назад

    Tengo problemas con los cors

  • @srjuanz
    @srjuanz 3 года назад

    genio, necesito hacer un filtro con JavaScript desde un input de los datos traídos desde una API, tendrias video o el codigo para hacerlo?

    • @informaticadp
      @informaticadp  3 года назад

      Juan cómo estás! Exactamente eso no recuerdo haber subido al canal. Pero proyectos con APIs y Javascript puro hay muchos en el canal. La API es con Node de la que consumis?

    • @srjuanz
      @srjuanz 3 года назад

      @@informaticadp bien y vos? es para un trabajo de la facultad, usamos la web mockAPI desde donde se carga la API y lo tengo que hacer con javascript puro.

  • @beticohernandez9536
    @beticohernandez9536 3 года назад

    Tienes un crud desde una Api?

  • @dariodifederico9749
    @dariodifederico9749 2 года назад

    no se puede descargar el codigo que pena :(

    • @informaticadp
      @informaticadp  2 года назад

      Aguantame unos minutos y lo subo a Github

    • @informaticadp
      @informaticadp  2 года назад +1

      Listo el link en Github!

    • @dariodifederico9749
      @dariodifederico9749 2 года назад

      te felicito , el ejemplo es excelente, tiene bootstrap, tiene funciones nuevas, promesas, en muy pocas lineas de codigo.

    • @informaticadp
      @informaticadp  2 года назад

      Muchas gracias Darío!!!

  • @joseleonrs9817
    @joseleonrs9817 6 месяцев назад

    Hay miles de ejemplos con fetch pero solo de carga de datos, nunca he visto un crud completo 😂

    • @informaticadp
      @informaticadp  6 месяцев назад

      Estimado. Aquí está ruclips.net/p/PLrAw40DbN0l0CtcIRNmM5ZTM6o8Nmwdk5&feature=shared

    • @joseleonrs9817
      @joseleonrs9817 6 месяцев назад

      Excelente Carnal, ahora mismo me lo veo gracias por el enlace

  • @dakuni99
    @dakuni99 Год назад

    gracias

  • @pupoxws983
    @pupoxws983 Год назад

    GRACIAS

  • @jcare07
    @jcare07 2 года назад

    Excelente!