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

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.

crafter32

Beitragsersteller

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.

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 Beiträge

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

...zum Beitrag

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.

...zum Beitrag

Bestimmten Inhalt einer JSON in HTML ermitteln?

Hallo, ich hätte gerne, dass wenn einem ein Parameter (z.B. 1) gegeben ist, dass JavaScript dann JSON Inhalt nimmt, und genau die Position (also 1) nimmt, und mir daraus eine Date anzeigt.

Wofür brauche ich das?

Ich habe eine HTML Seite, in der alle Items in der JSON in einer Liste angezeigt werden. Wenn man da drauf drückt, soll auf die "anzeige.html" genau die Position weitergegeben werden (z.B. https://thrilltechwebsite.web.app/anzeige.html?pos=1 ), und dort gelesen und angezeigt werden.

Wie mache ich das?

Danke im Vorraus ☺️

...zum Beitrag

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

...zum Beitrag

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.

...zum Beitrag

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.

...zum Beitrag

Wann kann man JavaScript gut?

Also, ich kann von APIs Daten abrufen. Voice Recorder, Wetter Webseite etc.

Slideshows kann ich auch programmieren. Ist auch einfach. Node.js kann ich nicht und json habe ich noch nicht ganz verstanden.

HTML und CSS beherrsche ich richtig gut.

Wann würdet ihr sagen, dass man gut JavaScript Code schreiben kann?

...zum Beitrag

Daten aus MySQL auf Website darstellen?

Ich habe Daten in einer MySQL Datenbank, die ich gerne auf einer Website darstellen möchte, jeweils immer beim Klick auf einen Button (pro Button eine etwas andere Abfrage)

Eine entsprechende Abfrage dafür wird in JavaScript bereits erstellt.

Jetzt müssen die Daten nur noch abgerufen und eingefügt werden. - Nach allem, was ich gelesen habe, soll es sehr umständlich sein, MySQL in JavaScript zu verbinden.

Bisher habe ich probiert, die Abfrage per Cookie in PHP zu übertragen, dort die Daten abzufragen und zu echoen - das ganze mit einem getElementById().innervalue = ..., sodass immer die aktuelle Abfrage im DOM-Element ist, das passiert aber nur beim ersten Mal.

Das Abfragen der Daten in PHP und Zurückgeben an JS hat weder über einen Cookie, noch ein echo funktioniert.

...zum Beitrag

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

...zum Beitrag

PHP Variable mit Button über javascript an Popup übergeben?

Hallo,
ich habe eine mit PHP dynamisch erstellte Tabelle zum anzeigen von Anträgen. In jeder Zeile meiner Tabelle gibt es einen Button zum öffnen eines Popups. An dieses Popup soll die ID des jeweiligen Antrags übergeben werden um alle Daten auszulesen.

Wie kann ich es schaffen, dass in einer dynamischen Tabelle (alle Button Namen gleich) jeder Button unterschieden wird, oder erkannt wird welchen Button ich gedrückt habe? Und wie kann ich die Variable aus PHP über javascript an das Popup übergeben?

Ich würde mich über jede Hilfe freuen, versuche es nun schon seit Tagen, komme aber zu keinem Ergebnis

...zum Beitrag

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?

...zum Beitrag

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

...zum Beitrag

Wie sende ich Variablen von JavaScript nach Flask via jQuery?

Hallo,

ich bin in JavaScript/jQuery und auch Python/Flask noch ein ziemlicher Anfänger. Ich versuche gerade, einfach nur ein JSON-Objekt aus JavaScript in einem HTML-Template mit Flask anzuzeigen.

Hier mein Code:

Flask:

from flask import Flask,request, render_template

app = Flask(__name__)

@app.route("/")
def rofl():
  return render_template("test.html")

@app.route("/test", methods=['POST'])
def test():
  Namensliste = request.get_json(True)
  print(Namensliste)
  return render_template("rofl.html", Namensliste=Namensliste)

if __name__ == '__main__':
  app.run(port=5200)

test.html:

<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <form action="#" method="post">
    <button type="button" onclick="JSONTest()"> Send UserInfo</button>
  </form>
</body>

rofl.html:

<head>
  <meta charset="UTF-8">
  <title>Titel</title>
</head>
<body>
  NamensListe: {{Namensliste}}
</body>

JavaScript-Datei:

var myJason = {
  "name1" : "Jens",
  "name2" : "Josef",
  "name3" : "Johannes"
}

function JSONTest() {
  var MyJason= JSON.stringify(myJason);
  console.log(MyJason)
  $.ajax({
    type: 'POST',
    url: '/test',
    data: MyJason,
    success: function(data) {
      console.log(data, "Rückmeldung1");
  }});
}

Wie mein Code eigentlich funktionieren soll ist: Ich rufe die Route "/" auf, drücke auf den Button: "JSONTest()" und meine Funktion sendet via jQuery mein JSON-Objekt an "/test". Dort wird das Objekt in Namensliste gespeichert und rofl.html mit der Namensliste darin aufgerufen.

Ich weiß, dass hier wahrscheinlich viele Grundlagenfehler drin sind, aber ich habe wirklich ewig lang gegooglet und finde einfach nicht, wie man es richtig macht.

Danke schon einmal für jede Idee.

...zum Beitrag

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?

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen