JavaScript Fetch mit HTML Templates nutzen

Рет қаралды 13,856

Күн бұрын

JavaScript Fetch und HTML Template in einem Tutorial. Ich möchte dir zeigen wie du mit JavaScript Fetch dir Daten holen und diese mit einem HTML Template als Blaupause auf der Website ausgeben kannst. Happy Coding!
😺 Source Code
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
↪︎ github.com/ProgrammierenM/jav...
⏩ Videoinhalt
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
00:00 Einleitung
00:45 JSON Data
03:18 Projekt Setup
04:55 HTML Template
11:30 JS Fetch
19:40 Ausgabe mit Template
27:36 Wie gehts weiter?
⭐ Das könnte dich auch interessieren
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
JavaScript Coden lernen für Anfänger:
↪︎ • Lerne JavaScript in 90...
Tailwind CSS Tutorial für Anfänger:
↪︎ • Lerne Tailwind CSS in ...
Wichtige HTML Tags die DU lernen solltest:
↪︎ • Wichtige HTML Tags die...
📌 Über diesen Kanal und mich
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Webentwicklung effizient und einfach. Alles rundum Webentwicklung, Webdesign und angrenzende Themen. Mein Name ist Mario und ich bin bereits seit über 15 Jahren als Webentwickler tätig. Einige Tutorials auf diesem Kanal sind für absolute Anfänger ohne Vorkenntnisse geeignet, und andere für erfahrene Entwickler.
Starte Jetzt!
/ @programmierenmario
#HTML #JavaScript #ProgrammierenM

Пікірлер: 126

@Retep2962 2 жыл бұрын

Mario, sauge gerade deine Videos auf, wunderschön, ruhig und verständlich erklärt toll, dass du dir so viel Arbeit machst. Weiter so.

@ProgrammierenMario 2 жыл бұрын

Hallo Peter, vielen Dank für das Lob und das du wieder reingeschaut hast...Grüße ;)

@peterlakatos338 2 жыл бұрын

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 🤝

@ProgrammierenMario 2 жыл бұрын

Ja das ist leider ein Problem. Freut mich das ich dir weiterhelfen konnte 👍

@DynamicSun 2 жыл бұрын

verständlich, ruhig und nur das wichtige vermittelt, toller Vortrag und Lehrgang. und sehr zu empfehlen

@ProgrammierenMario 2 жыл бұрын

Vielen Dank ✌️🙂

@psychedelic-chi 11 ай бұрын

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.

@MegaProggy Жыл бұрын

Grandios, Mario. Grandios! Bin begeistert von deiner transparenten Darstellung des Ganzen! Weiter so!!!

@ProgrammierenMario Жыл бұрын

Freut mich zu lesen. Vielen herzlichen Dank für dein Feedback!

@Schwanni1990 Жыл бұрын

Ich finde deine Videos super. Unglaublich gut erklärt, nicht zu viel gewese drum herum, nicht zu lang, nicht zu kurz, kompakt und gut.

@ProgrammierenMario Жыл бұрын

Danke für das Lob!

@andreask.291 Жыл бұрын

Super! 🤣 "Fetch"-Kompensator!!! (15:00 Min.) Danke. Wieder alles prima erklärt.😄

@ProgrammierenMario Жыл бұрын

Na den Begriff muss ich mir unbedingt merken 😁

@bugsbunny4329 2 жыл бұрын

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....😀

@ProgrammierenMario 2 жыл бұрын

Immer wieder gerne! Freut mich sehr :)

@Vezir_Fx 11 ай бұрын

Ich finde deine Videos super. Unglaublich deine ruhige Art Dinge zu erklären, finde ich echt sehr angenehm. 🖥

@ProgrammierenMario 11 ай бұрын

Vielen Dank für deine zahlreichen Kommentare und dein Feedback. ✌️🙂

@saschaalthaus5673 Жыл бұрын

Wahnsinn! Super Video. Ich fand die Anwendung eines Fetches im Zusammenhang mit diesem Praxisbeispiel sehr anschaulich und gut zu verstehen. Weiter so!

@ProgrammierenMario Жыл бұрын

Vielen Dank für dein Feedback! Freut mich sehr ✌️

@ParaZumir 11 ай бұрын

Top!

@ProgrammierenMario 11 ай бұрын

👍

@gamehubler 2 жыл бұрын

Huhu .... Ich musste so Lachen

@ProgrammierenMario 2 жыл бұрын

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 ;)

@TheVisitorX 2 жыл бұрын

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.

@ProgrammierenMario 2 жыл бұрын

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

@birdy1 2 жыл бұрын

@@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.

@ProgrammierenMario 2 жыл бұрын

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 🤷‍♂️

@birdy1 2 жыл бұрын

@@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.😀😅

@norbertf7230 2 жыл бұрын

