Parsen von json-Dateien

[Lowterm]

Hall zusammen,

ich muss eine json-Datei parsen und die Knoten nacheinander ausgeben. Da ich in dem Bereich relativ neu bin, fällt mir sehr schwer, den Vorgang nachzuvollziehen. Daher möchte ich gerne fragen, ob mir jemand dabei kurz helfen könnte.

Die json-Datei hat die folgende Struktur:

{
	"version": "4.4.1",
	"status": "success",
	"media": {
		"count": 372,
		"medium": [
			{
				"mid": 6901,
				"uid": 74,
				"username": "uname",
				"title": "Mit digitalem Lernen...",
				"medium": [
					"https://test.de",
				],
				"autor": "John Doe",
				"categories": {
					"category": [
						{
							"cid": 20,
						},
						{
							"cid": 48,
						}
					]
				},
				"tags": {
					"tag": [
						{
							"tid": 309,
							"culture": "de",
							"name": "trans",
							"created_at": "2018-03-27 14:09:28",
							"updated_at": "2018-03-27 14:09:28"
						},
					]
				},
				"channels": null,
				"restrict": null
			},
			{
				"mid": 6886,
				"uid": 72,
				"username": "uname1",
				"title": "Erfahrungsberichte",
				"medium": [
					"https://test1.de",
				],
				"autor": "Career",
				"categories": {
					"category": [
						{
							"cid": 29,
						},
						{
							"cid": 33,
						},
					]
				},
				"tags": {
					"tag": [
						{
							"tid": 61,
							"culture": "de",
							"name": "stdo",
							"created_at": "2016-05-31 14:52:08",
							"updated_at": "2016-05-31 14:52:08"
						},
						{
							"tid": 77,
							"culture": "de",
							"name": "career11",
							"created_at": "2016-08-25 17:24:20",
							"updated_at": "2016-08-25 17:24:20"
						},
					]
				},
				"channels": null,
				"restrict_embed": null
			}
		]
	}
}			

Der Bereich "media" wiederholt sich. Die benötigten Werte in jedem Konten sind z.B.:

"username", "title", "medium", jeweils "category"."cid", jeweils "tag"."name"

Ich habe folgende versucht:

    $(document).ready(function(){
        $.getJSON("data.json", function(data){
					$.each( data, function(key, val) {
							alert(key.count + " - " + val);
					});
        }).fail(function(){
            document.write("An error has occurred.");
        });
    });

Leider komme ich da nicht weiter, weil in leider nicht weiß, wie ich dei einzelnen Knoten ansprechen soll.

Danke im Voraus.

[Rolf B]

Hallo Lowterm,

nicht alles muss man mit jQuery lösen. Du bekommst in der getJSON Callback-Funktion ein fertig deserialisiertes Objekt, und damit kannst Du ganz normal arbeiten. Ein Iterieren der data-Variablen hilft Dir jedenfalls nichts.

In data findest Du die Eigenschaften version, status und media. In media steht ein Anzahl-Wert (count) und ein Array mit Medien (medium). Dieses Array kannst Du wie jedes Array durchlaufen. Entweder mit $.each, oder mit einer einfachen for-Schleife.

Wenn Dir diese Erklärung jetzt nichts sagt, solltest Du die Grundlagen von JavaScript durcharbeiten. Blindes Kopieren von unverstandenem Code ist keine Lösung.

https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/Einstieg

Rolf

[Lowterm]

Hallo Rolf,

danke für deine Antwort. Soweit ich nun mitbekommen habe, muss man doch mehrere $.each ineinander verschachteln, um an alle Werte ranzukommen, denn jeder Bereich hat wieder ein Array, das man durchlaufen muss:

$(document).ready(function(){
	var i = 0;
	$.getJSON("data.json", function(data){
		$.each( data, function(key, val) {
			if(key=="media") {
				$.each(val, function(key1, val1) {
					if(key1=="medium") {
						$.each(val1, function(key2, val2) {
							alert(key2 + " - " + val2);
						});
					}
				});
			}
		});
	}).fail(function(){
			document.write("An error has occurred.");
	});
});

Gruß

[Rolf B]

Hallo Lowterm,

nein. Lies nochmal. Und lerne JavaScript, statt irgendwas zu kopieren.

Rolf

[Lowterm]

Hallo Rolf,

danke. Ich habe es jetzt verstanden. Einfacher gehts nicht.

Gruß

[Lowterm]

Hallo nochmal,

dieser Ansatz funktioniert anscheinend nur mit json-Dateien. Wenn man die Daten via URL aus dem Netz rein bekommt, ist getJSON glaube ich nicht mehr passend. Gibt es einen Ersatz für getJSON, der auch mit URLs genau so funktionieren würde?

Danke

[Rolf B]

Hallo Lowterm,

doch, klar, das geht. Du kannst an getJSON eine beliebige URL mitgeben, absolut oder relativ.

Aber es muss erlaubt sein. Wenn die JSON-Datei nicht auf dem gleichen Server liegt wie deine HTML Seite^[1], dann findet ein Cross-Origin Zugriff statt, und der geht ohne Access-Control-Allow-Origin Header auf der JSON-Datei schief. Und zwar grundsätzlich. Egal mit welchem Vehikel. D.h. derjenige, der die JSON-Datei hostet, muss deiner Domain erlauben, darauf zuzugreifen.

Bei Scripten und Bildern ist das anders. Die darf man von überallher einbinden. Daten kann man nicht einfach so laden.

Wenn deine Seite auf http://example.org liegt und die JSON-Datei anderswo, muss der fremde Server einen Header mitsenden, der den Zugriff gestattet. Entweder so:

Access-Control-Allow-Origin: http://example.org

oder für die ganze Welt

Access-Control-Allow-Origin: *

Und dann kommt natürlich noch hinzu, dass Du von einer HTML Seite, die über https geladen wird, keine Daten von http-Adressen laden darfst.

Alles nicht einfach, aber es dient der Datensicherheit.

Rolf

---

1. Was ungenau formuliert ist. Korrekt wäre: nicht vom gleichen Origin kommt. Der Origin ist die Kombination aus Schema (http oder https), Domain (www.example.com) und Port. Weicht eins von den dreien ab, liegt nicht mehr der gleiche Origin vor. Ob die beiden Origins auf den gleichen Server zeigen oder auf zwei verschiedene, ist dabei egal. ↩︎

[Gunnar Bittersmann]

@@Rolf B

nein. Lies nochmal. Und lerne JavaScript, statt irgendwas zu kopieren.

Kapieren, nicht kopieren.

😷 LLAP

[Der Martin]

Hallo,

nein. Lies nochmal. Und lerne JavaScript, statt irgendwas zu kopieren.

Kapieren, nicht kopieren.

das war mein Slogan!
In der Studienzeit herrschte dagegen oft das Motto: "Gut kopiert ist halb kapiert."

Live long and pros healthy,
 Martin