Fragen wir erstmal anders, weißt du wie man solche Apis auslesen kann ?
Das kann man mit Php oder Javascript machen.
In beiden fälle soltest du dir Json anschauen dazu.
Beim auslesen bekommst du einen JSON Code zurück.
Den kann man dann auseinander nehmen und dann anzeigen wie du möchtest.
Auch dein Feld mit einen Button ist kein problem.
Man muß dann halt mit Javascript den Code holen.
Alles anzeigenFragen wir erstmal anders, weißt du wie man solche Apis auslesen kann ?
Das kann man mit Php oder Javascript machen.
In beiden fälle soltest du dir Json anschauen dazu.
Beim auslesen bekommst du einen JSON Code zurück.
Den kann man dann auseinander nehmen und dann anzeigen wie du möchtest.
Auch dein Feld mit einen Button ist kein problem.
Man muß dann halt mit Javascript den Code holen.
bisher habe ich es immer so gemacht
<section></section>
<script>
function getThem(selHeader, selSection, url) {
function populateHeader(jsonObj) {
var myH1 = document.createElement('h1');
myH1.textContent = jsonObj['squadName'];
header.appendChild(myH1);
var myPara = document.createElement('p');
myPara.textContent = '' + jsonObj.result[3][0].Value.UserName;
header.appendChild(myPara);
}
var header = document.querySelector(selHeader);
var section = document.querySelector(selSection);
var requestURL = url;
var request = new XMLHttpRequest();
request.open('GET', requestURL);
request.responseType = 'json';
request.send();
request.onload = function () {
var superHeroes = request.response;
populateHeader(superHeroes);
// showHeroes(superHeroes);
}
}
getThem('#table10', 'section', 'https://api.sped-v.de/rest/api?apikey=YOUR-API-KEY&function=getonlineusers')
</script>So etwas kann man auch sehr gut mit Templating bzw. Vorlagen machen. Ich habe da vor einiger Zeit eine Demo mit Vue gemacht:
<!DOCTYPE html>
<html>
<head>
<title>Demo API mit Vue</title>
<meta charset="utf-8">
</head>
<body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.js"></script>
<div id="app">
<h1>Bitcoin Price Index</h1>
<div v-for="currency in info" class="currency">
{{ currency.description }}:
<span class="lighten">
<span v-html="currency.symbol"></span>{{ currency.rate_float | currencydecimal }}
</span>
</div>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
info: null
}
},
mounted() {
axios
.get('https://api.coindesk.com/v1/bpi/currentprice.json')
.then(response => (this.info = response.data.bpi));
},
filters: {
currencydecimal(value) {
return value.toFixed(2)
}
}
});
</script>
</body>
</html>Die userID kannst Du dynamisch aus einer Variablen in die URL einbauen, z. B. so:
const userID = 8;
url = 'https://api.vtlog.net/v1/users/' + userID + '?idType=vtlog';Die userID kannst Du dynamisch aus einer Variablen in die URL einbauen, z. B. so:
Codeconst userID = 8; url = 'https://api.vtlog.net/v1/users/' + userID + '?idType=vtlog';
Kannst du vllt einen fertigen code schicken dass ich mir das mal anschauen kann
OK, ich habe es zunächst mal einfach gemacht und nur die stats angezeigt:
<!DOCTYPE html>
<html>
<head>
<title>Demo API mit Vue</title>
<meta charset="utf-8">
</head>
<body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.js"></script>
<div id="app">
<h1>Statistik</h1>
<table>
<thead>
<th>Name</th>
<th>Wert</th>
</thead>
<tbody>
<tr>
<td>Jobs</td>
<td>{{stats.jobs}}</td>
</tr>
<tr>
<td>Economy</td>
<td>{{stats.economy}}</td>
</tr>
<tr>
<td>Damage</td>
<td>{{stats.damage}}</td>
</tr>
<tr>
<td>Odometer</td>
<td>{{stats.odometer}}</td>
</tr>
<tr>
<td>Fuel</td>
<td>{{stats.fuel}}</td>
</tr>
</tbody>
</table>
</div>
<script>
const userID = 8;
url = 'https://api.vtlog.net/v1/users/' + userID + '?idType=vtlog';
new Vue({
el: '#app',
data() {
return {
stats: null
}
},
mounted() {
axios
.get(url)
.then(response => (
this.stats = response.data.response.stats
));
}
});
</script>
</body>
</html>Leider habe ich keine Zeit mehr, um Erklärungen zu schreiben. Vielleicht später.
API Calls per JavaScript, wo die API Credentials einsehbar sind ( wenn vielleicht nicht direkt, aber doch relativ problemlos )? 
Das ist hoffentlich nur eine Übung und geht nicht online...
ZitatOk Schade, du hast ja nun die id schon angegeben eigentlich wollte ich dass man diese in einem feld eintragen kann und dann die Statistiken angezeigt werden. Kannst du ja ber später noch erklären
eigentlich hatte ich mir vorgestellt, dass Du das in Eigeniniative selbst hinzu fügen kannst. Informiere dich am besten über Eventlistener und Eingabefelder (input):
Hier noch zwei Erklärungen, wie das funktioniert:
<!DOCTYPE html>
<html>
<head>
<title>Demo API mit Vue</title>
<meta charset="utf-8">
</head>
<body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.js"></script>
// In dem folgenden Container werden die Platzhalter in doppelten geschweiften Klammern
// durch die Elemente in der Antwort vom Server ersetzt, siehe auch unten im Javascript
<div id="app">
<h1>Statistik</h1>
<table>
<thead>
<th>Name</th>
<th>Wert</th>
</thead>
<tbody>
<tr>
<td>Jobs</td>
<td>{{stats.jobs}}</td>
</tr>
<tr>
<td>Economy</td>
<td>{{stats.economy}}</td>
</tr>
<tr>
<td>Damage</td>
<td>{{stats.damage}}</td>
</tr>
<tr>
<td>Odometer</td>
<td>{{stats.odometer}}</td>
</tr>
<tr>
<td>Fuel</td>
<td>{{stats.fuel}}</td>
</tr>
</tbody>
</table>
</div>
<script>
const userID = 8;
url = 'https://api.vtlog.net/v1/users/' + userID + '?idType=vtlog';
new Vue({
// Hier wird angegeben, in welchem Container die Daten
// eingetragen werden sollen:
el: '#app',
data() {
return {
stats: null
}
},
mounted() {
axios
.get(url)
// das folgende ist eine Kurzschreibweise für eine Funktion
// response ist der Eingangsparameter, in diesem Fall
// die Antwort vom Server
.then(response => (
// das was hier unter this.stats eingetragen wird,
// ist oben im HTML unter stats verfuegbar
this.stats = response.data.response.stats
));
}
});
</script>
</body>
</html>Hier noch zwei Erklärungen, wie das funktioniert:
HTMLAlles anzeigen<!DOCTYPE html> <html> <head> <title>Demo API mit Vue</title> <meta charset="utf-8"> </head> <body> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.js"></script> // In dem folgenden Container werden die Platzhalter in doppelten geschweiften Klammern // durch die Elemente in der Antwort vom Server ersetzt, siehe auch unten im Javascript <div id="app"> <h1>Statistik</h1> <table> <thead> <th>Name</th> <th>Wert</th> </thead> <tbody> <tr> <td>Jobs</td> <td>{{stats.jobs}}</td> </tr> <tr> <td>Economy</td> <td>{{stats.economy}}</td> </tr> <tr> <td>Damage</td> <td>{{stats.damage}}</td> </tr> <tr> <td>Odometer</td> <td>{{stats.odometer}}</td> </tr> <tr> <td>Fuel</td> <td>{{stats.fuel}}</td> </tr> </tbody> </table> </div> <script> const userID = 8; url = 'https://api.vtlog.net/v1/users/' + userID + '?idType=vtlog'; new Vue({ // Hier wird angegeben, in welchem Container die Daten // eingetragen werden sollen: el: '#app', data() { return { stats: null } }, mounted() { axios .get(url) // das folgende ist eine Kurzschreibweise für eine Funktion // response ist der Eingangsparameter, in diesem Fall // die Antwort vom Server .then(response => ( // das was hier unter this.stats eingetragen wird, // ist oben im HTML unter stats verfuegbar this.stats = response.data.response.stats )); } }); </script> </body> </html>
<!DOCTYPE html>
<html>
<head>
<title>Demo API mit Vue</title>
<meta charset="utf-8">
</head>
<body>
<input id="vname" name="vname">
<input type="submit" value="senden">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.js"></script>
// In dem folgenden Container werden die Platzhalter in doppelten geschweiften Klammern
// durch die Elemente in der Antwort vom Server ersetzt, siehe auch unten im Javascript
<div id="app">
<h1>Statistik</h1>
<table>
<thead>
<th>Name</th>
<th>Wert</th>
</thead>
<tbody>
<tr>
<td>Jobs</td>
<td>{{stats.jobs}}</td>
</tr>
<tr>
<td>Economy</td>
<td>{{stats.economy}}</td>
</tr>
<tr>
<td>Damage</td>
<td>{{stats.damage}}</td>
</tr>
<tr>
<td>Odometer</td>
<td>{{stats.odometer}}</td>
</tr>
<tr>
<td>Fuel</td>
<td>{{stats.fuel}}</td>
</tr>
</tbody>
</table>
</div>
<script>
const userID = 8;
url = 'https://api.vtlog.net/v1/users/' + userID + '?idType=vtlog';
new Vue({
// Hier wird angegeben, in welchem Container die Daten
// eingetragen werden sollen:
el: '#app',
data() {
return {
stats: null
}
},
mounted() {
axios
.get(url)
// das folgende ist eine Kurzschreibweise für eine Funktion
// response ist der Eingangsparameter, in diesem Fall
// die Antwort vom Server
.then(response => (
// das was hier unter this.stats eingetragen wird,
// ist oben im HTML unter stats verfuegbar
this.stats = response.data.response.stats
));
}
});
</script>
</body>
</html>Wenn ich es jetzt so mit einem Feld habe muss ich das ja auch machen das const userID = 8 die id geändert wird sozudagen wenn man eine andere zahl eingibt wie kann ich das machen
Ließ mal die Links die Sempervivum dir gegeben hat.
Da wird erklärt wie man die Felder auslesen kann.
dann must du die userId ändern.
const userId=document.getElement..............Weiter darfst du jetzt in den Links lesen.
Falls du gar nicht weiter kommst wird dir schon einer helfen , aber versuch mal erst dein Glück.
Genau, sieh dir den Code unter "Anwendungsbeispiel" an, den kannst Du relativ leicht auf unseren Fall übertragen:
Ließ mal die Links die Sempervivum dir gegeben hat.
Da wird erklärt wie man die Felder auslesen kann.
dann must du die userId ändern.
Codeconst userId=document.getElement..............Weiter darfst du jetzt in den Links lesen.
Falls du gar nicht weiter kommst wird dir schon einer helfen , aber versuch mal erst dein Glück.
Die Seite hab ich mit bereits durchgelesen aber ich weis nicht genau wie ich das einsetzen muss. Mit Javascript hatte ich bisher nur wenig zu tun
Dieses funktioniert im groben:
<!DOCTYPE html>
<html>
<head>
<title>Demo API mit Vue</title>
<meta charset="utf-8">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.js"></script>
</head>
<body>
<input id="vname" type="number" name="vname">
<input id="sendebtn" type="submit" value="senden">
<!-- In dem folgenden Container werden die Platzhalter in doppelten geschweiften Klammern
durch die Elemente in der Antwort vom Server ersetzt, siehe auch unten im Javascript -->
<div id="app">
<h1>Statistik</h1>
<table>
<thead>
<th>Name</th>
<th>Wert</th>
</thead>
<tbody>
<tr>
<td>Jobs</td>
<td>{{stats.jobs}}</td>
</tr>
<tr>
<td>Economy</td>
<td>{{stats.economy}}</td>
</tr>
<tr>
<td>Damage</td>
<td>{{stats.damage}}</td>
</tr>
<tr>
<td>Odometer</td>
<td>{{stats.odometer}}</td>
</tr>
<tr>
<td>Fuel</td>
<td>{{stats.fuel}}</td>
</tr>
</tbody>
</table>
</div>
<script>
// Eventlistener fuer Klick auf Button registrieren
// Wird der Button geklickt, wird die Funktion getData() aufgerufen
document.getElementById('sendebtn').addEventListener('click', getData);
// Code für das Holen der Daten von der API in eine Funktion legen:
function getData() {
// Name aus dem Eingabefeld auslesen:
const name = document.getElementById('vname').value.trim();
url = 'https://api.vtlog.net/v1/users/' + name + '?idType=vtlog';
new Vue({
// Hier wird angegeben, in welchem Container die Daten
// eingetragen werden sollen:
el: '#app',
data() {
return {
stats: null
}
},
mounted() {
axios
.get(url)
// das folgende ist eine Kurzschreibweise für eine Funktion
// response ist der Eingangsparameter, in diesem Fall
// die Antwort vom Server
.then(response => (
// das was hier unter this.stats eingetragen wird,
// ist oben im HTML unter stats verfuegbar
this.stats = response.data.response.stats
));
}
});
}
</script>
</body>
</html>Unschön ist noch dass beim Laden der Seite die Tabelle mit den Platzhaltern angezeigt wird. Entweder die Tabelle verbergen oder gleich die Abfrage für eine Default-ID ausführen.
Dieses funktioniert im groben:
HTMLAlles anzeigen<!DOCTYPE html> <html> <head> <title>Demo API mit Vue</title> <meta charset="utf-8"> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.js"></script> </head> <body> <input id="vname" type="number" name="vname"> <input id="sendebtn" type="submit" value="senden"> <!-- In dem folgenden Container werden die Platzhalter in doppelten geschweiften Klammern durch die Elemente in der Antwort vom Server ersetzt, siehe auch unten im Javascript --> <div id="app"> <h1>Statistik</h1> <table> <thead> <th>Name</th> <th>Wert</th> </thead> <tbody> <tr> <td>Jobs</td> <td>{{stats.jobs}}</td> </tr> <tr> <td>Economy</td> <td>{{stats.economy}}</td> </tr> <tr> <td>Damage</td> <td>{{stats.damage}}</td> </tr> <tr> <td>Odometer</td> <td>{{stats.odometer}}</td> </tr> <tr> <td>Fuel</td> <td>{{stats.fuel}}</td> </tr> </tbody> </table> </div> <script> // Eventlistener fuer Klick auf Button registrieren // Wird der Button geklickt, wird die Funktion getData() aufgerufen document.getElementById('sendebtn').addEventListener('click', getData); // Code für das Holen der Daten von der API in eine Funktion legen: function getData() { // Name aus dem Eingabefeld auslesen: const name = document.getElementById('vname').value.trim(); url = 'https://api.vtlog.net/v1/users/' + name + '?idType=vtlog'; new Vue({ // Hier wird angegeben, in welchem Container die Daten // eingetragen werden sollen: el: '#app', data() { return { stats: null } }, mounted() { axios .get(url) // das folgende ist eine Kurzschreibweise für eine Funktion // response ist der Eingangsparameter, in diesem Fall // die Antwort vom Server .then(response => ( // das was hier unter this.stats eingetragen wird, // ist oben im HTML unter stats verfuegbar this.stats = response.data.response.stats )); } }); } </script> </body> </html>Unschön ist noch dass beim Laden der Seite die Tabelle mit den Platzhaltern angezeigt wird. Entweder die Tabelle verbergen oder gleich die Abfrage für eine Default-ID ausführen.
Vielen Dank das mit den Platzhaltern werde ich selbst hinbekommen
API Calls per JavaScript, wo die API Credentials einsehbar sind ( wenn vielleicht nicht direkt, aber doch relativ problemlos )?
Das ist hoffentlich nur eine Übung und geht nicht online...
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!
