Ich habe da mal etwas zusammen gebaut, und zwar habe ich Templates verwendet, damit Du das HTML einfach an deine Wünsche anpassen kannst. Die URL ist noch statisch, wenn Du die Parameter dynamisch machen willst, muss man das noch ändern.
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>JSON-API</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<!-- in den folgenden Templates stehen Platzhalter, die durch die Elemente,
die von der API geliefert werden, ersetzt werden
Beispiel: {name} wird durch "Infinitum animus" ersetzt und ist dann so
auf deiner Seite sichtbar.
Das HTML außerhalb der geschweiften Klammern kannst Du anpassen -->
<template id="api-template">
<div>Name: {name}</div>
<div>Faction: {faction}</div>
<div>Region: {region}</div>
<div>Realm: {realm}</div>
<div>Profil: <a href="{profile_url}">Hier klicken</a></div>
<table>
<!-- hier den Tabellenkopf statisch einfügen -->
<tbody id="api-table-body"></tbody>
</table>
</template>
<template id="api-template-tr">
<tr>
<td>{key1}</td>
<td>{normal-world}</td>
<td>{normal-region}</td>
<td>{normal-realm}</td>
<td>{heroic-world}</td>
<td>{heroic-region}</td>
<td>{heroic-realm}</td>
<td>{mythic-world}</td>
<td>{mythic-region}</td>
<td>{mythic-realm}</td>
</tr>
</template>
</head>
<body>
<div id="api-content">
</div>
<script>
$.ajax({
url: "https://raider.io/api/v1/guilds/profile?region=eu&realm=Norgannon&name=Infinitum%20animus&fields=name,faction,region,realm,profile_url,raid_rankings",
dataType: "json",
success: function (output) {
console.log(output);
var thehtml = $("#api-template").html()
.replace("{name}", output.name)
.replace("{faction}", output.faction)
.replace("{region}", output.region)
.replace("{realm}", output.realm)
.replace("{profile_url}", output.profile_url);
$("#api-content").html(thehtml);
var thetbody = $("#api-table-body");
for (var key1 in output.raid_rankings) {
var thehtml = $("#api-template-tr").html().replace("{key1}", key1);
for (var key2 in output.raid_rankings) {
for (var key3 in output.raid_rankings[key2]) {
thehtml = thehtml.replace("{" + key3 + "-world}",
output.raid_rankings[key2][key3]["world"])
.replace("{" + key3 + "-region}",
output.raid_rankings[key2][key3]["region"])
.replace("{" + key3 + "-realm}",
output.raid_rankings[key2][key3]["realm"]);
}
}
thetbody.html(thetbody.html() + thehtml);
}
}
});
</script>
</body>
</html>
Alles anzeigen
