API in HTML einfügen

ichunddu · 22. April 2019

Hallo zusammen ich habe Vorendes Problem und zwar möchte ich eine API

Curl

curl -X GET --header 'Accept: application/json' 'https://raider.io/api/v1/guilds/profile?region=eu&realm=Norgannon&name=Infinitum%20animus&fields=members'

Request URL

https://raider.io/api/v1/guild…m%20animus&fields=members

Response Body

{

"name": "Infinitum animus",

"faction": "alliance",

"region": "eu",

"realm": "Norgannon",

"profile_url": "https://raider.io/guilds/eu/norgannon/Infinitum%20animus"

}

Response Code

200

Response Headers

{

"cache-control": "public, max-age=57600",

"cf-cache-status": "MISS",

"cf-ray": "4cbaa9cadf2072c5-AMS",

"content-encoding": "br",

"content-type": "application/json; charset=utf-8",

"date": "Mon, 22 Apr 2019 21:24:12 GMT",

"expect-ct": "max-age=604800, report-uri=\"https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct\"",

"expires": "Tue, 23 Apr 2019 13:24:12 GMT",

"server": "cloudflare",

"strict-transport-security": "max-age=0; includeSubDomains",

"vary": "origin,accept-encoding",

"x-content-type-options": "nosniff",

"x-download-options": "noopen",

"x-firefox-spdy": "h2",

"x-xss-protection": "1; mode=block"

}

In eine Webseite Seite einfügen leider ohne Erfolg wenn ich die API einfüge wir mir beim Aufrufen der Seite nur der Code angezeigt kann mir wer erklären / zeigen wie das aussehen müsste ?

basti1012 · 23. April 2019

Was soll das den werden ? Hast du dein header aus der Fehlerkonsole kopiert ,oder was soll das sein.

Erklär mal was du vor hast ? Was soll der Code machen , was soll er genau anzeigen ?

Ich kann mir das zwar schon denken ,doch es bringt ja nix wenn der Code den Teil da ausliest und du nicht weißt wie es weiter gehen soll.

Den Code den du gerade gepostet hast sagt mir das du wahrscheinlich nicht viel weißt davon ???

Gib mal einen Link und kurze erklärug was du auslesen willst bzw was du genau haben möchtest.So wird das nicht viel bringen ohne eine genaue erklärung.

Und wo soll das angezeigt werden? Hast du da eine Webseite oder wie und wo soll das angezeigt werden ?

ichunddu · 23. April 2019

Richtig von API habe ich 0 Plan

Diese stammt von raider.io und sollte eigentlich die Mitglieder einer World of Warcraft Gilde anzeigen

raider.io hat diese Code Schnipsel generiert mit den Bezeichnungen Curl, Request URL, Response Code, Response Headers

nur was soll ich damit machen wie bringe ich diese in eine Webseite ?

m.scatello · 23. April 2019

Diese Info solltest du auf raider.io finden.

ichunddu · 23. April 2019

Dort habe ich die Code Schnipsel her nur was mache ich damit?

sprich wo kommt der Code hin ?

<html>

<head>

<title>Titel der Homepage</title>

</head>

<body>

Meine Homepage

</body>

</html>

https://raider.io/api#!/guild/get_api_v1_guilds_profile

ist leider nicht wirklich aufschlussreich

Sempervivum · 23. April 2019

In dem gelben Fenster sind die Informationen dargestellt, die die API liefert. Prüfe zunächst, ob es die sind, die Du brauchst, und wenn ja, können wir dir dann erklären, wie Du sie auswerten und auf deiner Homepage darstellen kannst.

ichunddu · 23. April 2019

Ja die Informationen sind richtig wie bekomme ich das nun in eine html Datei ?

Sempervivum · 23. April 2019

Hast Du denn ein wenig Erfahrung mit Javascript? Wenn gar nicht, wird wohl kein Weg daran vorbeiführen, dir eine Lösung zu geben, obwohl es den Forenregeln widerspricht.

ichunddu · 23. April 2019

Ich sags mal so ich kann einen code einfügen und sehr bedingt an meine Bedürfnisse anpassen also ehr nicht so wirklich

