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.

1 Antwort

tide1109

25.06.2023, 01:52

Du musst dein Code reaktiv aufbauen. Wenn deine JavaScript Datei lädt und ausgeführt wird, sind die JSON nicht bekannt. Das Laden der Daten benötigt etwas Zeit. So wie JavaScript ausgeführt wird, blockiert die Zeile Code nicht, während die Daten abgerufen werden. Du musst also mit dem asynchronen Ausführen arbeiten.

Bei deinem HTTP Request wirst du wahrscheinlich ein Event haben, der irgendwann mit den JSON Daten ausgeführt wird. Ab hier kannst du mit dem JSON arbeiten.

Das einfachst wird sein, wenn du dein restlichen Code in eine oder mehrere Funktionen auslagerst. Die "main" Methode kannst du dann ausführen, wenn die Daten angekommen sind.

Falls zum JavaScript noch eine Webseite dazugehört, musst du diese Zeitdifferenz bedenken. Du könntest zu Beginn ein "Loading..." anzeigen und den Inhalt dann sinnvoll austauschen.

Dein ursprünglicher Wunsch könnte höchstens so aussehen:

let data = await loadData()

Das await Keyword gehört zur async Entwicklung von JavaScript. Die loadData Methode kann erstmal nur ein Promise Objekt zurückgeben. Ein Promise ist wie eine Überraschung, die in der Zukunft erfüllt werden kann. Es kann der gewünschte Wert oder auch ein Fehler dabei herauskommen. Mit await Keyword kannst du auf die Antwort warten. Anderer Code kann in der Zwischenzeit ausgeführt werden.

Falls du diesen Weg gehen möchtest, solltest du dich mit Thema Promise, await und async im Bereich JavaScript informieren.

Ähnliche Fragen

Java Rest API Request?

Hallo zusammen,

ich versuche momentan mit Java JSON Daten von einer Rest API zu bekommen. Es handelt sich um eine Rest API an die ich ein GET Request senden möchte. Ich habe schon einiges Probiert aber es hat nichts geklappt. Wie kann man also mit Java die Daten einer solchen API abfragen? Ich nutze Intellij IDEA Community Edition und habe die API schon mit Postman ausprobiert, da geht es.

...zur Frage

Node.js http-data außerhalb der Request?

Hallo,

ich habe folgendes Problem:

Ich hab eine HTTP-GET-Request abgeschickt und möchte nun die zurückgelieferte Data außerhalb dieses Aufrufs nutzen können. Ich kriegs aber irgendwie nicht hin. Ich hätt gern außerhalb des http.get eine Variable, in die die Data dann gespeichert wird.

So sieht mein Source-Code aus:

http_get = http.get('exampleapi.com/api', (res) => {
    //console.log('statusCode: ', res.statusCode);
    //console.log('headers:', res.headers);



    let response = '';
    res.on('data', (d) => {
        response += d;
    })
    
    res.on('end', () => {
        console.log(response);
    })
});

Die Anfrage geht an ne Steam-API, welche mir ein JSON-Objekt zurückliefert, falls das hilft :)

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

Postman - GET API?

Hallo, habe eine Frage und zwar ich habe eine API mit einem Array und noch paar andere Informationen (außerhalb des arrays). Nun möchte ich aber nur die Daten des Arrays mit Postman haben. Wie geht das:

https://localhost/api/index liefert die ganzen Daten

Habe es so schon probiert, dass ich das array wo ein bestimmter Name drinnen steht ausgibt, aber da bekomme ich dann ein HTML und kein JSON als Response.

https://localhost/api/index/:name

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

Bezahl System mit API verbinden?

Hallo zusammen,

ich würde gerne auf meiner Webseite ein Bazahl System einführen. Es soll nach dem bezahlen eine API request ausgeführt werden weiß jemand wie man sowas verbindet oder ist das bei bezahl Systemen Standardmäßig eingebaut?

Danke für eure Tipps.

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

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

Längengrad Breitegrad API für Städte JavaScript?

Leider funktioniert das mit der Standort Abfrage für meine Wetter App nicht so genau und mit Safari überhaupt nicht.

Deswegen müsste ich eine Funktion einbauen mit der man seine Stadt eingeben kann/auswählen kann und die latitude und longitude von irgendeiner API bekommt.

Dann kann ich die in meinen Fetch link einfügen für die Wetter Daten.

...zur Frage

CURL Code in Java umwandeln?

Ich versuche über die DEEP API ein Bild generieren zu lassen.

Der Curl code dazu ist:

curl \
    -F 'text=YOUR_TEXT_URL' \
    -H 'api-key:quickstart-QUdJIGlzIGNvbWluZy4uLi4K' \
    https://api.deepai.org/api/text2img

Mein Java Code ist:

URL url = new URL("https://api.deepai.org/api/text2img");
HttpURLConnection con = (HttpURLConnection)url.openConnection();
con.setRequestMethod("POST");
con.setRequestProperty("Content-Type", "application/json");

JSONObject data = new JSONObject();
data.put("text", "TEXT");
data.put("api-key", "quickstart-QUdJIGlzIGNvbWluZy4uLi4K");

con.setDoOutput(true);
con.getOutputStream().write(data.toString().getBytes());

try(BufferedReader br = new BufferedReader(
        new InputStreamReader(con.getInputStream(), "utf-8"))) {
    StringBuilder response = new StringBuilder();
    String responseLine = null;
    while ((responseLine = br.readLine()) != null) {
        response.append(responseLine.trim());
    }
    return response.toString();
}

Ich bekomme jedoch folgende Fehlermeldung:

Server returned HTTP response code: 401 for URL: https://api.deepai.org/api/text2img

Kann mir jemand weiterhelfen?

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

Möglichkeit herauszufinden wohin ein Request gesendet wird?

Hi, gibt es eine Möglichkeit nur von Der Website selbst herauszufinden wohin ein Get/Post Request gesendet wird?

Zum Beispiel wenn eine Website eine API nutzt und von denen die Daten abruft, kann man dann irgendwie herausfinden von welcher API?

Danke im voraus

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

Ebay Kleinanzeigen API?

Wir versuchen einen JSON GET Call in der Ebay Kleinanzeigen API zu machen. Jedoch ist uns unklar welche login daten wir unter http://api.ebay-kleinanzeigen.de/api/ eingeben mussen? Jemand Erfahrung mit dieser API?

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen