[ERLEDIGT] JSON weiter verarbeiten

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

Skidrow

Mitglied
12 Juni 2017
30
1
8
40
Hallo, ich habe schon wieder eine Frage. Ich möchte mir Statistiken von World of Tanks ausgeben lassen. Dazu muss man eine URL aufrufen die sich aus einer Application_ID besteht und dem Suchbegriff.
https://api.worldoftanks.eu/wot/account/list/?application_id=xxxx&search=defskidrow

Vom Server wird mir daraufhin ein JSON geschickt. Dies möchte ich jetzt verarbeiten.
So sieht das als Beispiel aus:
Code:
{
    "status": "ok",
    "meta": {
        "count": 1
    },
    "data": [
        {
            "nickname": "DEFSKIDROW",
            "account_id": 500995666
        }
    ]
}
Daraus würde ich gerne den Nickname und die Account-ID auf der Internetseite ausgeben.

Ich würde gerne meinen vorhandenen Code erweitern. Außer ihr sagt, das er totaler Müll ist.
Code:
<html>
   <head>
      <script type = "text/javascript" src = "https://code.jquery.com/jquery-1.7.2.js"></script>
   
      <script type = "text/javascript" language = "javascript">
        $(document).ready(function(){
            $("#Spielersuche").submit(function(){
                if($("#application_id").attr("value") == "" || $("#search").attr("value") == ""){
                    $("#Ergebnis").html("Bitte fülle alle Felder aus!");
                } else {
                    $("#Ergebnis").html("Lade...");
                    $.ajax({
                        type: "GET",
                        url: "https://api.worldoftanks.eu/wot/account/list/",
                        data: "application_id=" + $("#application_id").attr("value") + "&search=" + $("#search").attr("value"),
                        succes:
                   
                   
                    });
               
                }
                return false;
            });       
        });

        </script>

   </head>
 
   <body>
 
        <form id="Spielersuche"action="spielersuche.php" method="GET">
            <input id="application_id"  type="hidden" value="ba99b565bf48c0ffcb2fccb0aa061f27" />
            <input id="search"  type="text" />
            <p style="font-size: 10px;">Mit * gekennzeichnete Felder sind Pflichtfelder</p>
            <input id="submit" type="submit" value="Spieler suchen" />
        </form>
   
      <div id ="Ergebnis" style = "background-color:#eee;">
     
      </div>
   
   </body>
 
</html>
 
Zuletzt bearbeitet:

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.147
428
83
68
jQuery unterstützt auch JSON. Geht etwa so:
Code:
jQuery.getJSON(
    "https://api.worldoftanks.eu/wot/account/list/",
    "application_id=" + $("#application_id").attr("value") + "&search=" + $("#search").attr("value"),
    function(data) {
        // in data steht dir jetzt das geparste JSON in Form eines Javascript-Objektes zu Verfügung
    }
);
(ungetestet)
 
  • Like
Reaktionen: Skidrow

Skidrow

Mitglied
12 Juni 2017
30
1
8
40
Danke dir Sempervivum! Genau das hat mich weiter gebracht. Den fertigen Code Poste ich dann auch mal. Werde mich bestimmt nochmal wegen irgendeinem Problem bei euch melden.

Code:
<html>
   <head>
      <script type = "text/javascript" src = "https://code.jquery.com/jquery-1.7.2.js"></script>
   
      <script type = "text/javascript" language = "javascript">
        $(document).ready(function(){
            $("#Spielersuche").submit(function(){
                if($("#application_id").attr("value") == "" || $("#search").attr("value") == ""){
                    $("#Ergebnis").html("Bitte fülle alle Felder aus!");
                } else {
                    $("#Ergebnis").html("Lade...");
                    jQuery.getJSON("https://api.worldoftanks.eu/wot/account/list/","application_id=" + $("#application_id").attr("value") + "&search=" + $("#search").attr("value"),
                        function(data) {
                            // in data steht dir jetzt das geparste JSON in Form eines Javascript-Objektes zu Verfügung
                            var output="<ul>";
                            for (var i in data.data) {
                                output+="<li>" + data.data[i].nickname + " " + data.data[i].account_id + "</li>";
                            }
                       
                            output+="</ul>";
                            document.getElementById("Ergebnis").innerHTML=output;
                        }
                    );
                }
                return false;
            });      
        });

        </script>

   </head>

   <body>

        <form id="Spielersuche"action="spielersuche.php" method="GET">
            <input id="application_id"  type="hidden" value="ba99b565bf48c0ffcb2fccb0aa061f27" />
            <input id="search"  type="text" />
            <p style="font-size: 10px;">Mit * gekennzeichnete Felder sind Pflichtfelder</p>
            <input id="submit" type="submit" value="Spieler suchen" />
        </form>
   
        <div id ="Ergebnis" style = "background-color:#eee;"></div>
   
   </body>

</html>
 

scbawik

Senior HTML'ler
14 Juli 2011
2.552
448
83
JSON.parse wird übrigens nativ von JS unterstützt.
$.getJSON ist eigentlich nur ein Shortcut für $.ajax mit anschließendem JSON.parse.
 
Werbung: