Einbinden externer Live-Daten

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

majesticc89

Mitglied
8 Mai 2017
92
0
6
30
Hallo Leute,
folgendes Szenario. Auf einer bereits bestehenden Website gibt es eine Zahl, die stetig aktualisiert wird (bspw. Einwohnerzahl einer Stadt).
Ich hätte gerne diese Zahl auf meiner Website (immer auf dem neusten Stand). Mit dieser Zahl soll jedoch auch noch weiter gerechnet werden (bspw. Durchschnittseinwohnerzahl pro qm). Gibt es dafür eine "elegante Lösung"?
 

majesticc89

Mitglied
8 Mai 2017
92
0
6
30
Also ich würde es gerne mit AJAX machen. Bekomme es aber nicht hin. Das hier ist die API die ich holen will.
Und zwar soll die in das div=difficulty rein.
HTML:
<!doctype html>
<html>
  <head>
    <title>Calculator</title>
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  </head>
  <body>
    <header>
    </header>
    <main>
        <div class="difficulty">
        </div>
    </main>
    <footer>
    </footer>
  </body>
</html>
 
Zuletzt bearbeitet:

basti1012

Senior HTML'ler
26 November 2017
1.173
117
63
39
Minden
sebastian1012.bplaced.net
Ich sehe kein Ajax.
Hast du schon mal gegoogelt und mit Ajax irgendwas versucht ?
Hier nee Anleitung mit Jquery
und eine mit Vanilla Javascript

Ich bin gerade am überlegen was ich dir rate von den beiden Methoden.
Kuck mal rein wo du besser durchblicken tust.

Jquery hat den Vorteil das der Code meistens kürzer ist und schnell erstellt ist.
Vorteil an Vanilla ist ,
das man für die paar Codezeilen die man hier brauchen würde Jquery einbinden muß,
wenn man Jquery schon eingebunden hat dann solltest du das auch nutzen.

Wenn nicht kuck dir mal die Vanilla Version an und versuch mal dein Glück.
Falls du nicht weiter kommst helfen wir dir auch weiter
 
Zuletzt bearbeitet:

majesticc89

Mitglied
8 Mai 2017
92
0
6
30
Ich habe mir die Zahl via fetch in die console geholt. Ich stehe jetzt vor dem Problem, die Zahl im HTML anzuzeigen.
JavaScript:
fetch("https://blockchain.info/q/getdifficulty")
.then(res => res.json())
.then(data => console.log(data))
 

Tronjer

Moderator
Team
Moderator
8 Oktober 2010
5.147
458
83
Berlin
Die Fetch API ist schon richtig.

Wenn du es mit Vanilla JS machst, muss data einem Element zugeordnet werden, bsw. als innerHTML
 
  • Like
Reactions: majesticc89

Aaron3219

Senior HTML'ler
6 Oktober 2015
1.105
224
63
18
document.getElementById().innerHTML = data

data ist dann der response von deinem Promise, sofern er successful ist.
 
Zuletzt bearbeitet:
  • Like
Reactions: majesticc89

majesticc89

Mitglied
8 Mai 2017
92
0
6
30
HTML:
<p id="difficulty"></p>
    <script>
        fetch("https://blockchain.info/q/getdifficulty")
            .then(res => res.json())
            document.getElementById("difficulty").innerHTML = data
    </script>
Also gerade stehe ich voll auf dem Schlau. Ich will der p id doch nur den API Wert zuweisen.
Habe es auch schon mit var versucht.
Und was passiert wenn ich wieder mit fetch eine weitere API einbinde?Wird dann wohl kaum wieder data sein, also muss ich die doch umbennenen, oder?

Habe dazu einmal das hier erstellt: --> JSFIDDLE
 
Zuletzt bearbeitet:

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.605
314
83
67
Bei deinem Code im jsfiddle liegt nur das console.log innerhalb der anonymen Funktion für then, das Setzen von #difficulty jedoch nicht. Du musst beide Anweisungen klammern:
Code:
fetch("https://blockchain.info/q/getdifficulty")
    .then(res => res.json())
    .then(data => {
        console.log(data);
        document.getElementById("difficulty").innerHTML = data;
    });

Und was passiert wenn ich wieder mit fetch eine weitere API einbinde?Wird dann wohl kaum wieder data sein, also muss ich die doch umbennenen, oder?
Nein, Du brauchst keinen anderen Namen zu verwenden, weil dieses data keine globale Variable ist sondern nur innerhalb der Klammern des then gültig. Probiere es aus!
 
  • Like
Reactions: majesticc89

Aaron3219

Senior HTML'ler
6 Oktober 2015
1.105
224
63
18
Bei deinem Code im jsfiddle liegt nur das console.log innerhalb der anonymen Funktion für then, das Setzen von #difficulty jedoch nicht. Du musst beide Anweisungen klammern:
Code:
fetch("https://blockchain.info/q/getdifficulty")
    .then(res => res.json())
    .then(data => {
        console.log(data);
        document.getElementById("difficulty").innerHTML = data;
    });

Nein, Du brauchst keinen anderen Namen zu verwenden, weil dieses data keine globale Variable ist sondern nur innerhalb der Klammern des then gültig. Probiere es aus!
Schöner würde ich im Übrigen async/await finden.
 
  • Like
Reactions: majesticc89

majesticc89

