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.

4 Antworten

Erzesel

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, Technik, programmieren

11.11.2021, 07:49

Eine ähnliche Fragestellung hatte ich bereits im Bereich Batch.

Damals hatte ich neben der nackten Stringakrobatik in Batch auch eine Html/JavaScript-Lösung zelebriert:

https://www.gutefrage.net/frage/wie-coronazahlen-von-webseiten-erfassen-und-verarbeiten#answer-398558686

In Deinem Fall wäre ein XMLHttpRequest und die Convertierung in ein JavaScript-Objekt eine optimale Lösung.

TechPech1984

Nutzer, der sehr aktiv auf gutefrage ist

im Thema Computer

10.11.2021, 19:45

mit einem HttpRequest kannst du die daten abholen . wenn die API nicht nur über ein server das zulässt bzw soweiso das nur mit CURL geht.

https://www.it-swarm.com.de/de/javascript/wie-lese-ich-eine-externe-lokale-json-datei-javascript/1043362222/

als file eine URL angeben

ist halt immer die frage , ohne die API zu kennen .

TheWever

11.11.2021, 01:32

Hierfür ist es empfehlenswert einen kleinen API Wrapper zu schreiben (~ 100 lines). Dieser sollte über die api (mit https requests) die Informationen abfragen und class objects wiedergeben können. Möglicherweise musst du noch einen User agent und/oder eine Verifizierung im Header hinzufügen da manche Server deine request sonst blockieren.

Lamanini

10.11.2021, 19:42

Du kannst mithilfe von JSON.Parse den Inhalt der Antwort einlesen, und dann danach auf das zurückgegebene Objekt/Array wie auf jedes andere zugreifen.

https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse

Auf der Seite gibt es auch ein Beispiel.

Woher ich das weiß:Berufserfahrung – Softwareentwicklerin

Ähnliche Fragen

JSON-Datei Inhalt in HTML Anzeigen?

Hallo Zusammen,

meine Webseite holt sich mit request genauer gesagt mit fetch-node eine JSON Datei von einem Server, soweit funktioniert das auch.

Nun weiß ich nicht genau wie kann ich nun den Inhalt aufteilen z.b. in Name, Titel, Beschreibung und diesen Grafisch in HTML darstellen ?

...zur Frage

Wie bearbeite ich eine JSON Datei über ein JS Befehl?

Hallo! Ich wollte fragen wie ich über JavaScript Befehle eine JSON Datei bearbeiten kann?

Also als Beispiel:

JSON: "wert":1

JS: ... -> Befehl zum bearbeiten

Danach: JSON: "wert":2

Wie geht das? Es wäre total nett, wenn mir das jemand erklären könnte :)

...zur Frage

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

...zur Frage

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 ☺️

...zur Frage

Wie kann man etwas an eine JSON-Datei mit php anhängen?

Ich stehe grade etwas auf dem Schlauch und bräuchte ein paar Denkanstöße:

Ich habe eine JSON-Datei in der ich Daten speichere um sie später wieder aufzurufen (logisch oder :P ?), nun möchte ich aber auch daten hinzufügen können und nicht nur aufrufen.

{
   "Kategorie":[
      {
         "Position":0,
         "Name":"Test",
         "Inhalt":[
            {
               "Name":"Google",
               "URL":""
            },
            {
               "Name":"Heise",
               "URL":""
            }
         ]
      },
      {
         "Position":1,
         "Name":"ABCD",
         "Inhalt":[
            {
               "Name":"Google.com",
               "URL":""
            },
            {
               "Name":"Heise",
               "URL":""
            },
            {
                "Name":"231",
                "URL":""
            }
         ]
      },
      {
         "Position":1,
         "Name":"ABCD",
         "Inhalt":[
            {
               "Name":"Google.com",
               "URL":""
            },
            {
               "Name":"Heise",
               "URL":""
            },
            {
                "Name":"231",
                "URL":""
            }
         ]
      }
   ]
}

Ich möchte zum Beispiel in der Kategorie "Test" zum Inhalt weitere Einträge hinzufügen oder eine komplett neue Kategorie einfügen. Ein Ansatz von mir war die Daten in ein PHP Array umzuwandeln und das dann mit den neuen Daten zu Mergen, das Ergenis war aber eher mäßig. Hat jemand eine Idee? :)

...zur Frage

Wie bekomme ich einen Parameter aus einer externen JSON Datei (URL)?

Hey Leute ich möchte mir den aktuellen Bitcoin Kurs auf meiner Website anzeigen lassen. Habe dazu von einer API eine JSON Datei gefunden die alle 15 Minuten geupdatet wird. https://www.bitstamp.net/api/v2/ticker/btcusd/

Nun frage ich mich wie ich das in einen JS Code einbinde um den aktuellen Kurs anzeigen zu lassen.

Kann mir da einer helfen wie ich das in mein HTML einbinde?

...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 man mit einer Python Datei Inhalte in eine JSON Datei hinzufügen?

Ich möchte mit einem Python Skript neue Inhalte in eine json Datei schreiben und zwar immer ganz unten bevor sich die eckige Klammer eben wieder schließt.

Also erstens wie findet das Skript den richtigen Platz in der Datei zum schreiben?

Und zweitens wie kann ich zwei Variablen zB. name und alter in die json Datei schreiben damit das Dann so aussieht:

{
  "Max Musterman": "22"
}

Vielen Dank im Voraus.

...zur Frage

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

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

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

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

OpenAI-API mit GPT4 eine Datei auslesen?

Hallo, ich würde gerne in JavaScript mit Node-JS, GPT4 eine einfache Textdatei schicken, die er dann lesen soll und mir den Inhalt zurückgibt. Sobald das funktionieren würde, würde ich dann auf meiner Website einen File-Upload machen, bei dem man dann .txt Dateien hochladen kann und diese weitergeschickt und ausgewertet werden. Wie gebe ich also eine Datei an die API? Wo muss sich die Datei befinden? Ist das mit dem File-Upload so umsetzbar?

...zur Frage

JavaScript: Wie kann ich JSON zu einem Array umwandeln?

Hey ich bin neu und muss eine JSON-Datei zu einem Array machen.

Meine JSON-Datei sieht in etwas so aus:

{
  "stations": [
    {
      "mandator": "CAG",
      "number": 858,
      "displayName": "Haltestelle 1"
    },
    {
      "mandator": "CAG",
      "number": 859,
      "displayName": "Haltestelle 2"
    }
  ]
}

und ich brauche am Ende ein Array, welches wie folgt aussieht:

["Haltestelle 1", 858, "CAG"],
["Haltestelle 2", 859, "CAG"]

Wie kann man das mit JavaScript umsetzen? Es gibt eine ungenaue Anzahl an Haltestellen. Ich habe schon ein json_Data-Variable mit dem JSON drin.

Ich bitte um Hilfe und keine Aussagen, wie google doch.

Vielen Dank im Voraus

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen