#2 AJAX con JavaScript | Leer archivo JSON y pintar datos en TABLA HTML
Вставка
- Опубліковано 4 вер 2018
- En este video tutorial de AJAX veremos como leer un archivo externo JSON y plasmarlo en una tabla en nuestra página web, de apoco estamos subiendo el nivel en este curso de Javascript.
Información utilizada: www.w3schools.com/js/js_ajax_...
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 👌 Discord: / discord Mi Setup:
⭐️ Teclado Mecánico: amzn.to/3Ns6fdK
⭐️ Audífonos: amzn.to/3pwrzqt
⭐️ Micrófono: amzn.to/3JH4tV7
⭐️ Monitor: amzn.to/3NTt8Iu
⭐️ Procesador: amzn.to/3raD4EC
⭐️ Tarjeta de Video: amzn.to/437t78b
Haces ver las cosas tan sencillas, Muy agradecido con tus aportaciones, MILLONES DE GRACIAS. Trabajo con C# y con esto hago hasta lo que ni imaginado!.
Loco, sos muy crack. Estaba realmente nublado y desamparado con el ejercicio, y transmitís muchísima paz y claridad con tu explicación, súper dedicada!
Mil gracias, tome su like y su follow.
despues de 4 años aun sigue funcionando a la perfeccion! muchas gracias, me salvaste de mi proyecto final
¡Eres el mejor! En serio te amo ♡ me pasé más de 6 horas corridas viendo tus vídeos, hice el curso de introducción a la programación y este de JavaScrip desde 0. ♡.♡
De verdad muchas gracias Ignacio. Soy maquetador web (HTML & CSS) y bueno aprendiendo Javascript, este tuto me ha sido de mucha utilidad. No conocia tu propuesta, tienes muchas cosas interesantes.
Agradecido la verdad.
Saludos!!!
Este tipo tiene una manera de explicar que hace que tod parezca super facil, muchas gracias amigo!!!
Muchísimas gracias por tu video tutorial, me encantó, era justo la solución que buscaba, nunca dejes de compartir tu contenido :)
Muchas gracias! estoy arrancando con AJAX y este ejemplo sencillo facilta mucho las cosas!
Me encanta tu manera de explicar, haces mucho mas ameno un video de programacion de 16 minutos, eso para mi es un gran logro jaja. Sigue asi!! saludos.
Jo muy bien explicado y de una manera super clara y sencilla. Muchas gracias bro!
Que video tan bueno y breve, muchas gracias!
Son muy geniales tus videos, muchas gracias!!
Me ha servido mucho tu video, grande!
Gracias ^^ me encantó el video, esta super claro y sencillo.
MUy buen tutorial. Muy claro! Abrazo grande!
dias tratando de leer un fokin json, y nada habia servido, hasta que veo el video de este CRACK, no soy de dejar comentarios, pero lo mereces ;)
Dios te bendiga por tu gran aporte.
Como siempre una calidad tus tutoriales . Saludos!
Gracias! :)
Excelente tutorial compadre!!!
Sos un capo! te amo
me parecio muy interesante!. La verdad nunca habia hecho esto y estoy a la espera de mas contenido! saludos :D
Genial! preparo la documentación y subo otro video :) Saludos!
Excelente explicación!!!
Muchas gracias, no es broma, he visto cientos de tutoriales sobre este tema, aparte de leer documentación que soy pésimo en eso, y en ningún lado absolutamente en ningún lado lo explican tan bien, añades detalles que me parecen muy importantes y en otros lados no tienen en cuenta, mil gracias, por que en mi caso es para trabajar en un proyecto.
Estoy empezando en este apasionante oficio (aun que llevo ya muchos años estudiando) por lo que si consigo que me llegue un cheque gracias a ese proyecto donde tengo que trabajar precisamente con esto, bueno...te lo agradeceré de otra forma 🤑 mil gracias!!!
me estaba volviendo loco viendo tutoriales xD esas comillas no me resultan igual !!! y en este video llego dios y dijo... son comillas especiales jajaja y me hizo ver la luz.
Hola se podría sustituir el botón por un una etiqueta que este dentro de una barra de navegación para hacer la acción
Muchas gracias me salvaste de nuevo!!!!!! Like
muchas gracias por la información
Excelente, mil gracias
Me ayudó mucho. Gracias
Excelente!!!
gracias, me sirvio bastante el video
Excelente vídeo, muchas gracias por compartir sus conocimientos!! Saludos desde Venezuela.
Saludos Gustavo! :)
gracias, por el tutorial
Que belleza esto, por qué no lo estudie antes, por qué, pero por qué?
Muy buena tu clase
gracias me sirvio mucho
muchas gracias!!!
bro y como hago para en ves de darle la url de un archivo le entrege una funcion que me devuelve un JSON? en este caso es una funcion en python con django
gracias papu , me ayudó mucho
menos mal que a hora existe el fetch() y promesas :) saludos bluuweb
Gracias!
hola como estas, buen tutorial, una consulta para mostrarlo en un formulario html como entrada de datos, es decir desde el input ingreso el codigo y de ahi va al php y hace la consulta y llena el json, luego en el javascript quiero leer el json y poner solo la descripcion, cantidad y el stock y luego seguir llenando los demas datos de forma manual yluego grabar. tendras algun ejemplo.
buenas buenas excelente video
Buen video, Tengo una duda! Si el objeto json que se va a pintar en la tabla es muy extenso (millones de objetos devueltos desde una base de datos) como seria la metodologia a seguir para pintarlos en la tabla Html?
Excelentes videos, no te atreverias a sacar un curso de seo?
Buenisimo tutorial, eso de materialize está genial, muchas gracias.
Tengo la duda de si se puede que al oprimir nuevamente el boton para dejar de ver la tabla, se puede?
espero me respondas, muchas gracias nuevamente.
Muy bueno
Excelente
Gracias Maestro Shileeenoooo!!!
😋😋😋😋
Que chingon
GRACIASSSSS
buen video, tengo una duda con carga de datos enormes, esos datos los filtro con jquery, pero cuando llamo a los items los llamo con php el tema que la pagina queda esperando a que termine de cargar todos los items y cuando termina de cargar los filtra, le progrma es que se demora, existe alguna forma de hacerlo, seria genial. saludos.
Muchas gracias! Me ha servido mucho. Saludos desde El Salvador.
Hola, tengo este error en la consola, Uncaught TypeError: datos is not iterable
at XMLHttpRequest.xhttp.onreadystatechange que sera? lo tengo igual que el tuyo, pero use un link en vez de el .json que usaste tu, ya que me pidieron consumir un servicio web, que tambien es json
Muy bien explicado. Lo único que en vez de el xhttp.onreadystatechange, me he encontrado el xhr.onload = function() {...} antes del send. En teoría tiene exactamente la misma función, ya que ahí adentro metemos lo que haga falta e incluso la verificación del status ==200. Pero me gustaría saber la diferencia concreta entre ambas formas, para que casos y cuales son los Pros y contras de usar un método con respecto al otro. Gracias.
Seguí los pasos, ya revise todo el código pero no me muestra ningún dato. ¿Qué podrá estar fallando?
Como podria conectar eso a MONGO DB? que carte el json y se rellene la tabla y la cargue a mongo ? gracias excelente tutorial.
Hola @Bluuweb
mi consola me muestra el siguiente error: document is not defined... .Gracias muy buen vídeo!
Hola, para insertar datos a un JSON como seria ?
Hola amigo tienes algún tutorial para guardar los datos de un formulario en un archivo json
Hola que tal espero tengas tiempo de leer este comentario.
Quiero guardar datos en un archivo json de forma permanente. Se puede guardar datos en json de forma permanente?
Ya que si hago un push se agregan datos pero al actualizar la pagina pues esos datos agregados ya no son visibles.
Es el primer video de tu canal que veo, el primero de muchos, saludos
Buenas, pero si yo quisiera que solo se pinte lo que ingreso en un input como lo filtro?
Tengo una pregunta, se puede insertar datos en json?
Hola, es json se podría traer des una consulta a una base datos?
Chao.
Hola, a ver si alguien puede resolverme una duda... se considera "buena practica" insertar etiquetas HTML en JS?. Lo pienso en el sentido que se mezcla el codigo y si se alarga el JS tendrias varias incrustraciones. Muchas gracias!.
Saludos me podría ayudar con un video con esta información Diseñar una página web que consuma los datos de CouchDB mediante el uso de AJAX usando la librería Jquery en una sola hoja de html.
Hola estimado, seria interesante un video, donde convertir registros de un archivo de Excel a JSON, y estos mostrarlo en un DataTable (también puede ser en vez de DataTable que se arme una tabla de registros con html) que este vinculado a unos Graficos, al interactuar con el filtro del DataTable estos también hagan que se modifique en los Gráficos. Ojala Ud. pueda hacer ese video
Hola Bluuweb me sale este error en consola SyntaxError: JSON.parse: expected ':' after property name in object at line 3 column 12 of the JSON data como lo soluciono es al momento de obtener el array Gracias
Jamas te contesto ...no hay esperanzas entonces
Hola, por qué me sale el siguiente error: Access to XMLHttpRequest at 'catalogo.json' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.???
tenes un ejemplo tomando un json generado despues de una consulta a la base?
ah profe una consulta, cuando intento iterar el json(datos) me dice que no es iterable :'c hice la conversion de texto a json luego la mostre por consola y si me mostro el objeto, sabe a que se debe?
compa, su json tiene un solo objeto, agregue mas para que sea iterable saludos
querySelector es equivalente a getElementById ?
buenas, ¿es posible pintar un carrusel con imágenes?
Sr he copiado el código tal cual la explicación y da el mje AJAX_leer_JSON.html:20 Uncaught TypeError: loadDoc is not a function
at HTMLButtonElement.onclick (AJAX_leer_JSON.html:20), no se que es?, gracias
Que buena, apenas comence a ver tus vídeos y son muy buenos!! Enseñarás como mandar/traer datos de una BD con Ajax? O algo parecido? :)
Encontraste como hacerlo, necesito jalar todo una tabla de sql a un table en html
@@JA-cn2gk si amigo, busca la funciona fetch para javascript
Gracias amigo!
hola, a mi me resulto con esta expresión para poner la tabla;
res.innerHTML += "" + datos[i].titulo + "" + datos[i].autor + "
Holaaaa, sigo los pasos y me sale esto:
"Uncaught TypeError: datos is not iterable
at XMLHttpRequest.peticion.onreadystatechange (top-listen.js:14)" Por què? :( Gracias por compartir!!
Me ha funcionado correctamente pero los datos del JSON me los pone con caracteres especiales cuando hay tildes, ¿cómo se soluciona?
Parabéns
no me ejecuta la función traerDatos() me dice por consola
Uncaught TypeError: document.querySelector(...) is null
Si el json no estuviera en la misma carpeta que el index, como hago para que funcione?
Hola, Estoy empezando a programar en JavaScript utilizando el IDE Sublime Text, me gustaria saber como activar el autocodigo al momento de escribir en una archivo.js , gracias
utilice visual studio code.
y si para guardar objetos en un archivo json?
Hola Ignacio, tengo el siguiente error: Solicitud de origen cruzado bloqueada: La misma política de origen no permite la lectura de recursos remotos en file:///D:/Desarrollo%20C%23/Pruebas%20Json/catalogo.json. (Razón: Solicitud CORS no http). Cómo lo soluciono?, gracias
Solucionado, no estaba corriendo el Live Server
Hola una consulta Luego de pasarlo a formato json con JSON.parse() quiero hacer el for of y me sale el error de que datos no es iterable ...Estoy haciendo todo exactamente igual no se por que a mi me sale ese error
Cuantos objetos creaste en tu archivo json??
2022(marzo) no funciona la lectura de archivos locales en AJAX, tira error 404
Por qué no usaste await y async??
Hola Bluu, una pregunta porque en el vídeo de AJAX#1, al obtener el evento del click del button en la función no pusiste (), ejemplo addEventListener('click', traerdatos), y en el vídeo de AJAX#2 en esa misma línea llamas a la función con los (), addEventListener('click', traerdatos()), es indiferente??
Otra pregunta, si ya tengo muchos datos en varios ficheros JSON y kiero consumirlo con AJAX, debería crear una API donde estén estos datos y desde hay consumir los datos con AJAX ??
y si quiero llamar a un json desde un servidor como lo haría? porque aqui lo llamas de manera local
Hola, epsero me peudas respodner al momento de dar el primer vistaso al documento(llegando al min 9:09) no me muestra en documento, de hehco me sale este error (Access to XMLHttpRequest at 'file:///C:/Users/asd/Desktop/ENDPOINR/endpoint' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.) espero me peudas ayudar
hola emanuel. a mi tambien me sale el mismo error. lo pudiste solucionar?
Hola, quería ayuda con mi proyecto ya que me da el siguiente error: ajax2.js:3 Uncaught TypeError: Cannot read property 'addEventListener' of null
me pasa exactamente lo mismo
probablemente "" se este ejecutando antes que el propio html, por ello lo entiende como null. Para solucionarlo pon el script al final del body.
en el tienes puesto el id="boton"??
Gracias por seguir subiendo contenido Ignacio, una pregunta: Podrías hacer un tutorial o al menos tomar en consideración hacer una especie de sistema de notificaciones tipo facebook? es decir que por ejemplo cada que exista un cambio en la base de datos, este de una notificación a las personas de que: "Oye ha ocurrido un cambio", "Oye alguien subió una foto" o algo así, no se si puedas entender mi vaga explicación jeje, un abrazo
Si entiendo, voy a tener que ver como se hace eso si jijiji saludos!
Te lo agradecería un montón, según lo que he leído se usa Ajax para eso
me salta error de CORS no puede enlazar al archivo json
me pueden decir por favor cuales son las comillas especiales he trabajado con ' '' ´ y no me funciiona
Hola Ctrl+Alt+} y luego presiona espacio...me funciona a mi en windows ( ` ` ` ) saludos
@@sergiohernanojedapeletti8838 muchas gracias la verdad que me puse a ver todos los ascii hasta que lo encontré como después de 3 horas... muchas gracias por responder.
Alt + 96
el metodo let item for dato no me funciono, busque el error y la solucion fue: for(let item of Object.keys(datos)){
console.log(datos.name);
}
gracias por salvarme el trabajo
en la linea 3 me marca error en consola
Me encanto tu video, sin embargo tengo este problema, ¿sabes como solucionarlo?
Solicitud desde otro origen bloqueada: la política de mismo origen impide leer el recurso remoto en file:///C:/Users/USUARIO./......./chihuahua.json (razón: la solicitud CORS no es http)
eso ocurre en chrome si no tienes un servidor inicializado como apache
Habra un video para pintar datos de una base de datos en un html que no es necesariamente una tabla, es decir al cargar la pagina me muestre la información. Saludos
¿Qué se puede hacer para resolver el error de CORs que provoca la función xhttp.send()?
Si codeas en VSC, te descargas la extension "Live Server". Despues al abrir el html de VSC seleccionas "Open with Live Server" y listo
@@ThePaco1995 sos un capo
Tengo este error: "Access to XMLHttpRequest at 'file:///************data.json?v1' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https."
Alguien sabe como resolverla?
Gracias
me pasa lo mismo, sabes como puedo solucionarlo???
@@solucionesjava6948 Ya lo pude solucionar, pero no recuerdo muy bien como lo hice jaja, me parece que tiene que ver con que lo estas trabajando en local, intenta probar pero en un servidor local (XAMPP por ejemplo).
Buen video, te pregunto, que ventajas o desventajas hay en usar un querySelector en vez de un getElementBy?
Ninguna. Son diferentes formas de capturar. En getElementById solo capturas un elemento, y con querySelector tienes la posibilidad de capturar no solo un elemento sino varios y generar un array. Depende de lo que quieras hacer.
@@osmeig6025 gracias amigo!!!
Buena pregunta! jiji en general yo utilizo los dos (no sé si porque mi cerebro está dañado pero aveces me acuerdo de uno o de otro jaja), ahora en cuanto a sus características sé que queryselector es más reciente por ende podría existir algún navegador basura que no lo reconozca, pero hoy en día creo que es poco probable. Busqué ademas info adicional y me encuentro con bastantes debates jajaja pero no una respuesta clara... algunos dices que es más lento (hablando en mili-segundos), que es menos específico, etc. Espero que alguien de más opiniones y así encontrar la mejor solución :) Saludos!
👍🏽👍🏽👍🏽👍🏽👍🏽genial!!
@@bluuweb amigo a mi el queryselector no me funciona me ejecuta el .js sin haber dado click a que sera debido?