Perfekt danke dir. Ich habe 2 Tagelang mein Kopfzerbrechen weil mein Dumme Dozent es nicht hin kriegt Sachen richtig zu erklären. Du bist Super mach weiter soo. 👌. 100 Punkte 🤝
Bin vor einigen Tagen auf deinen Kanal gestoßen, weil ich Hilfe zu Bootstrap gesucht habe. Ich bin selbst Web-Entwickler, aber man lernt nie aus. Habe dich direkt abonniert! Deine ruhige Art Dinge zu erklären, finde ich echt sehr angenehm, dazu dein mir sehr vertrauter Dialekt xD Finde, du hast noch viel mehr Abos verdient! Vor allem, weil du alles sehr einfach und simpel erklärst.
Guddn dach Kollege ;) Vielen Dank für das Lob. Der Irrsinn dieser Welt dreht sich eh schon schnell genug, da nehme ich mir gerne die Zeit etwas in Ruhe zu zeigen bzw. zu erklären. Un nu erschtma dä Gehgs in dä Käff eindiddschn xD
@@ProgrammierenMario die ruhige Art ist echt Dein Trumpf. Ja, die Welt dreht sich schnell. Da ich schon 56 Lenze zähle dreht sich diese irgendwie noch schneller. Überlege immer mal ob ich mir nicht mal ein eigens CMS programmiere... Weiß nicht ob ich bis zur Rente fertig werde. :-) derzeit reicht für mich beruflich Wordpress aus, aber spannend ist das nicht. Wäre das mal ein Projekt für Dich auf diesem Kanal. Ansonsten Danke für Deinen immer wieder interessanten und kurzweiligen Content.
Hallo Ralf, ein CMS zu programmieren ist ziemlich umfangreich und ich glaube nicht das ich das in einem Video schaffe 😂 Bin zudem kein Freund von endlosen Videoreihen 🤷♂️
@@ProgrammierenMario ja, das würde den Rahmen sprengen. Bin seit 17 Jahren selbständig im IT Bereich aber nur mit mir selber. Also keine Mitarbeiter… da wird so ein Projekt einfach zu groß und lohnt nicht wirklich. Aber schöööön wäre es schon.😀😅
Wahnsinn! Super Video. Ich fand die Anwendung eines Fetches im Zusammenhang mit diesem Praxisbeispiel sehr anschaulich und gut zu verstehen. Weiter so!
Ganz lieben Dank für dein Lob und Feedback! Ein Json Tutorial ist schon auf meiner Liste, bin mir aber noch nicht über dessen genauen Inhalt im klaren. Ist ein eher trockenes Thema... mal schauen ;)
tip top, wie immer.....vielen Dank für die Einführung mit so beiläufiger Leichtigkeit. Das nimmt immer wieder den Bammel, wenn man sich neuen Themen nähert....😀
Hallo Mario, Jason-Dateien und auch Templates waren für mich Neuland - du hast das Thema sehr gut aufbereitet, und ich werde diese Möglichkeiten jetzt auch ausprobieren. Vielen Dank für das gelungene Video. Herbert
Danke Mario, wieder mal ein kurzes gutes Tutorial. Damals habe ich mit XMLHttpRequest gearbeitet, oder jQuery übernahm das, gab ja nichts anderes, aber fetch gefällt mir deutlich besser.
Wie immer sehr interessant erklärt. Habe mir Mal ne einfache API geschrieben die mir 100 random Einträge als json zurückgibt. Funktioniert auch damit sehr gut.
Danke für die tolle Erklärung. Du erklärst sehr ruhig und verständlich. Eine Frage, kann man diese Jason Datei auch per HTML (Javascript) Eingabeformular beschreiben? Neue Datensätze anlegen in der Jason Datei?
Mit JavaScript hat man aus Sicherheitsgründen keinen direkten Zugriff auf Dateien. Also nein. Die Daten aus einem Eingabeformular müssten an ein Backend/Server geschickt werden wo man bspw. mit PHP oder Node.js die Daten dann in Dateien oder in eine Datenbank speichern kann.
Moin Mario, schönes Video, gut erklärt. Was ist aber wenn die json etwas komplexer ist? Wenn die Lister deiner Namen nur Bestandteil von einem Objekt z.B. "Members" ist? {"members": [{"fullname": "Steffen Spider"}, {"fullname": "Ruth Rechte"}]}
Hallo Mario, ich habe mich jetzt mit deinem Video mit fetch frontendseitig eingearbeitet und würde gern in Netlify mithilfe ServerlessFunctions eine Api bauen wo ich ein JSON File laden und auch ändern kann. Geht das?
Hi, soweit mir bekannt kannst du mit den Serverless Functions JSON als Response zurückgeben. Ob du damit auch direkt Dateien schreiben und beschreiben kannst weiß ich leider nicht. Vllt. fragst du da direkt mal beim Netlify support an.
Vielen Dank für dieses Video. Informativ wie alle. Aber eine Frage: Ich bekomme ein "Access to fetch" Fehler, wenn ich eine json von einem Webserver abrufe. Kannst Du da helfen?
Klingt nach CORS. Der Server erlaubt keine Anfragen von Ressourcen einer abweichenden Domain. Das muss beim Server eingestellt werden bzw. der API welche die Ressourcen zur Verfügung stellt. In diesem Video bin ich mal darauf eingegangen --> ua-cam.com/video/uOE1aqyzq_w/v-deo.html Ab Minute 32 ca. Aber ich empfehle dir alles anzuschauen wegen dem Zusammenhang.
Hallo Mario, Ich habe das so nachgebaut, aber die Texte werden nicht angezeigt nur die Bilder. Hast du link für die Dateien zum download. Bin Anfänger, wird sehr helfen beim Fehler finden. Du bist, der beste machst das echt gut
Hi Mario, Ich finde deine Videos echt super. Allerdings habe ich mit diesem Turorial Probleme. bei mir wird als Übergabewert von fetch ein http wert erwartet. Ich bekomme die Fehlermeldung CORS Anfrage war nicht http. Weißt du was ich falsch mache? mit freundlichen Grüßen Nico
Vielen Dank! CORS bedeutet Cross-Origin Resource Sharing und regelt die Zugriffe zwischen unterschiedlichen Domains(Origin). Normalerweise ist dies aus Sicherheitsgründen nicht erlaubt und muss erstmal explizit beim Web Server/Service aktiviert werden, sodass es erlaubt ist das ein Client von einer anderen Domain(Origin) aus auf Ressourcen zugreifen darf. Zudem sollte dieser Zugriff immer über HTTPS laufen. Deswegen vermutlich dein Fehler. Wenn du das bei dir Lokal erstmal nur testen willst mit Fetch etwas zu holen, dann empfehle ich dir die Live Server Extension für VS Code zu verwenden und damit deine Website anzuschauen. Und dann wie im Video es mal nur so zu testen. Somit laufen die Zugriffe unter der selben Domain(localhost) und der CORS Fehler tritt somit nicht auf. Hoffe das hilft dir erstmal weiter.
Danke Mario und noch eine Frage, wenn ich mit Fetch() keine json-Datei sondern csv-Datei abgerufen habe, in der x-y Werte (Temperatur-Daten) drinstehen, wie kann ich die dann als Plot in mein HTML-Dokument anzeigen?
Statt mit response.json() kannst du response.text() verwenden. z.B. fetch('sample-url.csv') .then((response) => response.text()) .then((data) => console.log(data)); Je nach Trennzeichen welche du in der CSV verwendest könntest du das ganze noch aufsplitten.
Hi, der Fetch geht ja nur lokal, wenn ein Server läuft oder? Zweite Frage wäre: Ich stelle eine Anfrage an ein anderes Programm auf dem Rechner: Hier der code: fetch('localhost:8080/rest/1/projects/EnergieMonitoring/onlinevalues/.json?value=27;PowerActive;SUM13',{mode:'no-cors'}) .then((response) => { console.log(response); return response.json(); }) .then((MyData) => { console.log(MyData); }); habe mode:-no-cors gesetzt, da ich zuerst dies als Fehlermeldung bekommen hatte. nun bekomme ich dies zurück gemeldet: script.js:426 Uncaught (in promise) SyntaxError: Unexpected end of input at script.js:426 Zeile 426 ist da, wo ich response.json() aufrufe. die response.ok ist false. was ist hier denn noch zu beachten?
Sorry, hatte den Kommentar bisher übersehen. Es gibt da viele Möglichkeiten woran das liegen könnte. Ich hatte im Tutorial ja die fetch funktion nur angerissen. Es gibt verschiedenste Optionen die du setzen kannst bzw. auch unterschiedliche Möglichkeiten Daten zu senden. Wie du das letztendlich machen musst hängt stark von der API ab, wie diese die Daten erwartet. Es ist nochmal ein ausführlicheres Tutorial über das Thema geplant. Unterdessen hilft dir vllt. das hier weiter: developers.google.com/web/updates/2015/03/introduction-to-fetch#fetch Du könntest mit catch erstmal den Fehler abfangen und ausgeben um ggf. näheres herauszufinden.
wie wäre es eigentlich wenn du mal eine Tutorial reihe machst wie ""der Weg zum Web Developer? Da passen deine Tutorials sicher gut rein, wenn sie strukturiert in einer Playlist sind. Für mich bist du ein super Lehrer, aber es fehlt mir eine komplette Serie
Danke fürs Video 🙂 Ich finde das mit dem Clonen einfacher als jedes Element einzeln mit Javascript zu erstellen. Aber ich hätte da mal eine Frage. Habe jetzt noch ein bisschen rum getestet und diesmal ein ein div zum Klonen benutzt. Hier kam dann die Fehlermeldung Cannot read properties of undefined (reading 'cloneNode'). Es klappte als ich nur .cloneNode(true) geschrieben habe. also ohne content. Warum ist das so?
Hallo Peter, mit der funktion .cloneNode macht du eine Kopie von dem template, sodass du nicht das ursprüngliche verwendest und da deinen Inhalt reinsetzt. Ziel ist es das das original Template für später immer erhalten bleibt. Der Parameter true gibt an ob du auch alle Kindelemente mit kopieren möchtest. Hoffe das hilft erstmal weiter :)
Also ich bin mit diesem fetch noch am verzweifeln. Kann man den direkt nutzen, oder muss man den über nem install Node-fetch installieren? Habe in einem anderen Video gesehen, dass jemand mit Express einen Webserver erstellt hat und dann fetch installiert hat und mit: Import fetch from „Node-fetch“ importiert hat. Bei mir kommt dann der Fehler, dass der Import mit „./„ beginnen soll. Stehe auf dem Schlauch. Wann kann man fetch nutzen? Auch ohne install ?
fetch kannst du client-seitig ohne Installation mit JavaScript jederzeit verwenden. Für Node.js welches eine Laufzeitumgebung für JavaScript ist welches Backend/Serverseitig läuft ist fetch out-of-the-box nicht mit dabei und muss installiert werden. Du musst hier grundlegend zwischen dem JavaScript im Client/Browser und Node.js unterscheiden.
@@ProgrammierenMario ah ok, danke. Denke ich habe es verstanden. Verstehe nur nicht, warum in einigen Videos einfach Anfragen an bspw. Eine Datei gemacht werden können und bei mir wird das geblockt.
@@ProgrammierenMario Habe jetzt eine Fetch Anfrage in meinem Client Projekt erstell, die kommt mit dem promise.ok = false zurück. Gebe ich den gleichen fetch in der Server Anwendung ein, oder direkt in der Browser adtesszeile ist alles in Ordnung.
Hi Mario, gibt es denn auch eine Möglichkeit, Daten von Javascript zu exportieren? ich würde gerne mit Javascript eine Visualisierung bauen, die mit meinem raspberry pi (python) kommuniziert und dazu bräuchte ich so ne Art Datenbaustein
Hallo Nico, mit JavaScript kannst du Daten z.B. an ein Backend schicken, welches dein Raspberry Pi (Python) sein kann. Das kannst du ebenfalls mit fetch machen. Damit lassen sich Daten abschicken und wieder empfangen. Hier findest du ein Beispiel per POST request --> javascript.info/fetch#post-requests
@@ProgrammierenMarioi Mario, ich habe mittlerweile alles versucht und es klappt immer noch nicht.. naja, wenn du mal Stoff für neue Videos brauchst würde es mich freuen, mal ein Video zu sehen wie man so eine Kommunikation zwischen python und Javascript aufbaut, um Jawascript als Visualisierung zu nutzen. finde deine videos echt super:)
Hey Mario, wenn ich einen fetch absetze, bezieht sich dann die url auf den Server auf dem die Anwendung läuft, oder auf den Client der diese aufruft? Ich habe es mit einer JSON Datei versucht die lokal liegt….. das funktionierte auch, wenn ich mit zwei verschiedenen Rechnern drauf zugreife. Komischerweise geht es nicht, wenn ich über Lokalgeist zugreife. Wie ist es denn jetzt? Ist die url abhängig vom oder wo die Anwendung liegt und damit sollte Lokalgeist möglich sein? (Auch wenn der blockiert wird)?
@@ProgrammierenMario Hi, hatte mich vielleicht falsch ausgedrückt: wenn ich eine Datei angebe bspw. fetch("datei.txt") dann bezieht dich das auf den server, oder? also er würde dann hier suchen: domain/datei.txt.Richtig? Meine Frage ist nun nur noch, warum kann ich wenn ich mit express einen webserver erstelle (welche bspw.auf port 3000 läuft) dann einen fetch zu einem server auf port 8080 erfolgreich absetzen und wenn ich von einem browser heraus das gleiche mache geht es nicht. Sind doch auch zwei unterschiedliche server, das schnalle ich noch nicht so recht.
@@ProgrammierenMario Ja. Also ich habe jetzt gelesen: Browser = client => SOP ud CORS aktiv. Express = Server => Keine CORS und SOP prüfung aktiv. Stimmt das? Wurde so erklärt: fetch anfrage != Browser origin => SOP greiftund stellt anfrage an den server nach CORS Header. Stimmen diese nicht mit der eigenen überein => Blockiert.
Falls bei dir serverseitig gesperrt ist das eine Anfrage von einer anderen Domain erfolgen darf, dann müsstest du dies explizit erlauben. Wenn du Express verwendest kannst du hier mal reinschauen --> expressjs.com/en/resources/middleware/cors.html
mal ne anfängerfrage: wenn ich bei der ressource eine webadresse reinpacke hab ich zwar daten, aber es findet keine aktualisierung statt. hierzu müsste man noch eine api anzapfen richtig? vllt kann man sowas in einem tutorial noch zeigen...
Hi Robert, du musst dann die Daten selbstständig auf der Seite aktualisieren. Wie du das machst dazu habe ich noch extra ein Tutorial gemacht --> ua-cam.com/video/tdglfPMwGFU/v-deo.html
@@ProgrammierenMario dann hab ich es falsch verstanden. mir ging es um das reine aktualisieren, in dem verlinkten video geht es ja lediglich um die ausgabe.
Wenn du einen bestimmten Inhalt aktualisieren möchtest dann kannst du es ja mit der normalen Ausgabe für das entsprechende Element überschreiben. Somit aktualisierst du es ja ;)
@@ProgrammierenMario Nee, ich ruf die Daten doch von woanders ab, deshalb ja der Request. Wenn sich dort die Datensätze ändern, müsste ja regelmäßig (Cronjob) die Abfrage bzw. der Request neu gestartet werden. Das hätte man im Video noch erwähnen bzw. zeigen können.
Du kannst dir die HTML Datei ebenfalls mit fetch holen. An den HTML Code kommst du dann mit response.text() Dies ist dann aber ein String. Wenn du ein Document Object haben willst musst du es parsen, z.B. var parser = new DOMParser(); var doc = parser.parseFromString(html, 'text/html'); Danach kannst du das Template ganz normal selektieren und verwenden.
Natürlich! Du kannst ja auch mal hier reinschauen, falls du es noch nicht gesehen hast --> ua-cam.com/video/uOE1aqyzq_w/v-deo.html Da zeige ich wie du Formulardaten an ein Backend senden kannst, inkl. Dateiupload
@@ProgrammierenMario Hey Mario, das is super für mich um neue Benutzer an zulegen. Jetzt frage ich mich aber folgendes. Ich habe zb 10 Personen in meiner .json die ich an verschiedene HTML container verteilen möchte, wenn die erste Person jetzt zugewiesen wurde. Hatte ich mir überlegt ihr einen Schlüssel+wert paar zugeben mit "Zugewiese": true/oder false wie erkläre ich js den Boolean zu ändern damit die Person nicht doppelt zugewiesen wird? Mach ich das wenn ich noch im fetch("GET").then() bin? Oder fetch ich neu mit post(). Danke Mario
@@ProgrammierenMario werde ich nochmal versuchen…. Aber wie macht man das mit den Templates, wenn man mehrere Links hat, welche js Functions ausführen sollen? Mit setattribute?
bzgl der Links würde ich ganz normale anker tags im template verwenden und dann wie beim Bild anstelle das src dann das href attribut setzen. Wenn du onclick events setzen möchtest kannst du das attribut natürlich auch so setzen oder du machst das über eventListener. Intellisense funktioniert bei mir auch nicht immer zu 100% ;)
@@ProgrammierenMario OK. ist natürlich für Anfängeer blöd mit den falschen Intellisens anzeigen. Auch, dass Variablen angezeigt werden, die in dem jeweiligen Klasse gar nicht zur Verfügung stehen.
Da könntest du in CSS Flexbox verwenden --> ua-cam.com/video/JNqDBHGbAKQ/v-deo.html In diesem Beispiel werden zwar Bilder und keine Cards verwendet, funktioniert aber im Grunde mit jedem Element.
mytemp.querySelector(".table-description").innerHTML = "ABC"; mytemp.querySelector(".table-value").innerHTML = "DEF"; mytemp.querySelector(".table-unit").innerHTML = "HIJ"; myrow.appendChild(mytemp); myrow.appendChild(mytemp); myrow.appendChild(mytemp); es liegt jetzt nur eine neue zeile auf der seite und diese ist auch noch über der Tabelle, wie kommt das? Edit: die mehrfachhinzufügung konnte ich durch ne schleife lösen. Anscheinen kann man auf die variable myrow nur einmal appendChild anwenden? Aber warum liegen die Werte über der Tabelle?
Rein von der HTML Struktur her ist das div in der Tabelle fehlplatziert. Eigentlich brauchst du es auch nicht unbedingt. du könntest direkt alle Elemente tbody zuweisen. Also die id myinput in das tbody tag setzen und dann mit appendChild die neuen Elemente reinsetzen. Bei appendChild werden keine Elemente überschrieben. Es wird immer ein neues am Ende aller Kindelemente gesetzt. Das div könnte auch der Grund sein warum es nicht korrekt angezeigt wird. ;)
Perfekt danke dir. Ich habe 2 Tagelang mein Kopfzerbrechen weil mein Dumme Dozent es nicht hin kriegt Sachen richtig zu erklären. Du bist Super mach weiter soo. 👌. 100 Punkte 🤝
Ja das ist leider ein Problem. Freut mich das ich dir weiterhelfen konnte 👍
Mario, sauge gerade deine Videos auf, wunderschön, ruhig und verständlich erklärt toll, dass du dir so viel Arbeit machst.
Weiter so.
Hallo Peter, vielen Dank für das Lob und das du wieder reingeschaut hast...Grüße ;)
Grandios, Mario. Grandios! Bin begeistert von deiner transparenten Darstellung des Ganzen! Weiter so!!!
Freut mich zu lesen. Vielen herzlichen Dank für dein Feedback!
verständlich, ruhig und nur das wichtige vermittelt, toller Vortrag und Lehrgang. und sehr zu empfehlen
Vielen Dank ✌️🙂
Bin vor einigen Tagen auf deinen Kanal gestoßen, weil ich Hilfe zu Bootstrap gesucht habe. Ich bin selbst Web-Entwickler, aber man lernt nie aus. Habe dich direkt abonniert! Deine ruhige Art Dinge zu erklären, finde ich echt sehr angenehm, dazu dein mir sehr vertrauter Dialekt xD Finde, du hast noch viel mehr Abos verdient! Vor allem, weil du alles sehr einfach und simpel erklärst.
Guddn dach Kollege ;)
Vielen Dank für das Lob. Der Irrsinn dieser Welt dreht sich eh schon schnell genug, da nehme ich mir gerne die Zeit etwas in Ruhe zu zeigen bzw. zu erklären.
Un nu erschtma dä Gehgs in dä Käff eindiddschn xD
@@ProgrammierenMario die ruhige Art ist echt Dein Trumpf. Ja, die Welt dreht sich schnell. Da ich schon 56 Lenze zähle dreht sich diese irgendwie noch schneller. Überlege immer mal ob ich mir nicht mal ein eigens CMS programmiere... Weiß nicht ob ich bis zur Rente fertig werde. :-) derzeit reicht für mich beruflich Wordpress aus, aber spannend ist das nicht. Wäre das mal ein Projekt für Dich auf diesem Kanal. Ansonsten Danke für Deinen immer wieder interessanten und kurzweiligen Content.
Hallo Ralf, ein CMS zu programmieren ist ziemlich umfangreich und ich glaube nicht das ich das in einem Video schaffe 😂
Bin zudem kein Freund von endlosen Videoreihen 🤷♂️
@@ProgrammierenMario ja, das würde den Rahmen sprengen. Bin seit 17 Jahren selbständig im IT Bereich aber nur mit mir selber. Also keine Mitarbeiter… da wird so ein Projekt einfach zu groß und lohnt nicht wirklich. Aber schöööön wäre es schon.😀😅
Ich finde deine Videos super. Unglaublich deine ruhige Art Dinge zu erklären, finde ich echt sehr angenehm. 🖥
Vielen Dank für deine zahlreichen Kommentare und dein Feedback. ✌️🙂
Super! 🤣 "Fetch"-Kompensator!!! (15:00 Min.) Danke. Wieder alles prima erklärt.😄
Na den Begriff muss ich mir unbedingt merken 😁
Wahnsinn! Super Video. Ich fand die Anwendung eines Fetches im Zusammenhang mit diesem Praxisbeispiel sehr anschaulich und gut zu verstehen. Weiter so!
Vielen Dank für dein Feedback! Freut mich sehr ✌️
Huhu .... Ich musste so Lachen
Ganz lieben Dank für dein Lob und Feedback! Ein Json Tutorial ist schon auf meiner Liste, bin mir aber noch nicht über dessen genauen Inhalt im klaren. Ist ein eher trockenes Thema... mal schauen ;)
tip top, wie immer.....vielen Dank für die Einführung mit so beiläufiger Leichtigkeit. Das nimmt immer wieder den Bammel, wenn man sich neuen Themen nähert....😀
Immer wieder gerne! Freut mich sehr :)
Hallo Mario,
Jason-Dateien und auch Templates waren für mich Neuland - du hast das Thema sehr gut aufbereitet, und ich werde diese Möglichkeiten jetzt auch ausprobieren. Vielen Dank für das gelungene Video.
Herbert
Freut mich das es dir geholfen hat und vielen Dank für dein Feedback.
Viel Glück und Spaß beim ausprobieren ;)
Danke Mario, wieder mal ein kurzes gutes Tutorial. Damals habe ich mit XMLHttpRequest gearbeitet, oder jQuery übernahm das, gab ja nichts anderes, aber fetch gefällt mir deutlich besser.
wie immer, tolles Thema => prima erklärt😁. Vielen Dank Mario
Gerne 😀
Sehr schön erklärt! Herzlichen Dank dafür!
Freut mich wenn ich helfen konnte!
Mal wieder sehr gut erklärt. Danke!
Vielen Dank fürs reinschauen ✌️🙂
Wie immer sehr interessant erklärt. Habe mir Mal ne einfache API geschrieben die mir 100 random Einträge als json zurückgibt. Funktioniert auch damit sehr gut.
Sehr gut! Weiter so... ;)
Deine API funktioniert also wie die von Chuck Norris? api.chucknorris.io/
xD
@@ProgrammierenMario Nein natürlich nicht. Chuck ist einzigartig.
:-)
Ich finde deine Videos super. Unglaublich gut erklärt, nicht zu viel gewese drum herum, nicht zu lang, nicht zu kurz, kompakt und gut.
Danke für das Lob!
Danke für die tolle Erklärung. Du erklärst sehr ruhig und verständlich.
Eine Frage, kann man diese Jason Datei auch per HTML (Javascript) Eingabeformular beschreiben? Neue Datensätze anlegen in der Jason Datei?
Mit JavaScript hat man aus Sicherheitsgründen keinen direkten Zugriff auf Dateien. Also nein. Die Daten aus einem Eingabeformular müssten an ein Backend/Server geschickt werden wo man bspw. mit PHP oder Node.js die Daten dann in Dateien oder in eine Datenbank speichern kann.
@@ProgrammierenMario okay verstehe, vielen Dank für die ausführliche Antwort.
Moin Mario, schönes Video, gut erklärt. Was ist aber wenn die json etwas komplexer ist? Wenn die Lister deiner Namen nur Bestandteil von einem Objekt z.B. "Members" ist?
{"members": [{"fullname": "Steffen Spider"}, {"fullname": "Ruth Rechte"}]}
Hi Mathias, du müsstest "members" mit einer Schleife durchgehen und jedes Element ausgeben bzw. weiterverarbeiten. Je nachdem was du vor hast.
klasse tutorial :) ... was wäre denn die einfachste methode in das json zu schreiben wenn es auf einem server liegt?
Hi Lars, das geht dann nur Serverseitig mit PHP oder Node.js zum Beispiel.
Gut erklärt! Mach weiter so
Vielen Dank, mach ich ✌️🙂
Hallo Mario, ich habe mich jetzt mit deinem Video mit fetch frontendseitig eingearbeitet und würde gern in Netlify mithilfe ServerlessFunctions eine Api bauen wo ich ein JSON File laden und auch ändern kann. Geht das?
Hi, soweit mir bekannt kannst du mit den Serverless Functions JSON als Response zurückgeben. Ob du damit auch direkt Dateien schreiben und beschreiben kannst weiß ich leider nicht. Vllt. fragst du da direkt mal beim Netlify support an.
Vielen Dank für dieses Video. Informativ wie alle. Aber eine Frage: Ich bekomme ein "Access to fetch" Fehler, wenn ich eine json von einem Webserver abrufe. Kannst Du da helfen?
Klingt nach CORS. Der Server erlaubt keine Anfragen von Ressourcen einer abweichenden Domain. Das muss beim Server eingestellt werden bzw. der API welche die Ressourcen zur Verfügung stellt.
In diesem Video bin ich mal darauf eingegangen --> ua-cam.com/video/uOE1aqyzq_w/v-deo.html
Ab Minute 32 ca. Aber ich empfehle dir alles anzuschauen wegen dem Zusammenhang.
Hallo Mario,
Ich habe das so nachgebaut, aber die Texte werden nicht angezeigt nur die Bilder.
Hast du link für die Dateien zum download. Bin Anfänger, wird sehr helfen beim Fehler finden.
Du bist, der beste machst das echt gut
Gerne doch, hier bitteschön --> github.com/ProgrammierenM/javascript-fetch-html-template
@@ProgrammierenMario Mille grazie! Tausend Dank !
Hi Mario,
Ich finde deine Videos echt super.
Allerdings habe ich mit diesem Turorial Probleme.
bei mir wird als Übergabewert von fetch ein http wert erwartet.
Ich bekomme die Fehlermeldung CORS Anfrage war nicht http.
Weißt du was ich falsch mache?
mit freundlichen Grüßen
Nico
Vielen Dank! CORS bedeutet Cross-Origin Resource Sharing und regelt die Zugriffe zwischen unterschiedlichen Domains(Origin). Normalerweise ist dies aus Sicherheitsgründen nicht erlaubt und muss erstmal explizit beim Web Server/Service aktiviert werden, sodass es erlaubt ist das ein Client von einer anderen Domain(Origin) aus auf Ressourcen zugreifen darf. Zudem sollte dieser Zugriff immer über HTTPS laufen. Deswegen vermutlich dein Fehler.
Wenn du das bei dir Lokal erstmal nur testen willst mit Fetch etwas zu holen, dann empfehle ich dir die Live Server Extension für VS Code zu verwenden und damit deine Website anzuschauen. Und dann wie im Video es mal nur so zu testen. Somit laufen die Zugriffe unter der selben Domain(localhost) und der CORS Fehler tritt somit nicht auf. Hoffe das hilft dir erstmal weiter.
Danke Mario und noch eine Frage, wenn ich mit Fetch() keine json-Datei sondern csv-Datei abgerufen habe, in der x-y Werte (Temperatur-Daten) drinstehen, wie kann ich die dann als Plot in mein HTML-Dokument anzeigen?
Statt mit response.json() kannst du response.text() verwenden. z.B.
fetch('sample-url.csv')
.then((response) => response.text())
.then((data) => console.log(data));
Je nach Trennzeichen welche du in der CSV verwendest könntest du das ganze noch aufsplitten.
Ich werde die Temperatur-Daten demnächst von vornherein im JSON-Format speichern, aber danke für deinen Ansatz.
Hi, der Fetch geht ja nur lokal, wenn ein Server läuft oder?
Zweite Frage wäre:
Ich stelle eine Anfrage an ein anderes Programm auf dem Rechner:
Hier der code:
fetch('localhost:8080/rest/1/projects/EnergieMonitoring/onlinevalues/.json?value=27;PowerActive;SUM13',{mode:'no-cors'})
.then((response) =>
{
console.log(response);
return response.json();
})
.then((MyData) =>
{
console.log(MyData);
});
habe mode:-no-cors gesetzt, da ich zuerst dies als Fehlermeldung bekommen hatte.
nun bekomme ich dies zurück gemeldet:
script.js:426 Uncaught (in promise) SyntaxError: Unexpected end of input
at script.js:426
Zeile 426 ist da, wo ich response.json() aufrufe.
die response.ok ist false.
was ist hier denn noch zu beachten?
Sorry, hatte den Kommentar bisher übersehen.
Es gibt da viele Möglichkeiten woran das liegen könnte. Ich hatte im Tutorial ja die fetch funktion nur angerissen. Es gibt verschiedenste Optionen die du setzen kannst bzw. auch unterschiedliche Möglichkeiten Daten zu senden. Wie du das letztendlich machen musst hängt stark von der API ab, wie diese die Daten erwartet. Es ist nochmal ein ausführlicheres Tutorial über das Thema geplant. Unterdessen hilft dir vllt. das hier weiter:
developers.google.com/web/updates/2015/03/introduction-to-fetch#fetch
Du könntest mit catch erstmal den Fehler abfangen und ausgeben um ggf. näheres herauszufinden.
Hat lange gedauert, bis ich Dulli die Verbindung Spider und Web Developer gecheckt hatte :D
;)
wie wäre es eigentlich wenn du mal eine Tutorial reihe machst wie ""der Weg zum Web Developer? Da passen deine Tutorials sicher gut rein, wenn sie strukturiert in einer Playlist sind. Für mich bist du ein super Lehrer, aber es fehlt mir eine komplette Serie
Vielen Dank für die Idee und deinen Input. Findet auf jeden fall auf meiner Ideenliste erstmal platz ;)
Danke fürs Video 🙂 Ich finde das mit dem Clonen einfacher als jedes Element einzeln mit Javascript zu erstellen. Aber ich hätte da mal eine Frage. Habe jetzt noch ein bisschen rum getestet und diesmal ein ein div zum Klonen benutzt. Hier kam dann die Fehlermeldung Cannot read properties of undefined (reading 'cloneNode'). Es klappte als ich nur .cloneNode(true) geschrieben habe. also ohne content. Warum ist das so?
Hallo Peter, mit der funktion .cloneNode macht du eine Kopie von dem template, sodass du nicht das ursprüngliche verwendest und da deinen Inhalt reinsetzt. Ziel ist es das das original Template für später immer erhalten bleibt. Der Parameter true gibt an ob du auch alle Kindelemente mit kopieren möchtest. Hoffe das hilft erstmal weiter :)
@@ProgrammierenMario Danke für die Antwort
Also ich bin mit diesem fetch noch am verzweifeln.
Kann man den direkt nutzen, oder muss man den über nem install Node-fetch installieren?
Habe in einem anderen Video gesehen, dass jemand mit Express einen Webserver erstellt hat und dann fetch installiert hat und mit:
Import fetch from „Node-fetch“ importiert hat.
Bei mir kommt dann der Fehler, dass der Import mit „./„ beginnen soll.
Stehe auf dem Schlauch.
Wann kann man fetch nutzen?
Auch ohne install ?
fetch kannst du client-seitig ohne Installation mit JavaScript jederzeit verwenden. Für Node.js welches eine Laufzeitumgebung für JavaScript ist welches Backend/Serverseitig läuft ist fetch out-of-the-box nicht mit dabei und muss installiert werden. Du musst hier grundlegend zwischen dem JavaScript im Client/Browser und Node.js unterscheiden.
@@ProgrammierenMario ah ok, danke. Denke ich habe es verstanden.
Verstehe nur nicht, warum in einigen Videos einfach Anfragen an bspw. Eine Datei gemacht werden können und bei mir wird das geblockt.
@@ProgrammierenMario
Habe jetzt eine Fetch Anfrage in meinem Client Projekt erstell, die kommt mit dem promise.ok = false zurück.
Gebe ich den gleichen fetch in der Server Anwendung ein, oder direkt in der Browser adtesszeile ist alles in Ordnung.
Hi Mario,
gibt es denn auch eine Möglichkeit, Daten von Javascript zu exportieren? ich würde gerne mit Javascript eine Visualisierung bauen, die mit meinem raspberry pi (python) kommuniziert und dazu bräuchte ich so ne Art Datenbaustein
Hallo Nico, mit JavaScript kannst du Daten z.B. an ein Backend schicken, welches dein Raspberry Pi (Python) sein kann. Das kannst du ebenfalls mit fetch machen. Damit lassen sich Daten abschicken und wieder empfangen. Hier findest du ein Beispiel per POST request --> javascript.info/fetch#post-requests
@@ProgrammierenMarioi Mario, ich habe mittlerweile alles versucht und es klappt immer noch nicht..
naja, wenn du mal Stoff für neue Videos brauchst würde es mich freuen, mal ein Video zu sehen wie man so eine Kommunikation zwischen python und Javascript aufbaut, um Jawascript als Visualisierung zu nutzen.
finde deine videos echt super:)
Super erklärt, danke dude
Sehr gerne!
Hey Mario,
wenn ich einen fetch absetze, bezieht sich dann die url auf den Server auf dem die Anwendung läuft, oder auf den Client der diese aufruft?
Ich habe es mit einer JSON Datei versucht die lokal liegt….. das funktionierte auch, wenn ich mit zwei verschiedenen Rechnern drauf zugreife.
Komischerweise geht es nicht, wenn ich über Lokalgeist zugreife.
Wie ist es denn jetzt?
Ist die url abhängig vom oder wo die Anwendung liegt und damit sollte Lokalgeist möglich sein?
(Auch wenn der blockiert wird)?
Immer die URL angeben auf welche zugegriffen werden soll, quasi wo die Daten herkommen sollen.
@@ProgrammierenMario Hi,
hatte mich vielleicht falsch ausgedrückt:
wenn ich eine Datei angebe bspw. fetch("datei.txt") dann bezieht dich das auf den server, oder?
also er würde dann hier suchen: domain/datei.txt.Richtig?
Meine Frage ist nun nur noch, warum kann ich wenn ich mit express einen webserver erstelle (welche bspw.auf port 3000 läuft) dann einen fetch zu einem server auf port 8080 erfolgreich absetzen und wenn ich von einem browser heraus das gleiche mache geht es nicht.
Sind doch auch zwei unterschiedliche server, das schnalle ich noch nicht so recht.
Gibst du hier dann auch die komplette URL mit Port an?
@@ProgrammierenMario Ja.
Also ich habe jetzt gelesen:
Browser = client => SOP ud CORS aktiv.
Express = Server => Keine CORS und SOP prüfung aktiv.
Stimmt das?
Wurde so erklärt:
fetch anfrage != Browser origin => SOP greiftund stellt anfrage an den server nach CORS Header.
Stimmen diese nicht mit der eigenen überein => Blockiert.
Falls bei dir serverseitig gesperrt ist das eine Anfrage von einer anderen Domain erfolgen darf, dann müsstest du dies explizit erlauben. Wenn du Express verwendest kannst du hier mal reinschauen --> expressjs.com/en/resources/middleware/cors.html
mal ne anfängerfrage: wenn ich bei der ressource eine webadresse reinpacke hab ich zwar daten, aber es findet keine aktualisierung statt. hierzu müsste man noch eine api anzapfen richtig? vllt kann man sowas in einem tutorial noch zeigen...
Hi Robert, du musst dann die Daten selbstständig auf der Seite aktualisieren. Wie du das machst dazu habe ich noch extra ein Tutorial gemacht --> ua-cam.com/video/tdglfPMwGFU/v-deo.html
@@ProgrammierenMario dann hab ich es falsch verstanden. mir ging es um das reine aktualisieren, in dem verlinkten video geht es ja lediglich um die ausgabe.
Wenn du einen bestimmten Inhalt aktualisieren möchtest dann kannst du es ja mit der normalen Ausgabe für das entsprechende Element überschreiben. Somit aktualisierst du es ja ;)
@@ProgrammierenMario Nee, ich ruf die Daten doch von woanders ab, deshalb ja der Request. Wenn sich dort die Datensätze ändern, müsste ja regelmäßig (Cronjob) die Abfrage bzw. der Request neu gestartet werden. Das hätte man im Video noch erwähnen bzw. zeigen können.
Hi Mario wie läuft es eigtl wenn das Template in einer anderen Html liegt , wie kann ich das dann ansprechen ?
Du kannst dir die HTML Datei ebenfalls mit fetch holen. An den HTML Code kommst du dann mit response.text()
Dies ist dann aber ein String. Wenn du ein Document Object haben willst musst du es parsen, z.B.
var parser = new DOMParser();
var doc = parser.parseFromString(html, 'text/html');
Danach kannst du das Template ganz normal selektieren und verwenden.
@@ProgrammierenMario Hey danke für die Antwort , hat super geklappt :D
genial 👍
✌️🙂
ist sehr interessant .
Ist eine gute Möglichkeit um nicht immer in JavaScript die HTML Elemente zu erzeugen ;)
Hey echt cool das Video. Könntest du vllt mal eine echte API verwenden zb die poke api für einen Pokedex ?
Ja gerne! Hier habe ich mal die Chuck Norris API verwendet --> ua-cam.com/video/_MCrNTYMF-8/v-deo.html
@@ProgrammierenMario Das video ist cool aber die Poke Api wäre noch etwas unfangreicher. Vllt könntest du ja mal einen Pokedex damit basteln :)
Top!
👍
Du solltest wirklich drüber nachdenken Udemy Kurse zu machen ... hast mega das Potential Wissen verständlich zu vermitteln
Darüber habe ich schon oft nachgedacht. Ob es aber bei Udemy sein soll weiß ich noch nicht ;)
Wäre es eine Option fetch() mal weiter zu beleuchten mit Post() requests zb. Daten schreiben und dann weiter verarbeiten, Gruß Sascha
Natürlich! Du kannst ja auch mal hier reinschauen, falls du es noch nicht gesehen hast --> ua-cam.com/video/uOE1aqyzq_w/v-deo.html
Da zeige ich wie du Formulardaten an ein Backend senden kannst, inkl. Dateiupload
@@ProgrammierenMario Hey Mario,
das is super für mich um neue Benutzer an zulegen. Jetzt frage ich mich aber folgendes. Ich habe zb 10 Personen in meiner .json die ich an verschiedene HTML container verteilen möchte, wenn die erste Person jetzt zugewiesen wurde. Hatte ich mir überlegt ihr einen Schlüssel+wert paar zugeben mit "Zugewiese": true/oder false wie erkläre ich js den Boolean zu ändern damit die Person nicht doppelt zugewiesen wird? Mach ich das wenn ich noch im fetch("GET").then() bin? Oder fetch ich neu mit post(). Danke Mario
Hi, ich bekomme hier den Fehler:
Uncaught TypeError: document.getElementById(...).content.CloneNode is not a function
cloneNode schreiben.
Ansonsten habe ich den Quellcode auf meinem Github Account zum vergleichen. Link ist in der Beschreibung... ;)
@@ProgrammierenMario werde ich nochmal versuchen…. Aber wie macht man das mit den Templates, wenn man mehrere Links hat, welche js Functions ausführen sollen?
Mit setattribute?
@@ProgrammierenMario cloneNode hat funktioniert.... aber warum bekommt man es dann mit Intellisense als CloneNode angezeigt?
bzgl der Links würde ich ganz normale anker tags im template verwenden und dann wie beim Bild anstelle das src dann das href attribut setzen. Wenn du onclick events setzen möchtest kannst du das attribut natürlich auch so setzen oder du machst das über eventListener.
Intellisense funktioniert bei mir auch nicht immer zu 100% ;)
@@ProgrammierenMario OK. ist natürlich für Anfängeer blöd mit den falschen Intellisens anzeigen.
Auch, dass Variablen angezeigt werden, die in dem jeweiligen Klasse gar nicht zur Verfügung stehen.
wie bekomm ich die cards nebeneinander ?
Da könntest du in CSS Flexbox verwenden --> ua-cam.com/video/JNqDBHGbAKQ/v-deo.html
In diesem Beispiel werden zwar Bilder und keine Cards verwendet, funktioniert aber im Grunde mit jedem Element.
Läuft bei mir.
Freut mich sehr ✌️
Man sollte das Ganze noch um eine Fehlerausgabe ergänzen. Sonst top!
Natürlich hast du recht, wollte das Thema erstmal nur anreißen. Daten senden gehört ja auch noch mit dazu ✌️
Hallo, ich habe ein template:
Bezeichnung
Aufsteckwandler 60/5
-
das füge ich hier am ende einer tabelle mit dem div ein (um diese zu erweitern):
Preis
149
€
Quellcode:
const myrow = document.getElementById("myInput");
const mytemp = document.getElementById("myTemplate").content.cloneNode(true);
mytemp.querySelector(".table-description").innerHTML = "ABC";
mytemp.querySelector(".table-value").innerHTML = "DEF";
mytemp.querySelector(".table-unit").innerHTML = "HIJ";
myrow.appendChild(mytemp);
myrow.appendChild(mytemp);
myrow.appendChild(mytemp);
es liegt jetzt nur eine neue zeile auf der seite und diese ist auch noch über der Tabelle, wie kommt das?
Edit: die mehrfachhinzufügung konnte ich durch ne schleife lösen. Anscheinen kann man auf die variable myrow nur einmal appendChild anwenden?
Aber warum liegen die Werte über der Tabelle?
Rein von der HTML Struktur her ist das div in der Tabelle fehlplatziert. Eigentlich brauchst du es auch nicht unbedingt. du könntest direkt alle Elemente tbody zuweisen. Also die id myinput in das tbody tag setzen und dann mit appendChild die neuen Elemente reinsetzen.
Bei appendChild werden keine Elemente überschrieben. Es wird immer ein neues am Ende aller Kindelemente gesetzt. Das div könnte auch der Grund sein warum es nicht korrekt angezeigt wird. ;)
hi
Grüße...
@@ProgrammierenMario Danke für deine sehr hilfreichen Videos! Gruß