Mitglied
8 Mai 2017
92
0
6
30
@Sempervivum : Super danke funktioniert alles wie gewollt, perfekt. Wie stellt man ein, dass die Zahl alle 10s aktualisiert wird?
Mit "setInterval (function)"?
@Aaron3219 Zu async/await habe ich mir beim Suchen tatsächlich ein kurzes Video angesehen, ist ja quasi das hauseigene Codesnippet so wie ich verstanden habe. Habe mich jetzt aber nicht mehr in das Thema ein einlesen wollen. Wie würde das dann den aussehen?
 

Aaron3219

Senior HTML'ler
6 Oktober 2015
1.105
224
63
18
Zu async/await habe ich mir beim Suchen tatsächlich ein kurzes Video angesehen, ist ja quasi das hauseigene Codesnippet so wie ich verstanden habe. Habe mich jetzt aber nicht mehr in das Thema ein einlesen wollen. Wie würde das dann den aussehen?
Gefällt mir eigentlich nicht, dir das vorzukauen. Aber ich habe gerade gute Laune :wink:.
JavaScript:
apiCall = async () => {   
  let res = await fetch('https://blockchain.info/q/getdifficulty');
  let data = await res.json();
 
  document.getElementById("difficulty").innerText = data;
};

setInterval(apiCall(), 10000);
 
  • Like
Reactions: majesticc89

majesticc89

Mitglied
8 Mai 2017
92
0
6
30
Ich habe einmal Folgendes gebaut (provisorisch, nicht lachen bitte)
JSFIDDLE
HTML:
setInterval(apiCall(), 10000);
und
HTML:
setInterval(apiCall, 10000);
funktioniert lustigerweise beides mit dem einzigen Unterschied, dass mir die Version von @Sempervivum die Zahlen erst NACH 10s holt und alle 10s aktualisiert. Bei Version1 mit Klammern sind die API Zahlen direkt da (sofern ich das sehen kann).

In dem JSFIDDLE werden am Anfang die APIs ins HTML geholt. Soweit so gut.
Drei Fragen (den Rest müsste ich dann selber hinbekommen):

1) Bei der API BTC Preis habe ich das Problem, dass sie mir bei "json" nicht angezeigt wird, nur mit "text" (siehe JSFIDDLE). Ich müsste nur auf den Dollarkurs zugreifen und auch nur auf die Zahl hinter "15m" (der Preis wird logischerweise alle 15min aktualisiert). Wie bekomme ich das hin?

2) Und wie kann ich die Zahl/Preis danach in die "input value" bekommen. Das immer der aktuellste Kurs angezeigt wird, der Benutzer ihn aber nach Belieben ändern kann.Ich habe bereits alle möglichen Kombinationen versucht, die --> document.getElementById("exchangecalc").value = data <-- irgendwie gleichzusetzen, aber ohne Erfolg.

und 3) wie kann ich die Info aus der API holen (was mir ja bereits im HTML angezeigt wird, bspw. die "Difficulty") um mit ihr zu rechnen, brauche sie in meinem Fall als eigene "var". Muss man hierzu den Weg über die Console nehmen oder kann ich direkt das innerHTML holen (was jedoch egal was ich mache nicht klappt).
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.605
314
83
67
Zu 1) Da besteht das Problem, dass die API hier ein verschachteltes Objekt liefert. Lässt Du dir den Text anzeigen, wie in deinem Fiddle, erkennst Du das. Hier musst Du selber die Informationen heraus ziehen, die Du haben willst:
Code:
apiCall = async () => {   
  let res = await fetch('https://blockchain.info/ticker');
  let data = await res.json();
  let price = data.USD['15m'];
  document.getElementById("btcprice").innerText = price;
};
Auf ein Element in einem Objekt kannst Du zugreifen, indem Du den Namen, hier "USD", mit einem Punkt davor anhängst. Bei "15m" funktioniert das aber nicht, weil bei dieser Schreibweise eine führende Ziffer nicht zulässig ist. In dem Fall muss man auf die Schreibweise mit eckigen Klammern und Hochkommas zurück greifen.
 
  • Like
Reactions: majesticc89

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.605
314
83
67
Zu 2) Mit diesem:
document.getElementById("exchangecalc").value = datawarst Du schon auf dem richtigen Weg.
Nachdem Du jetzt den richtigen Wert in USD hast, sollte das eigentlich funktionieren. In meinem Beispiel von 1) musst Du nur die Variable price statt data verwenden.
Zu 3) Siehe meine Antwort zu 1). Statt in ein HTML-Element oder ein Eingabefeld kannst Du den Wert auch in eine Variable eintragen. Du musst nur daran denken, dass das Holen des Wertes über die API asynchron erfolgt, d. h. es dauert einen Moment bis die Antwort vom Server da ist und die Variable bzw. das Eingabefeld gesetzt.
 
Zuletzt bearbeitet:
  • Like
Reactions: majesticc89

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.605
314
83
67
Zu der Frage "mit oder ohne Klammern" habe ein ein Fiddle gemacht:
Es tritt genau das ein, was zu erwarten ist: Mit Klammern funktioniert es ein Mal, weil die Funktion gleich aufgerufen wird, wenn der Timer mit setInterval angelegt wird. Übergeben wird hier nicht die Funktion bzw. deren Referenz sondern deren Rückgabewert der undefiniert ist, weil es in der Funktion keine return-Anweisung gibt.
 
Werbung:

Latest posts