JSON Daten in JavaScript ausgeben?

Guten Tag,

ich möchte eine Webseite erstellen bei der man Daten von verschiedenen Superhelden ausgegeben bekommt, diese sind in einer JSON-Datei eingespeichert. Ich wollte fragen, wie man die Namen in eine ausfahrbare Schaltfläche einspeichern kann, so damit diese als Buttons agieren und die Daten von den Helden, dann angezeigt werden.

Danke im Vorraus

2 Antworten

Vom Fragesteller als hilfreich ausgezeichnet

hi1its1me

19.04.2021, 10:23

JavaScript ist eigentlich eine Client-Seitige Skript-Sprache. D.h JavaScript läuft nur im Browser des Webseiten-Besuchers.

Und deshalb kann man per JavaScript auf keine Dateien zugreifen.
Denn der Besucher einer Webseite will nicht, dass eine Webseite beliebig Zugriff auf den eigenen Computer hat.
Und ein Server-Betreiber will nicht, dass jeder Webseiten Besucher auf die Server-Dateien zugreifen kann.

Deshalb brauchst du einen Webserver, der das JSON anbietet und an den Client übermittelt. Im Browser (JavaScript) kannst du per AJAX request darauf zugreifen. Ich denke da findest du genügend Informationen auf Google. Und auf der Serverseite brauchst du einen Webserver der dir das Json anbietet.
Am einfachsten (für Anfänger) geht sowas vermutlich mit einem Apache und PHP.

Achja... man kann JavaScipt auch Serverseitig verwenden, dann gilt das was ich geschrieben habe alles nicht. Aber das ist eher ein Sonderfall. Und ich gehe nicht davon aus, dass du sowas vor hast.

crafter32

Fragesteller

19.04.2021, 10:28

Danke, jedoch mache ich das ganze Momentan noch nicht mit einem richtigen Webserver sondern setze das ganze erstmal auf meinem Pc auf. Mein Lehrer hat uns dieses Beispiel aufgegeben.

verreisterNutzer

20.04.2021, 19:17

Achja... man kann JavaScipt auch Serverseitig verwenden, dann gilt das was ich geschrieben habe alles nicht. Aber das ist eher ein Sonderfall.

Nein, dass ist kein Sonderfall, sondern modern. PHP ist veraltet.

hi1its1me

21.04.2021, 10:17

@verreisterNutzer

Mag schon sein dass PHP veraltet ist. Aber es ist für anfänger die schnell mal was ausprobieren wollen immer noch einfacher als mit JavaScript und NodeJS.

Mit Sonderfall meinte ich auch eher, dass ich davon ausgehe dass er JavaScript nicht Serverseitig verwendet sondern nur im Browser und dass dieses Thema daher nicht relevant ist.

Christoph987

19.04.2021, 10:49

Guck dir an, wie man die Daten aus JSON ausliest und wie man HTML-Inhalte bearbeitet. Da gibt es genug Tutorials dazu. Das sollte reichen, um die Aufgabe zu lösen. Wenn du dann noch konkrete Fragen hast, frag einfach nochmal.

Woher ich das weiß:Studium / Ausbildung – Abgeschlossenes Informatik-Studium

Ähnliche Fragen

JSON parsen in JavaScript?

Moin, ich habe das Problem, dass ich eine JSON-Response bekomme. Aus dieser würde ich gerne einen bestimmten Wert (beispielsweise "NAME-REPLACEMENT" zu dem Schlüssel "name") auslesen. Kann mir vielleicht jemand dabei weiterhelfen?

Die JSON-Datei habe ich hier verlinkt (aus Datenschutzgründen sind ein paar Sachen übrigens von mir ersetzt worden). https://pastebin.com/Zk7fJQNc

Das ganze soll in JavaScript realisiert werden, das heißt, der Wert soll in eine Variable eingelesen werden (und mit console.log() ausgegeben werden).

...zur Frage

Wie kann ich eine JSON-Datei lesen und anzeigen lassen?

Ich habe eine API und wollte diese nun mit JavaScript benutzen. Ich möchte also aus der API die Daten lesen und Variablen auf den Wert setzen.

Z.B.

JSON

germany {
  TotalInfected: 1234567890
  TotalDeaths: 1234567890
}
switzerland {
  TotalInfected: -1234567890
  TotalDeaths: -1234567890
}

Und jetzt möchte ich die JSON lesen und anzeigen. Also z.B. den ganzen Inhalt in beispielsweise einem div-Element.

<a>Corona daten:</a>
<div class="jsoncontent">(Und dann hier die ganze Datei bzw. den Inhalt)</div>

Danke fürs Helfen.

...zur Frage

JavaScript Daten von API abfragen?

Ich habe ein JavaScript Script, in dem ich ganz am Anfang einer Variable die Daten von einem API Request zuweisen muss. Die Daten sollen also in der Variable gespeichert werden und dann der restliche Code ausgeführt werden. Ich möchte, dass die Zuweisung so aussieht:

let data = loadData() | {/*default json*/}

Die Daten müssen da sein bevor der restliche Code ausgeführt wird, da ich sie in einer funktion im onload teil brauche.

...zur Frage

json Daten in JavaScript auslesen und an html Elemente weiterleiten?

Hi,

mehr schlecht als recht arbeite ich mich gerade durch json und habe tatsächlich mittlerweile herausfunden, dass man zum Laden einer json-Datei ohne jQuery folgenden Ansatz zu brauchen scheint:

function loadJSON(callback) {var xobj = new XMLHttpRequest();
xobj.overrideMimeType("application/json");
xobj.open('GET', 'data.json', true); // Replace 'my_data' with the path to your file
xobj.onreadystatechange = function () {
      if (xobj.readyState == 4 && xobj.status == "200") {
        // Required use of an anonymous callback as .open will NOT return a value but simply returns undefined in asynchronous mode
        callback(xobj.responseText);
      }
};
xobj.send(null);  
}

Wie ich damit dann allerdings Objekte und values auslese und weiterleite, ist mir schleierhaft.

Hier ist erst einmal der json Code

{"employees":
    [
        {
            "firstName": "John", 
            "lastName": "Doe"
        },
        {
            "firstName":"Anna", 
            "lastName":"Smith"
        },
        {
            "firstName":"Peter", 
            "lastName":"Jones"
        }
    ]
}

Meine Idee war ja etwas wie document.getElementbyID oder halt byClassName, um den Content im DOM zu verteilen. Aber irgendwas scheint mir zu fehlen.

Pseudocode mäßig wäre halt sowas schön: getElementbyID('title').data(firstName[0]) Irgendwie so halt ...

Was ich bisher gefunden habe, waren nur Kurzeinleitungen, wie ich den Code in der Konsole ausspucke, js Arrays erstelle (warum auch immer die Leute das in einem json Tutorial als Lösung anbieten) oder html Elemente in JavaScript mit dem json Inhalt erstelle. Wie gesagt, würde ich jedoch gerne den json Inhalt an meine bereits existierenden html Elemente weitergeben.

ps. Wenn ihr dazu eine jade-Lösung habt, wäre das natürlich noch um so prickelnder.

...zur Frage

Wie kann ich mir einem JavaScript Button einen Wert speichern?

Hi,

hab heute von der Schule aus mit JavaScript angefangen und ich hasse es ehrlich gesagt. Aber es ist meine Pflicht, wie gesagt, wegen Schule.

Ich muss Schere Stein Papier nachschreiben, und da mein Professor unsere Codes durch nen Plagiat Scanner laufen lässt, können wir sie auch nicht einfach kopieren.

Ich habe es so geplant, ich kreiere 3 Buttons, je nachdem auf welchen du clickst, wird ein Textfeld mit jeweiligem Wert ausgegeben (z.b. Player: rock)

Ich hab aber keinen Plan wie ich einen Wert von einem Button in eine Variable speichere, ich bin auch zu blöd Tutorials zu befolgen.

Kann mir bitte jemand sagen wie das geht?

Danke

...zur Frage

Kann man regelmäßig aktuelle Wettervorhersagen als maschinenlesbare Daten (z.B. XML/JSON) irgendwo online bekommen?

Ich benötige es für ein Programm, das ich hobbymäßig schreiben möchte.

...zur Frage

JSON von JavaScript-Frontend an Rust-Backend schicken und lesen/speichern?

Genau das was im Titel steht muss umgesetzt werden, aber keine Ahnung wie und ich finde keine nützlichen Informationen dazu, deswegen hoffe ich, dass mir hier jemand helfen kann!

Bisher werden im Frontend Arrays (die Benutzerinformationen enthalten usw.) als JSON zur Local Stroage des Browsers geschickt, um die Informationen dort speichern und wieder lesen zu können; klappt auch ganz gut soweit.

Nun lautet die Aufgabe, die JSON nicht in die Local Storage zu schicken, sondern an ein Backend, das auf der Programmiersprache "Rust" läuft, welches im Prinzip die genau gleichen Aufgaben erfüllen soll wie die Local Storage: Daten empfangen, speichern und wieder schicken können (die andere Option wäre eine Datenbank erstellen und diese mit Rust pflegen, davon habe ich allerdings noch weniger Ahnung).

Klingt im Prinzip ganz simpel, allerdings habe ich sowohl mit Rust als auch mit Backends nicht sonderlich viel Erfahrung, deswegen hänge ich an diesen Schritt fest und komme nicht weiter. Dazu habe ich stand jetzt nichts umsetzen können.

Hat hier denn jemand evtl. Tipps? Ich bin nämlich ein bisschen am Verzweifeln und der Abgabetag dieses Projekts rückt immer näher. 😅

...zur Frage

Datenbank mit JavaScript möglich?

Hallo Zusammen.

Für mein Portfolio und einem Arbeitskollegen, erstelle ich gerade eine Shopping-Website.

Folgendes Problem: Wenn ich mit SQL eine Datenbank erstelle, diese dann in Node.js einbinde, wird diese Datenbank beim Provider ('SSD-Hosting') aktiv bleiben bzw. mit gehostet?

Ziel ist ein automatisiertes Login System und ein Einkaufssystem wo die Login-Daten und die Einkäufe in meiner Datenbank gespeichert werden.

Ich habe bisher nur einen Localhost über Node.JS benutzt und noch nix öffentlich im Internet veröffentlicht.

Leider kenne ich mich mit AJAX und JSON nicht aus.

Wäre das mit Node.js und MySQL möglich ? Oder brauche ich da noch etwas anderes?

...zur Frage

Javascript & PHP: Wie sortiere ich ein ArrayListe?

Hey Leute, ich hab folgendes Problem...

Ich speichere Scores als Array (username, score) in einem anderen Array, in dem alle Scores mit Namen vorhanden sind.

In meiner Scoreliste möchte ich nun alle Scores sortiert anzeigen. Ich kann die Daten sowohl in PHP, als auch in Javascript sortieren. Kann mir jemanden einen Code geben für eine der beiden Sprachen?

JSON zum Verständnis:

[["max", 1] , ["moritz",2]]

...zur Frage

Wie ist eine JSON-Datei aufgebaut?

Genauer gesagt stelle ich mir die Frage, wie ich in einer JSON-Datei zwischen einem Objekt und einer Eigenschaft unterscheide. Sowohl Objekte als auch Eigenschaften und auch die jeweiligen Werte werden ja in Anführungszeichen geschrieben. Bei den Werten kann ich mir das herleiten, da sie rechts vom Doppelpunkt stehen. Dann ist rechts vom Doppelpunkt ja die Eigenschaft.

Und was genau haben die eckigen Klammern zu bedeuten?

...zur Frage

Javascript Tabelle ausgeben (array)?

Hallo,

wie oben zu sehen bin ich gerade dabei mein Script zu schreiben bzw lerne es. Ich habe eine Funktion aufgeschrieben welches mir mit dem Klick button diese Tabelle ausspuckt. In meinem Script stehen bei var Daten mehrere Zahlen aber mir wird nur die erste ausgegeben die anderen nicht. Wie kann ich dieses weiterführen, bis keine Zahlen mehr kommen?

...zur Frage

SyntaxError: JSON.parse: unexpected end of data at line 1 column 1 of the JSON data?

Hallo,

ich versuche mit JavaScript Daten über ein Servlet aus der Datenbank zu holen. In folgende Zeile bekomme ich die Fehlermeldung aus dem Titel:

var katHoler = JSON.parse(xmlhttp.responseText);

Ich habe gelesen, dass meine Funktion eine JSON erwartet. Aber ich habe nur Lösungen mit Libraries wie jQuery gefunden. Die darf ich aber von meinem Professor aus nicht benutzen.

function pupulateDropDown() {
  var servletURL = "./KategorienHolen"
  var xmlhttp = new XMLHttpRequest();

  xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      var katHoler = JSON.parse(xmlhttp.responseText);
      JSON.stringify(katHoler);
      
      var ausgabe = "<a href=" + "DisplayKlamotten" + "?=" + katHoler.kategorie + ">" + katHoler.kategorie + "</a>";

      document.getElementsByClassName("innerDiv").innerHTML = ausgabe;
      console.log(xmlhttp.responseText);
      console.log(katHoler.kategorie);
      console.log(katHoler.id);
    }
  }

  xmlhttp.open("GET", servletURL, true);
  xmlhttp.send();
}

...zur Frage

kann ich mit einer XMLHttpRequest in eine json datei schreibe?

hi ich bin gerade dabei eine Website zu entwickeln und bin gerade dabei ein regestrier System zu entdecken und möchte jetzt nur mit JavaScript eine variable in die JSON Datei schreiben

...zur Frage

Dynamischer JSON Pfad?

Kann ich in JavaScript irgendwie direkt auf ein tiefverschachteltes Objekt zugreifen, wenn mir der Pfad bekannt ist?
Angenommen ich habe folgendes JSON:

 let obj = {
  test: {
    test2: {
      test3: {
        test4: "hallo"
      }
    }
  }
}

Mir liegt eine Textdatei mit der Struktur zu den relevanten Daten vor:

test.test2.test3.test4

Wie kann ich direkt auf "hallo" zugreifen, ohne dass ich durch jede Ebene iterieren muss?

Mir schwebt folgendes vor:

str = fs.readFileSync(struct.txt); // test.test2.test3.test4
console.log(obj[str]) // hallo

Ist sowas irgendwie möglich?

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen