Json mit javascipt bearbeiten

Stef · 9. November 2017

Hey,

ich habe ein Problem, welches ich trotz googeln nicht lösen kann.

Ich hole nun von der Seite http://api.zippopotam.us den Ortsnamen anhand der plz und ich bekomme Json als Format zurück.

So siehts aus:

Code

{"post code": "69115", "country": "Germany", "country abbreviation": "DE", "places": [{"place name": "Heidelberg", "longitude": "8.6868", "state": "Baden-W\u00fcrttemberg", "state abbreviation": "BW", "latitude": "49.4062"}]}

Nun habe ich erstmal dieses json geparst mit json.parse(). Da bekomme ich aber ausgegeben object object. Also keine weitere Daten mehr. Und wenn ich versuche dies weiterzuverarbeiten funktioniert der Code nichtmehr.

Mein Code:

JavaScript

window.onload = function(){
             var plz = document.getElementById("postleitzahl");

             plz.addEventListener("keyup", getJson());

             function getJson(){

                     var plz = document.getElementById("postleitzahl").value;

                     //alert(plz);

                     var client = new XMLHttpRequest();
                    client.open("GET", "http://api.zippopotam.us/de/" + plz, true);
                
                        client.onreadystatechange = function() {
                            if(client.readyState == 4) {
                                var jsonData = client.responseText; //JSON:  {"post code": "69115", "country": "Germany", "country abbreviation": "DE", "places": [{"place name": "Heidelberg", "longitude": "8.6868", "state": "Baden-W\u00fcrttemberg", "state abbreviation": "BW", "latitude": "49.4062"}]}

                          
                                var data = json.parse(jsonData);
                                alert(data); // -> gibt manchmal obj obj aus oder auch nix

                            } 
                        }

                    client.send();
                 }
             }

Alles anzeigen

Habe dann versucht mit dem untenstehenden code den Wert auszugeben, jedoch wird dann nix mehr ausgegeben.

JavaScript

var wohnort = data.places[0].[place name];
alert(wohnort);

Stef · 9. November 2017

Problem gelöst.

JavaScript

var data = data['places'][0]['place name'];

Noch ne Frage:

Ich habe folgenden Code:

JavaScript

window.onload = function(){
             var plz = document.getElementById("postleitzahl");

             plz.addEventListener("keyup", getJson());

             function getJson(){

                     var plz = document.getElementById("postleitzahl").value;

                     //alert(plz);

                     var client = new XMLHttpRequest();
                    client.open("GET", "http://api.zippopotam.us/de/" + plz, true);
                
                        client.onreadystatechange = function() {
                            if(client.readyState == 4) {
                                var jsonData = client.responseText; 
                                //JSON:  {"post code": "69115", "country": "Germany", "country abbreviation": "DE", "places": [{"place name": "Heidelberg", "longitude": "8.6868", "state": "Baden-W\u00fcrttemberg", "state abbreviation": "BW", "latitude": "49.4062"}]}
                                
                                var data = JSON.parse(jsonData); // object object
                                var data = data['places'][0]['place name'];

                                
                                document.getElementById("wohnort").value = data;

                            } 
                        }

                    client.send();
                 }
             }

Alles anzeigen

Ich habe den keyup eventListener ja auf die funktion getJson() intialisiert. Nun wird aber erst der Name des Ortes nach dem neu laden der Seite angezeigt ?

Sempervivum · 9. November 2017

Code

data.places[0].[place name];

Da sind zwei Syntaxfehler:

Der Punkt ist zuviel.
Da place name keine Variable ist, sondern ein String und weil es ein Leerzeichen enthält, muss es in Hochkommas eingeschlossen werden.

So funktioniert es:

Code

var wohnort = data.places[0]["place name"];

1. Möglichkeit, ein Element in einem Objekt anzusprechen:

data.country

2. Möglichkeit:

data["country"]

diese Möglichkeit funktioniert auch, wenn der Schlüssel in einer Variablen steht:

Code

var key = "country";
var country = data[key];

Mit der 1. Möglichkeit funktioniert dies nicht.

Sempervivum · 9. November 2017

Ups, da haben sich unsere Postings überschnitten.

Stef · 9. November 2017

Hey,

ok alles klar. Ich wusste nur nicht, dass man in javascript objekte auch so ansprechen kann wie arrays in php.

Trotzdem Danke.

Ich habe noch ein Problem wo ich nicht weiß warum das so ist. Ich führe bei keyup die function getJson() aus.

Da soll dann doch sofort der wohnort in dem Feld angezeigt werden und nicht erst nach dem absenden des Formulares.

Mein akutelles Script dazu:

JavaScript

window.onload = function(){
             var plz = document.getElementById("postleitzahl");

             plz.addEventListener("keyup", getJson());

             function getJson(){

                     var plz = document.getElementById("postleitzahl").value;

                     //alert(plz);

                     var client = new XMLHttpRequest();
                    client.open("GET", "http://api.zippopotam.us/de/" + plz, true);
                
                        client.onreadystatechange = function() {
                            if(client.readyState == 4) {
                                var jsonData = client.responseText; 
                                //JSON:  {"post code": "69115", "country": "Germany", "country abbreviation": "DE", "places": [{"place name": "Heidelberg", "longitude": "8.6868", "state": "Baden-W\u00fcrttemberg", "state abbreviation": "BW", "latitude": "49.4062"}]}
                                
                                var data = JSON.parse(jsonData); // object object
                                var data = data['places'][0]['place name'];

                                
                                document.getElementById("wohnort").value = data;

                            } 
                        }

                    client.send();
                 }
             }

Alles anzeigen

Sempervivum · 9. November 2017

Häufiger Fehler:

Code

plz.addEventListener("keyup", getJson());

Was passiert: Da der Funktionsname getJson von einem Klammernpaar gefolgt wird, wird die Funktion sofort ausgeführt und ihr Rückgabewert zugewiesen. Das Klammernpaar muss man weg lassen, dann wird eine Referenz der Funktion zugewiesen:

Code

plz.addEventListener("keyup", getJson);

Außerdem ist es ungünstig, hier das keyup-Event zu verwenden, da dieses ja bei jedem Tastendruck feuert, so dass die Auswertung fehl schlägt, wenn noch keine fünf Zeichen eingegeben wurden. Besser "change" verwenden oder prüfen, ob schon fünf Ziffern eingegeben wurden.

Stef · 9. November 2017

Ach ja.. diesen Fehler mache ich oft. Muss ich mir abgewöhnen. Danke.

Ja da hast du recht. Change greift dann erst, wenn was verändert wurde ?

Noch 1ne Sache.

Ich füge, wenn die length von der plz ungleich 5 ist, eine Klasse hinzu die den Border des input feldes rot werden lässt. Aber wenn ich nun wieder 5 eingebe geht der rote rahmen nicht weg. Warum ist dass denn so? Ich entferne die Class ja wieder wenn die plz.length gleich 5 ist.

JavaScript

if(plz.length === 5){
                         var client = new XMLHttpRequest();
                        client.open("GET", "http://api.zippopotam.us/de/" + plz, true);

                        client.onreadystatechange = function() {
                            if(client.readyState == 4) {


                                var jsonData = client.responseText; 
                                
                                
                                var data = JSON.parse(jsonData); 
                                var data = data['places'][0]['place name'];


                                document.getElementById("wohnort").value = data;


                            } 
                        }
                        
                        client.send();
                        
                     } else if(plz.length !== 5){

                         var plz = document.getElementById("postleitzahl");

                        plz.classList.add("fielderror");


                     } else{
                         plz.classList.remove("fielderror");
                     }

Alles anzeigen

Sempervivum · 9. November 2017

Zwei Probleme:

1. In Zeile 24 bist Du schon im else-Zweig der Abfrage if(plz.length === 5), d. h. die Länge ist in jedem Fall ungleich 5 und Du kommst nie in den else-Zweig in Zeile 32 hinein.

2. Die Variable "plz" ist doppelt belegt, einmal mit dem DOM-Element und dann mit dessen Value. Besser dem Value einen anderen Namen geben, z. b. "plzval".

So funktioniert es:

Code

        window.onload = function () {
            var plz = document.getElementById("postleitzahl");
            plz.addEventListener("keyup", getJson);
            function getJson() {
                var plzval = document.getElementById("postleitzahl").value;
                if (plzval.match(/[0-9]{5}/)) {
                    plz.classList.remove("fielderror");
                    var client = new XMLHttpRequest();
                    client.open("GET", "http://api.zippopotam.us/de/" + plzval, true);

                    client.onreadystatechange = function () {
                        if (client.readyState == 4) {
                            var jsonData = client.responseText;
                            //JSON:  {"post code": "69115", "country": "Germany", "country abbreviation": "DE", "places": [{"place name": "Heidelberg", "longitude": "8.6868", "state": "Baden-W\u00fcrttemberg", "state abbreviation": "BW", "latitude": "49.4062"}]}

                            var data = JSON.parse(jsonData); // object object
                            var data = data['places'][0]['place name'];

                            document.getElementById("wohnort").value = data;
                        }
                    }
                    client.send();
                } else {
                    plz.classList.add("fielderror");
                }
            }
        }

Alles anzeigen

Ich habe, statt nur die Länge abzufragen, mit einer Regex zusätzlich geprüft, ob die Eingabe auch nummerisch ist.

Zitat

Change greift dann erst, wenn was verändert wurde ?

Change triggert dann, wenn die Eingabe mit Enter bestätigt wurde. Keyup oder Input haben jedoch den Vorteil, dass man den Wert während der Eingabe überprüfen kann, so wie es jetzt der Fall ist.

Stef · 9. November 2017

Ouh ok. Ja da hast du recht. War nicht gut von mir. Muss ich mehr darauf achten.

Mit dem preg_match ist eine gute Idee. Wieso komm ich nicht auf so gute Ideen.

Frage zum PregMatch um es zu verstehen:

match(/[0-9]{5}/) -> die / sagen aus das es beginnt und es beendet. In den [] stehen dann die zugelassenen Zahlen und in der {} Klammer steht dann die Länge der zugelassenen Zahl. Stimmt das so ?

Ok. Kaum jemand klickt heutzutage um ein formular abzusenden enter. Darum habe ich mich auch für keyup entschieden.

Vielen Dank TOP Hilfe !

Habe es so durch deine Hilfestellung gelöst:

JavaScript

window.onload = function(){
             var plz = document.getElementById("postleitzahl");

             plz.addEventListener("keyup", getJson);

             function getJson(){

                     var plzVal = document.getElementById("postleitzahl").value;
                     
                     
                     if(plzVal.match(/[0-9]{5}/)){

                         plz.classList.remove("fielderror");

                         var client = new XMLHttpRequest();
                        client.open("GET", "http://api.zippopotam.us/de/" + plzVal, true);

                        client.onreadystatechange = function() {
                            if(client.readyState == 4) {

                                var jsonData = client.responseText; 
                                var ort = document.getElementById("wohnort");

                                if(jsonData){

                                    var data = JSON.parse(jsonData); 
                                    var data = data['places'][0]['place name'];

                                    ort.value = data;
                                } 
                                

                            } 
                        }
                        
                        client.send();
                        
                     } else{
                         var ort = document.getElementById("wohnort");

                         ort.value = "";
                        plz.classList.add("fielderror");

                     }

                     
                 }
             }

Alles anzeigen

Sempervivum · 9. November 2017

Zitat