wie immer, tolles Thema => prima erklärt😁. Vielen Dank Mario

@ProgrammierenMario 2 жыл бұрын

Gerne 😀

@herbertflick8843 2 жыл бұрын

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

@ProgrammierenMario 2 жыл бұрын

Freut mich das es dir geholfen hat und vielen Dank für dein Feedback. Viel Glück und Spaß beim ausprobieren ;)

@MrBlackAngle 2 жыл бұрын

genial 👍

@ProgrammierenMario 2 жыл бұрын

✌️🙂

@CW-wq4tf 2 жыл бұрын

Mal wieder sehr gut erklärt. Danke!

@ProgrammierenMario 2 жыл бұрын

Vielen Dank fürs reinschauen ✌️🙂

@leythecg 2 жыл бұрын

Sehr schön erklärt! Herzlichen Dank dafür!

@ProgrammierenMario 2 жыл бұрын

Freut mich wenn ich helfen konnte!

@tomherzog142 2 жыл бұрын

ist sehr interessant .

@ProgrammierenMario 2 жыл бұрын

Ist eine gute Möglichkeit um nicht immer in JavaScript die HTML Elemente zu erzeugen ;)

@SeKu64 2 жыл бұрын

Gut erklärt! Mach weiter so

@ProgrammierenMario 2 жыл бұрын

Vielen Dank, mach ich ✌️🙂

@AsimYilan 2 жыл бұрын

Super erklärt, danke dude

@ProgrammierenMario 2 жыл бұрын

Sehr gerne!

@SReini 2 жыл бұрын

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.

@ProgrammierenMario 2 жыл бұрын

Sehr gut! Weiter so... ;) Deine API funktioniert also wie die von Chuck Norris? api.chucknorris.io/ xD

@SReini 2 жыл бұрын

@@ProgrammierenMario Nein natürlich nicht. Chuck ist einzigartig. :-)

@CoderboyPB 2 жыл бұрын

Hat lange gedauert, bis ich Dulli die Verbindung Spider und Web Developer gecheckt hatte :D

@ProgrammierenMario 2 жыл бұрын

;)

@rikscc 5 ай бұрын

Läuft bei mir.

@ProgrammierenMario 5 ай бұрын

Freut mich sehr ✌️

@christophmarczinzik8337 2 жыл бұрын

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?

@ProgrammierenMario 2 жыл бұрын

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.

@christophmarczinzik8337 2 жыл бұрын

@@ProgrammierenMario okay verstehe, vielen Dank für die ausführliche Antwort.

@icecold487 2 жыл бұрын

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

@ProgrammierenMario 2 жыл бұрын

Vielen Dank für die Idee und deinen Input. Findet auf jeden fall auf meiner Ideenliste erstmal platz ;)

@kottiwood 2 жыл бұрын

klasse tutorial :) ... was wäre denn die einfachste methode in das json zu schreiben wenn es auf einem server liegt?

@ProgrammierenMario 2 жыл бұрын

Hi Lars, das geht dann nur Serverseitig mit PHP oder Node.js zum Beispiel.

@mathias8497 2 жыл бұрын

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"}]}

@ProgrammierenMario 2 жыл бұрын

Hi Mathias, du müsstest "members" mit einer Schleife durchgehen und jedes Element ausgeben bzw. weiterverarbeiten. Je nachdem was du vor hast.

@robertkoch6135 2 жыл бұрын

Du solltest wirklich drüber nachdenken Udemy Kurse zu machen ... hast mega das Potential Wissen verständlich zu vermitteln

@ProgrammierenMario 2 жыл бұрын

Darüber habe ich schon oft nachgedacht. Ob es aber bei Udemy sein soll weiß ich noch nicht ;)

@ulfbrunow2864 Жыл бұрын

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?

@ProgrammierenMario Жыл бұрын

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.

@ulfbrunow2864 Жыл бұрын

Ich werde die Temperatur-Daten demnächst von vornherein im JSON-Format speichern, aber danke für deinen Ansatz.

@mariofritsche4889 Жыл бұрын

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?

@ProgrammierenMario Жыл бұрын

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 --> kzfaq.info/get/bejne/q7V1ZMSi3uDVj6s.html Ab Minute 32 ca. Aber ich empfehle dir alles anzuschauen wegen dem Zusammenhang.

@peterk.2925 2 жыл бұрын

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?

@ProgrammierenMario 2 жыл бұрын

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 :)

@peterk.2925 2 жыл бұрын

@@ProgrammierenMario Danke für die Antwort

@springer_yt 2 жыл бұрын

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?

@ProgrammierenMario 2 жыл бұрын

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.

@Sebistyla22 Жыл бұрын

Hey echt cool das Video. Könntest du vllt mal eine echte API verwenden zb die poke api für einen Pokedex ?

@ProgrammierenMario Жыл бұрын

Ja gerne! Hier habe ich mal die Chuck Norris API verwendet --> kzfaq.info/get/bejne/lbNzpbGFvrOqXWw.html

@Sebistyla22 Жыл бұрын

@@ProgrammierenMario Das video ist cool aber die Poke Api wäre noch etwas unfangreicher. Vllt könntest du ja mal einen Pokedex damit basteln :)

@nicomaier3419 2 жыл бұрын

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

@ProgrammierenMario 2 жыл бұрын

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.

@benjaminschmidt586 2 жыл бұрын

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 ?

@ProgrammierenMario 2 жыл бұрын

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.

@benjaminschmidt586 2 жыл бұрын

@@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.

@benjaminschmidt586 2 жыл бұрын

@@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.

@benjaminschmidt586 2 жыл бұрын

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 2 жыл бұрын

Immer die URL angeben auf welche zugegriffen werden soll, quasi wo die Daten herkommen sollen.

@benjaminschmidt586 2 жыл бұрын

@@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 2 жыл бұрын

Gibst du hier dann auch die komplette URL mit Port an?

@benjaminschmidt586 2 жыл бұрын

@@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.

@ProgrammierenMario 2 жыл бұрын

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

@haraldvrbka9349 2 жыл бұрын

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

@ProgrammierenMario 2 жыл бұрын

Gerne doch, hier bitteschön --> github.com/ProgrammierenM/javascript-fetch-html-template

@haraldvrbka9349 2 жыл бұрын

@@ProgrammierenMario Mille grazie! Tausend Dank !

@knusperinge8732 Жыл бұрын

Hi Mario wie läuft es eigtl wenn das Template in einer anderen Html liegt , wie kann ich das dann ansprechen ?

@ProgrammierenMario Жыл бұрын

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.

@knusperinge8732 Жыл бұрын

@@ProgrammierenMario Hey danke für die Antwort , hat super geklappt :D

@wunderbarrecordings 2 жыл бұрын

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...

@ProgrammierenMario 2 жыл бұрын

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 --> kzfaq.info/get/bejne/qsqXn8mBst2rdok.html

@wunderbarrecordings 2 жыл бұрын

@@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.

@ProgrammierenMario 2 жыл бұрын

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 ;)

@wunderbarrecordings Жыл бұрын

@@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.

@CidCyber84 2 жыл бұрын

Wäre es eine Option fetch() mal weiter zu beleuchten mit Post() requests zb. Daten schreiben und dann weiter verarbeiten, Gruß Sascha

@ProgrammierenMario 2 жыл бұрын

Natürlich! Du kannst ja auch mal hier reinschauen, falls du es noch nicht gesehen hast --> kzfaq.info/get/bejne/q7V1ZMSi3uDVj6s.html Da zeige ich wie du Formulardaten an ein Backend senden kannst, inkl. Dateiupload

@CidCyber84 2 жыл бұрын

@@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

@nicomaier3419 2 жыл бұрын

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

@ProgrammierenMario 2 жыл бұрын

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

@nicomaier3419 2 жыл бұрын

@@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:)

@benjaminschmidt586 2 жыл бұрын

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?

@ProgrammierenMario 2 жыл бұрын

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.

@wunderbarrecordings 2 жыл бұрын

Man sollte das Ganze noch um eine Fehlerausgabe ergänzen. Sonst top!

@ProgrammierenMario 2 жыл бұрын

Natürlich hast du recht, wollte das Thema erstmal nur anreißen. Daten senden gehört ja auch noch mit dazu ✌️

@Sebistyla22 Жыл бұрын

wie bekomm ich die cards nebeneinander ?

@ProgrammierenMario Жыл бұрын

Da könntest du in CSS Flexbox verwenden --> kzfaq.info/get/bejne/gLShd6V5rMile4U.html In diesem Beispiel werden zwar Bilder und keine Cards verwendet, funktioniert aber im Grunde mit jedem Element.

@benjaminschmidt586 2 жыл бұрын

Hi, ich bekomme hier den Fehler: Uncaught TypeError: document.getElementById(...).content.CloneNode is not a function

@ProgrammierenMario 2 жыл бұрын

cloneNode schreiben. Ansonsten habe ich den Quellcode auf meinem Github Account zum vergleichen. Link ist in der Beschreibung... ;)

@benjaminschmidt586 2 жыл бұрын

@@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?

@benjaminschmidt586 2 жыл бұрын

@@ProgrammierenMario cloneNode hat funktioniert.... aber warum bekommt man es dann mit Intellisense als CloneNode angezeigt?

@ProgrammierenMario 2 жыл бұрын

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% ;)

@benjaminschmidt586 2 жыл бұрын

@@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.

@benjaminschmidt586 2 жыл бұрын

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?

@ProgrammierenMario 2 жыл бұрын

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. ;)