basti1012 · 23. April 2019

Zitat von ichunddu

ich kann einen code einfügen und sehr bedingt an meine Bedürfnisse anpassen

Macht nix. So haben die meisten angefangen.Keiner kam als Programmierer zur Welt .

Hast du den vor das zu lernen ?

m.scatello · 23. April 2019

Zitat von basti1012

Hast du den vor das zu lernen ?

Was bleibt ihm/ihr anderes übrig?

Sempervivum · 23. April 2019

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.

HTML

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

ichunddu · 24. April 2019

Erst einmal danke für die Mühe

Also ist die Request URL

Die anfrage nach Daten

https://eu.api.blizzard.com/wow/guild/Norgannon/infinitum animus?fields=members&locale=de_DE&access_token=USeFQAjyicmXsff73S3QTgSYZMdIJ94ooh

fragt ab er in der Gilde ist soweit verstehe ich das schon mal

Request Headers

Accept: application/json

Gibt an was für ein Daten Format es ist

Response Status

200 OK

Keine Ahnung was das sein soll

Response Headers

content-language: de-DE

content-type: application/json;charset=UTF-8

last-modified: Tue, 23 Apr 2019 20:24:01 GMT

ist die Ausgabe Sprache Deutsch Chinesisch Englisch is auch klar

aber wie oder besser wo ist die Antwort auf meine abfrage ??? Request URL ist die Frage und jetzt müsste doch irgendwo die Antwort nur wo und wie ?

Sempervivum · 24. April 2019

Mit den Headern braucht man sich i. allg. nicht zu befassen.

Zitat

aber wie oder besser wo ist die Antwort auf meine abfrage ?

Code

$.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) {
                // Diese Funktion ohne Name wird aufgerufen, wenn die Abfrage erfolgreich war.
                // Der Parameter output enthält die Antwort auf die Anfrage
                // Das JSON wurde schon dekodiert, d. h. es handelt sich um ein Javascript-Objekt
                console.log(output);

Sempervivum · 24. April 2019

PS: Inzwischen ist mir aufgefallen, dass im Javascript eine Schleife zu viel war. So sollte es besser sein:

Code

    <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[key1]) {
                        thehtml = thehtml.replace("{" + key2 + "-world}",
                            output.raid_rankings[key1][key2]["world"])
                            .replace("{" + key2 + "-region}",
                                output.raid_rankings[key1][key2]["region"])
                            .replace("{" + key2 + "-realm}",
                                output.raid_rankings[key1][key2]["realm"]);
                    }
                    thetbody.html(thetbody.html() + thehtml);
                }
            }
        });
    </script>

Alles anzeigen

ichunddu · 24. April 2019

Und wie würde das ganze mit

https://eu.api.blizzard.com/wow/guild/Norgannon/infinitum animus?fields=members&locale=de_DE&access_token=USeFQAjyicmXsff73S3QTgSYZMdIJ94ooh

als Abfrage funktionieren ?

Stef · 24. April 2019

Hey,

ichunddu : Sempervivium hat dir schon bei einem die komplette Lösung gegeben (dürfte er eigentlich nicht, habe aber ein Auge zugedrückt). Bitte informiere dich eigenständig darüber wie man es machen kann und probiere es aus!

Wenn du dann nicht mehr weiterkommst poste hier deinen Versuch und wir helfen dir.

Stef

Sempervivum · 24. April 2019

ichunddu Ich hatte dich doch gebeten, es zu checken, ob die Daten das sind, was Du brauchst. Und jetzt auf einmal ganz etwas anderes?

ichunddu · 24. April 2019

Ja damit ich diese api vom Rest trennen kann so habe ich es bisher immer gemacht um damit rumzuspielen also zwei unterschiedliche Lösungen dann habe ich immer das Grundgerüst und kann alles neues ausprobieren

Stef · 24. April 2019

Okay. Aber so hat es nicht geklungen. Du fragst hier immer nach einer Lösung.

Wenn das so ist poste deinen Versuch.

API in HTML einfügen

Jetzt mitmachen!

Teilen