match(/[0-9]{5}/) -> die / sagen aus das es beginnt und es beendet. In den [] stehen dann die zugelassenen Zahlen und in der {} Klammer steht dann die Länge der zugelassenen Zahl. Stimmt das so ?

Korrekt. Zu Regex findet man sehr viel im Netz, auch Online-Tester als Hilfe beim Entwickeln.

Stef · 9. November 2017

Alles klar. Danke

Stef · 9. November 2017

Der Lösungsweg mit dem .match("muster") ist doch nicht so gut.

Ich habe mal getestet was passiert, wenn man mehr als 5 Zahlen eingibt. Das Resultat war, dass immernoch der Ort der vorher eingegebene 5 Zahlen angezeigt wird, obwohl es diese PLZ (mit mehr als 5 Zeichen) garnicht geben kann.

Habe dann doch die Variante mit length genommen. Wenn einer nun auf die Idee kommt und gibt dort Buchstaben ein, wird ja schließlich nix angezeigt bei Wohnort. Denn die Suche erfolgt mit Hilfe der PLZ.

Script:

JavaScript

window.onload = function(){
             var plz = document.getElementById("postleitzahl");

             plz.addEventListener("keyup", getJson);

             function getJson(){

                     var plzVal = document.getElementById("postleitzahl").value;
                     

                         if(plzVal.length === 5){

                         plz.classList.remove("fielderror");

                         var request = new XMLHttpRequest();
                        request.open("GET", "http://api.zippopotam.us/de/" + plzVal, true);

                        request.onreadystatechange = function() {
                            if(request.readyState == 4) {

                                var jsonData = request.responseText; 
                                var ort = document.getElementById("wohnort");

                                if(jsonData){

                                    var data = JSON.parse(jsonData); 
                                    var data = data['places'][0]['place name'];

                                    ort.value = data;
                                } 
                                

                            } 
                        }
                        
                        request.send();
                        
                     } else if(plzVal.length < 5 || plzVal.length > 5){
                         var ort = document.getElementById("wohnort");

                         ort.value = "";
                        plz.classList.add("fielderror");

                     }

                     
                 }
             }

Alles anzeigen

Sempervivum · 9. November 2017

Zitat

Der Lösungsweg mit dem .match("muster") ist doch nicht so gut.

Das möchte ich entschieden bezweifeln. Das Problem ist, dass die Regex passt, wenn irgendwo fünf Ziffern hintereinander stehen. Das ist dann auch der Fall, wenn die Eingabe sechs, sieben oder hundert Ziffern enthält.

Die Regex kann man sehr leicht anpassen, so dass nicht weniger und nicht mehr als fünf Zeichen vorhanden sein dürfen:

Code

if (plzval.match(/^[0-9]{5}$/))

Funktioniert bei mir, probiere es aus.

Stef · 9. November 2017

Ok. Ich nehme es zurück.Du hast dort grad ^ und $ hinzugefügt

Habe mal gegoogelt.

^ steht für: Beginn einer Zeichenkette

$ steht für: Ende einer Zeichenkett

Also sagt man dann damit, dass das Erwartete eine Zahl die 5 Nummern lang sein muss ist. ^ und $ vor und hinter den vorgaben sagen dann aus, dass nach den 5 Nummern schluss ist.

Sempervivum · 9. November 2017

Zitat

Also sagt man dann damit, dass das Erwartete eine Zahl die 5 Nummern lang sein muss ist. ^ und $ vor und hinter den vorgaben sagen dann aus, dass nach den 5 Nummern schluss ist.

Genau. Oder anders gesagt, die Regex passt, wenn zwischen Anfang und Ende genau fünf Ziffern stehen.

basti1012 · 9. November 2017

Sempervivum ich muss dir mal ein lob geben ...ich lese dir gerne zu weil man von dir echt gut was lernen tut und du echt ahnung hast ...Mach weiter so

Sempervivum · 9. November 2017

Danke, so etwas liest man gern!

Json mit javascipt bearbeiten

Jetzt mitmachen!

Teilen