JQuery - Werte zu JSON Array hinzufügen

[ebody]

Hallo,

ich lese eine KML Datei mit JQuery in einer Schleife aus. Bei jedem Durchlauf möchte ich die Werte einem JSON Array hinzufügen.

Das JSON Array soll am Ende so aussehen:

var kmlValues = {
'Quahog' : {'lat': 70.325671,'lng': -73.123456},
'Entenhausen' : {'lat': 72.325671,'lng': -75.123456},
'Springfield' : {'lat': 74.325671,'lng': -78.123456}
};

Das Script:

// Das Array
var kmlValues = {};

// KML Datei 
$.get("http://localhost/datei.kml", function(data){

	// KML Datei wird in Schleife ausgelesen
	$(data).find("Placemark").each(function(index, value){

		// Werte in Variablen speichern
		strKmlPlacemark = $(this).find("name").text();
		strKmlCoordinates = $(this).find("coordinates").text();

		// Koordinaten Wert in Array zerlegen
		arrSplitKmlCoordinates = strKmlCoordinates.split(",");

		// Werte dem Array hinzufügen
		kmlValues.push(
			strKmlPlacemark : {"lat": arrSplitKmlCoordinates[1],"lng": arrSplitKmlCoordinates[0]}
		);

	});

});

console.log(kmlValues);

Das funktioniert so aber leider nicht. Ich erhalte die Fehlermeldung

Uncaught SyntaxError: missing ) after argument list

Wie macht man es richtig?

VG ebody

[Felix Riesterer]

Lieber ebody,

Das JSON Array soll am Ende so aussehen:

var kmlValues = {
'Quahog' : {'lat': 70.325671,'lng': -73.123456},
'Entenhausen' : {'lat': 72.325671,'lng': -75.123456},
'Springfield' : {'lat': 74.325671,'lng': -78.123456}
};

das ist kein Array, sondern ein ganz gewöhnliches Objektliteral. Die Ortsnamen sind die Eigenschaftsnamen im Objekt und ihre Werte ihrerseits wieder Objekte.

		// Werte dem Array hinzufügen
		kmlValues.push(
			strKmlPlacemark : {"lat": arrSplitKmlCoordinates[1],"lng": arrSplitKmlCoordinates[0]}
		);

Da Du kein Array benutzt, kannst Du die push-Methode nicht einsetzen, da sie nicht zur Verfügung steht. Das hätte so auch keinen Sinn, da ein Array numerische Indices benutzt, und eben keine "Namen". Stattdessen möchtest Du Deinem Objekt eine neue Eigenschaft mit dem Namen in strKmlPlacemark verpassen:

  // Werte dem Objekt hinzufügen
  kmlValues[strKmlPlacemark] = {"lat": arrSplitKmlCoordinates[1],"lng": arrSplitKmlCoordinates[0]};

Liebe Grüße,

Felix Riesterer.

[dedlfix]

Tach!

Das JSON Array soll am Ende so aussehen:

var kmlValues = {
'Quahog' : {'lat': 70.325671,'lng': -73.123456},
'Entenhausen' : {'lat': 72.325671,'lng': -75.123456},
'Springfield' : {'lat': 74.325671,'lng': -78.123456}
};

Das ist kein Array, das ist ein verschachteltes Objekt. Und da es kein Array ist, hat es auch keine push-Methode. Man kann aber auf Elemente eines Objekts über Strings und Werte in Variablen zugreifen, siehe drittes Beispiel, Klammer-Notation.

		// Werte dem Array hinzufügen
		kmlValues.push(
			strKmlPlacemark : {"lat": arrSplitKmlCoordinates[1],"lng": arrSplitKmlCoordinates[0]}
		);

Das funktioniert so aber leider nicht. Ich erhalte die Fehlermeldung

Uncaught SyntaxError: missing ) after argument list

Das ist ja auch Phantasie-Syntax. Und bitte sag beim nächsten Mal, auf welche Zeile sich diese Meldung bezieht.

Man kann mit push() auch Objekte hinzufügen, aber nur zu einem Array, und die müssen vollständig notiert sein. Nur die Innereien eines Objekt-Literals hinzuschreiben, ist nicht zulässig. Aber das führt am Ende auch nicht zu dem Gebilde, das du anfangs angegeben hast, sondern zu einem Array mit numerischen Indexen.

dedlfix.

[Gunnar Bittersmann]

@@ebody

Das JSON Array soll am Ende so aussehen:

var kmlValues = {
'Quahog' : {'lat': 70.325671,'lng': -73.123456},
'Entenhausen' : {'lat': 72.325671,'lng': -75.123456},
'Springfield' : {'lat': 74.325671,'lng': -78.123456}
};

Das das kein Array ist, wurde schon gesagt. Es ist aber auch kein JSON.

JSON-Syntax kennt nur eine Sorte von Anführungszeichen: doppelte.

LLAP 🖖

[pl]

@Gunnar Bittersmann

JSON-Syntax kennt nur eine Sorte von Anführungszeichen: doppelte.

Das wusste ich auch noch nicht, danke. Aber normalerweise muss man das ja auch nicht wissen, denn es gibt ja JSON 😉

MfG

[dedlfix]

Tach!

Das JSON Array soll am Ende so aussehen:

var kmlValues = {
'Quahog' : {'lat': 70.325671,'lng': -73.123456},
'Entenhausen' : {'lat': 72.325671,'lng': -75.123456},
'Springfield' : {'lat': 74.325671,'lng': -78.123456}
};

Das das kein Array ist, wurde schon gesagt. Es ist aber auch kein JSON.

JSON-Syntax kennt nur eine Sorte von Anführungszeichen: doppelte.

Was auch letztlich irrelevant ist, denn das ist lediglich ein Javascript-Objektliteral, und JSON hat an der Stelle keine Bewandnis. Die einfachen Anführungszeichen sind also korrekt. Nicht korrekt war lediglich sowohl das Wort Array als auch der Zusatz JSON.

dedlfix.

[ebody]

Hallo zusammen,

vielen Dank an alle, das hat mir sehr weitergeholfen (jede einzelne Info, auch mit den doppelten Anführungszeichen u.a.).

Die Lösung von Felix Riesterer funktioniert.

kmlValues[strKmlPlacemark] = {"lat": arrSplitKmlCoordinates[1],"lng": arrSplitKmlCoordinates[0]};

Ich bin ehrlich gesagt noch etwas verwirrt, weil ich zuvor u.a. ein Video geschaut hatte, wo gesagt wurde, das Objekte und Arrays in Javascript eigentlich das gleiche sind und auch die gleiche Syntax haben und auch auf die gleiche Weise drauf zugegriffen werden kann.

Gruß und vielen Dank ebody

[dedlfix]

Tach!

vielen Dank an alle, das hat mir sehr weitergeholfen (jede einzelne Info, auch mit den doppelten Anführungszeichen u.a.).

Wie angemerkt, da du kein JSON an der Stelle hast, müssen da auch keine doppelten Anführungszeichen stehen. Du hast da nur Javascript und das kann und darf doppelte genauso wie einfache.

Ich bin ehrlich gesagt noch etwas verwirrt, weil ich zuvor u.a. ein Video geschaut hatte, wo gesagt wurde, das Objekte und Arrays in Javascript eigentlich das gleiche sind und auch die gleiche Syntax haben und auch auf die gleiche Weise drauf zugegriffen werden kann.

Ein Array ist eine spezielle Art von Objekt. Deshalb hat es einige Gemeinsamkeiten mit Objekten. Aber auch ein paar Besonderheiten, vor allem auch in speziellen Methoden, die andere Objekte nicht haben.

dedlfix.

[pl]

Hallo,

ich lese eine KML Datei mit JQuery in einer Schleife aus. Bei jedem Durchlauf möchte ich die Werte einem JSON Array hinzufügen.

Es gibt keine JSON Array's. JSON meint je nach Kontext entweder das Objekt window.JSON mit dem man bestimmte Methoden aufrufen kann wie z.B. JSON.stringify() oder JSON meint den mit dieser Methode erzeugten String selbst.

MfG

[1unitedpower]

Es gibt keine JSON Array's.

Doch: https://tools.ietf.org/html/rfc7159#section-5

[pl]

Es gibt keine JSON Array's.

Doch: https://tools.ietf.org/html/rfc7159#section-5

Das beschreibt wie der String aufgebaut ist in dem ein Array serialisiert wurde!

[Rolf B]

Hallo ebody,

darf ich noch hinzufügen, dass $(xml)... nicht zulässig ist? Die JQuery-Doku spezifiziert ausdrücklich, dass dort html erwartet wird, kein XML.

