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

Einbinden externer Live-Daten

majesticc89

Mitglied
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"?
 
Werbung:
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:
Werbung:
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:
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))
 
Werbung:
document.getElementById().innerHTML = data

data ist dann der response von deinem Promise, sofern er successful ist.
 
Zuletzt bearbeitet:
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:
Werbung:
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.
 
@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?
 
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);
 
Werbung:
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).
 
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.
Bei dem Fiddle funktioniert bei mir nichts :) Aber ich glaube ich weiß auf du hinaus möchtest, macht auch irgendwie Sinn, dass nicht die Funktion an sich übergeben wird.
Ich habe jetzt einmal alles übernommen und es funktioniert super. Auch habe ich mit async/await etwas komplett neues kennen gelernt, kannte ich überhaupt nicht. Ich danke euch beiden und hoffen den Rest packe ich selber. Ist jetzt einfach noch viel gecode unter anderem CSS Gestaltung.
 
Werbung:
Ich verstehe es einfach nicht, egal was ich versuche. Ich habe alles identisch wie mit der anderen Funktion gemacht (So wie ihr es empfohlen habt). Aber es funktioniert nicht.
--> JSFIDDLE <--

var dayrevenue = (hash.valueAsNumber * 86400 * reward.valueAsNumber)/(4294967296 * diff.valueAsNumber);
Hier liegt der Fehler. Durch testen weiß ich auch das es an "reward.valueAsNumber und diff.valueAsNumber" liegt.

Ich hole wie in der anderen Funktion die Daten via getElemenetbyID und ordne ihnen eine var zu. Wieso kann ich mit dieser Var nicht dann nicht weiter rechnen?
 
Zuletzt bearbeitet:
Mir ist das so zu kompliziert. Ich empfehle, zunächst diesen Code zu vereinfachen: Du verwendest für jede Währung einen eigenen API-Call obwohl bei jedem die selbe API abgefragt wird. Ändere das zunächst mal so:
Code:
apiCall = async () => {
  let res = await fetch('https://blockchain.info/ticker');
  let data = await res.json();
  document.getElementById("exchangecalc").value = data.USD['15m'];
  document.getElementById("btcusd").innerText = data.USD['15m'];
  document.getElementById("btceur").innerText = data.EUR['15m'];
  document.getElementById("btcgbp").innerText = data.GBP['15m'];
  // usw.
};

setInterval(apiCall, 1000);

Sollte ich einmal unterschiedliche setIntervall Zeiten einstellen wollen, muss ich dann doch einzelne APICalls erstellen. Der Code klappt ja nur, wenn alle synchron abgefragt werden sollen. Oder? (werde ich nicht machen, geht mir aber um das Grundverständniss)
 
Werbung:
Ich habe den APICall abgeändert.
--> JSFIDDLE <--
habe weiter mit den var gespielt aber egal was ich versuche, irgendwo steckt der Wurm drin. Es funktioniert wie erwähnt alles, bis ich die hash & diff var einfüge. Irgendwie scheint es, dass ich die ".value", die via API auf die ID gelegt ist, gar nicht erst hole bzw falsch. Aber ich verstehe nicht wo.
Auch sollte der Dollar Preis bei Energy in BTC umgerechnet werden.
<Betrag> / actuellem BTC Kurs. Das klappt auch nicht, selbes Problem...
 
Wenn ich parsefloat verwende:

function revenue() { var hash = document.getElementById("hashcalc"), diff = document.getElementById("difficulty"), reward = document.getElementById("blockreward"); var dayrevenue = (hash.valueAsNumber * 86400 * parseFloat(reward.value) )/(4294967296 * parseFloat(reward.value) ); dayrevenue = dayrevenue.toFixed(2); document.getElementById("revday").value = dayrevenue; }

löst es das Problem auch nicht. Nach wie vor wird mir nichts angezeigt
 
Zuletzt bearbeitet:
Zurück
Oben