Für deinen Anwendungszweck musst Du zunächst den String in ein XML-Dokument übersetzen, darauf kannst Du dann jQuery anwenden.

$.get("http://localhost/datei.kml", function(data){
  let xmlDoc = $.parseXML(data);
	// KML Datei wird in Schleife ausgelesen
	$(xmlDoc).find("Placemark").each(function(index, value){
...

Übrigens ist jQuery hier kein Muss - Ajax-Requeste kann man auch mit fetch machen und das Parsen des XML-Dokumentes gelingt mit DOM-Funktionen wie querySelector (om mani padme hum om mani padme hum ... ).

Rolf

[Lukas M.]

Hallo!

Freundlich von dir dass du versuchst zu helfen aber es stimmt nicht ganz was du sagst.

darf ich noch hinzufügen, dass $(xml)... nicht zulässig ist? Die JQuery-Doku spezifiziert ausdrücklich, dass dort html erwartet wird, kein XML.

jQuery kann mit einem XML DOM durchaus umgehen

Für deinen Anwendungszweck musst Du zunächst den String in ein XML-Dokument übersetzen, darauf kannst Du dann jQuery anwenden.

Wieso das denn? Der Browser parst die Response automatisch von XML -> DOM wenn der MIMETYPE stimmt. Der jQuery Ajax Callback bekommt bereits ein 'XMLDocument' hinein.

[http://api.jquery.com/jQuery.ajax/]

$.get("http://localhost/datei.kml", function(data){ let xmlDoc = $.parseXML(data);

'data' ist schon ein XMLDocument! Da muss man nicht parseXML aufrufen.

Übrigens ist jQuery hier kein Muss

jQuery ist nirgendwo Muss. Was nicht heisst dass es nicht hilfreich ist.

• Ajax-Requeste kann man auch mit fetch machen

Man kann den Teufel auch mit dem Bellzebub austreiben.

• Fetch wird von 77,5 % der Browser unterstützt
• Fetch benötigt einen Fetch Polyfill
• Der Fetch Polyfill benötigt einen Promise Polyfill
• Das sind dann 10 KB Polyfills

Wenn man schon auf jQuery verzichten will dann kann kann man XMLHttpRequest nutzen:

var xhr = new XMLHttpRequest();
xhr.onload = function(){
  console.log(xhr.responseXML);
};
xhr.open('GET', 'xyz.xml');
xhr.send();

und das Parsen des XML-Dokumentes gelingt mit DOM-Funktionen wie querySelector

Ähhhh moment mal. Fetch bietet keine Methode um auf das XML DOM zuzugreifen. Man muss erst mal response.text() aufrufen. Dann manuell mit DOMParser parsen. DANN kann man querySelector verwenden. (Aus dem Grund kann jQuery auch damit arbeiten.)

fetch('test.xml')
  .then((response) => response.text())
  .then((text) => {
    var doc = new DOMParser().parseFromString(text, 'application/xml');
    console.log(doc);
  });

Aber wieso sollte man das tun wenn es mit XHR einfacher geht und jeder Browser es versteht.

Oder einfach bei jQuery bleiben wenn man sich damit auskennt.

Lukas M.

[Rolf B]

Hallo Lukas,

tja, habe ich mal wieder was gelernt. Danke für die Aufklärung.

Allerdings muss man dann auch responseType auf "document" setzen. Aus der Spec lese ich jetzt nicht, dass der Browser das automatisch tut. Oder übersehe ich etwas?

Rolf

[1unitedpower]

Allerdings muss man dann auch responseType auf "document" setzen. Aus der Spec lese ich jetzt nicht, dass der Browser das automatisch tut. Oder übersehe ich etwas?

Ich glaube du übersiehst was. Die WHATWG schreibt zu responseXML:

If responseType is not the empty string or "document", throw an InvalidStateError exception.

Und bei responseType:

The responseType attribute must return its value. Initially its value must be the empty string.

[Rolf B]

Hallo 1unitedpower,

ja, habe ich, bin aber nicht mehr zum Editieren meines Postings gekommen, weil ich jetzt eine Weile rumexperimentiert habe.

Ergebnis: https://wiki.selfhtml.org/wiki/JavaScript/XMLHttpRequest/responseXML, hoffentlich brauchbar.

Rolf