[GELÖST] Ausgabe von JSON Datei ohne Werte

tklustig · 16. Feb. 2017

Hallo Leute, folgender Code gibt mir als Ausgabe [object Object] anstatt der Werte.
Was mache ich falsch?
es ist das erste mal, dass ich überhauipt versuche, den Inhalt einer JSON-Datei auszulesen....

HTML:

<!Doctype html> <!-- Definition des doctype-Modus -->
<html> <!-- Definition des Stammverzeichnises -->

<head> <!-- Definition des Kopfbereiches -->

    <meta charset="utf-8"> 									<!-- charset[utf-8:]  definiert den deutschen Zeichensatz -->
	<meta name="date" content="[Datum/Uhrzeit]">			<!-- Angaben, wann die Seite publiziert wurde-->
	<meta name="language" content="de">						<!-- gibt Aufschluss über die verwendete Sprache  -->
	<meta name="keywords" content="die Suchbegriffe">		<!-- versorgt die Spider der Suchmaschinen mit Informationen zwecks Suchbegriffen: Wiederholungen, permanente Großschreibung und falsche Schlüsselwörte vermeiden! -->
	<meta name="description" content="Ihre Beschreibung">	<!-- Beschreibung, die in den Suchmaschinen erscheinen soll.Nicht nur Schlüsselwörter, sondern einen kurzen Text, indem die wichtigsten Keywords auftauchen.Max, 255 Wörter! -->
	<meta name="robots" content="index,follow">				<!-- Links sollen mitindiziert werden //NOINDEX:Seite soll nicht aufgenommen werden//NOFOLLOW Links werden nicht verfolgt-->
	<meta name="audience" content="alle">					<!-- definiert die Zielgruppe der Website  -->
	<meta name="page-topic" content="Dienstleistung">		<!-- Zuordnungsdefinition für die Suchmaschine -->
	<meta name="revisit-after" CONTENT="7 days">			<!-- definiert den erneuten Besuch des Spiders//hier:nach sieben Tagen  -->
    
	<title>Verbindungsversuch zur Qnips-Ressource</title> 									<!-- weist dem HTML-Dokument in der Registerkarte einen Namen zu -->
	<script src=""></script>  								<!-- hier ggf. JS als Datei einfügen direkt einfügen -->
    <!-- Hier ggf. CSS-Link einfügen, z.B.: <link href="css/selektoren.css" rel="stylesheet"> -->
	
<style></style> <!-- Hier ggf. CSS direkt einfügen -->
    
</head>
<body> <!-- Definition des Bodybereiches -->
<p id="demo"></p>
<script>

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        myObj = JSON.parse(this.responseText);		
		document.getElementById("demo").innerHTML = myObj.Allergens;
    }
};
xmlhttp.open("GET", "https://my.qnips.com/dbapi/ha", true);
xmlhttp.send();

</script>
<form id="formular" name="formular" action="" method="post"><!-- Hier ggf. Formulare in HTML erstellen -->
</form>

<!-- Hier den HTML-Code einfügen -->


<?php   //Hier ggf. php-Code einfügen 
?>                      
</body>
</html>

hier noch die JSON-Datei, die ich mir lokal runtergeladen habe:

Code:

{"Allergens":{"0_":{"Id":"0_","Label":"1"},"0_0":{"Id":"0_0","Label":"1A"},"0_1":{"Id":"0_1","Label":"1B"},"0_2":{"Id":"0_2","Label":"1C"},"0_3":{"Id":"0_3","Label":"1D"},"1_":{"Id":"1_","Label":"2"},"2_":{"Id":"2_","Label":"3"},"3_":{"Id":"3_","Label":"4"},"4_":{"Id":"4_","Label":"5"},"5_":{"Id":"5_","Label":"6"},"6_":{"Id":"6_","Label":"7"},"7_":{"Id":"7_","Label":"8"},"7_0":{"Id":"7_0","Label":"8A"},"7_1":{"Id":"7_1","Label":"8B"},"7_2":{"Id":"7_2","Label":"8C"},"7_3":{"Id":"7_3","Label":"8D"},"7_4":{"Id":"7_4","Label":"8E"},"7_5":{"Id":"7_5","Label":"8F"},"7_6":{"Id":"7_6","Label":"8G"},"7_7":{"Id":"7_7","Label":"8H"},"8_":{"Id":"8_","Label":"9"},"9_":{"Id":"9_","Label":"10"},"10_":{"Id":"10_","Label":"11"},"11_":{"Id":"11_","Label":"12"},"12_":{"Id":"12_","Label":"13"},"13_":{"Id":"13_","Label":"14"}},"Products":{"4293205":{"AllergenIds":["0_","8_","10_"],"ProductId":4293205,"Name":"Asiatische Wok-Pfanne","Price":{"Betrag":6.9}},"4293206":{"AllergenIds":["8_"],"ProductId":4293206,"Name":"Fasanenbrust \"Winzerin Art\"","Price":{"Betrag":5.7}},"4299359":{"AllergenIds":["0_","2_","6_"],"ProductId":4299359,"Name":"Pfefferbraten vom Schweinenacken","Price":{"Betrag":4.7}},"4299392":{"AllergenIds":["0_"],"ProductId":4299392,"Name":"Flammenkuchen Camembert","Price":{"Betrag":3.7}},"4299401":{"AllergenIds":["0_","6_"],"ProductId":4299401,"Name":"Quiche Lorraine, gefüllt mit Eiermilch, Speck und Käse","Price":{"Betrag":4.4}},"4299402":{"AllergenIds":["0_","5_"],"ProductId":4299402,"Name":"Knusprige Ente","Price":{"Betrag":5.9}},"4299404":{"AllergenIds":["2_"],"ProductId":4299404,"Name":"Eiersalat mit Äpfeln und Curry","Price":{"Betrag":1.1}},"4299405":{"AllergenIds":[],"ProductId":4299405,"Name":"Feldsalat mit Bündner Fleisch","Price":{"Betrag":1.3}},"4299407":{"AllergenIds":["7_"],"ProductId":4299407,"Name":"Frischer Feldsalat mit Himbeeren und Walnusskernen","Price":{"Betrag":1.1}},"4299411":{"AllergenIds":["6_"],"ProductId":4299411,"Name":"Kartoffel-Gurken-Salat mit Ziegenkäse","Price":{"Betrag":1.8}},"4299413":{"AllergenIds":["3_"],"ProductId":4299413,"Name":"Lachssalat","Price":{"Betrag":2.7}}},"Rows":[{"Name":"Aktion 1","Days":[{"Weekday":0,"ProductIds":[{"ProductId":4293205}]},{"Weekday":1,"ProductIds":[{"ProductId":4299402}]},{"Weekday":2,"ProductIds":[{"ProductId":4299359}]},{"Weekday":3,"ProductIds":[{"ProductId":4293205}]},{"Weekday":4,"ProductIds":[{"ProductId":4299402}]}]},{"Name":"Aktion 2","Days":[{"Weekday":0,"ProductIds":[{"ProductId":4293206}]},{"Weekday":1,"ProductIds":[{"ProductId":4299401}]},{"Weekday":2,"ProductIds":[{"ProductId":4299392}]},{"Weekday":3,"ProductIds":[{"ProductId":4293206}]},{"Weekday":4,"ProductIds":[{"ProductId":4299401}]}]},{"Name":"Salatbar","Days":[{"Weekday":0,"ProductIds":[{"ProductId":4299404}]},{"Weekday":1,"ProductIds":[{"ProductId":4299405}]},{"Weekday":2,"ProductIds":[{"ProductId":4299411}]},{"Weekday":3,"ProductIds":[{"ProductId":4299407}]},{"Weekday":4,"ProductIds":[{"ProductId":4299413}]}]}]}

mikdoe · 16. Feb. 2017

ja Allergens ist ein objekt (in anderen sprachen auch hash genannt), sieht man an der geschweiften klammer. was genau möchtest du denn in "demo" reinschreiben? dann musst du das direkt in der tiefe adressieren oder durch die struktur iterieren.

tklustig · 16. Feb. 2017

Möchte zunächst nur,dass er mir einen einzigen Wert des Objektes 'Allergens' ausgibt.
Da ich ganz am Anfang stehe, reicht mir als Beispiel eine Ausgabe in einem <p>-Tag.
Als Endziel werde ich dann wohl die gesamte Datei durchiterrieren und in tabellarischer Form anzeigen lassen.
Zunächst aber reicht mir,wenn er mir einen reelen Wert anstatt [object][object] anzeigt.
Wie codiere ich das?

Dormilich · 16. Feb. 2017

tklustig schrieb:
Möchte zunächst nur,dass er mir einen einzigen Wert des Objektes 'Allergens' ausgibt.

Dann musst du spezifizieren, welchen Wert du ausgegeben haben möchtest. Von alleine sucht er dir keinen aus.

Tip: wenn du ein Objekt druckst (in einen String konvertierst), bekommst du standardmäßig [object Object]

tklustig · 16. Feb. 2017

Und wie genau spezifiziere ich das?
Finde keine geeigneten Tutorials im Netz. Habe mich an w3sools gehalten, daraus meinen Code implementiert.
Leider fehlt mir das dazu nötige Grundwissen.
Um eine Spezifizierung wäre ich also sehr dankbar.
Darauf aufbauend könnte ich dann iterieren und alle Daten auslesen....

Dormilich · 16. Feb. 2017

https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Operators/Objekt_Initialisierer

mikdoe · 16. Feb. 2017

wenn du myObj['Allergens']['0_']['Id'] ausgeben lässt sollte aller voraussicht nach 0_ angezeigt werden.
das ist ein beispiel wie du auf einen einzelnen wert in der tiefe zugreifen kannst

tklustig · 16. Feb. 2017

Vielen, vielen Dank an mikdoe. Mithilfe deines Codes kam ich zu folgender Erweiterung:

HTML:

<p Id="RowName_0">platzhalter</p>
<p id="ProdName_0">platzhalter</p>
<p id="RowName_1">platzhalter"</p>
<p id="ProdName_1">platzhalter"</p>
<p id="RowName_2">platzhalter"</p>
<p id="ProdName_2">platzhalter"</p>
<script>
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        myObj = JSON.parse(this.responseText); 	
		document.getElementById("RowName_0").innerHTML = myObj.Rows[0].Name;       
	    document.getElementById("RowName_1").innerHTML = myObj.Rows[1].Name;
		 document.getElementById("RowName_2").innerHTML = myObj.Rows[2].Name;
        document.getElementById("ProdName_0").innerHTML = myObj.Products["4293205"].Name;
		document.getElementById("ProdName_1").innerHTML = myObj.Products["4293206"].Name;
		document.getElementById("ProdName_2").innerHTML = myObj.Products["4299407"].Name;
		
		//document.getElementById("ProdName2").innerHTML = myObj['Allergens']['0_']['Id']
	}
};
xmlhttp.open("GET", "https://my.qnips.com/dbapi/ha", true);
xmlhttp.send();
</script>

Bevor ich das ganze jetzt iterativ mittels einer zählerindizierter Schleife auslesen lasse,stellt sich mir die Frage wie ich den HTML-Teil codiere?!
Im Beispiel weiß ich vorher wieviele Felder ich aufrufe und kann das also mittels

HTML:

<p Id="RowName_0">platzhalter</p>
<p id="ProdName_0">platzhalter</p>
<p id="RowName_1">platzhalter"</p>
<p id="ProdName_1">platzhalter"</p>
<p id="RowName_2">platzhalter"</p>
<p id="ProdName_2">platzhalter"</p>

codieren.
Was aber,wenn ich nicht weiß, wieviele Rubriken aus der JSON-Datei eingelesen werden?
Wenn ich die HTML-Anweisungen auf jeweils eine id beschränke, wird auch nur eine id ausgeben......

Dormilich · 16. Feb. 2017

tklustig schrieb:
Was aber,wenn ich nicht weiß, wieviele Rubriken aus der JSON-Datei eingelesen werden?

Dann erzeugst du die Elemente mit JavaScript.

tklustig · 16. Feb. 2017

also muss es mir gelingen, vorab mit JS zu ermitteln, wieviele 'Rubriken' die JSON-Datei hat, und dieselbigen dann mit einer zählerindizierten oder einer for/each-Schleife
erzeugen, richtig??

kkapsner · 16. Feb. 2017

tklustig schrieb:
Was aber,wenn ich nicht weiß, wieviele Rubriken aus der JSON-Datei eingelesen werden?

Zusätzlich kannst du mit Object.keys() dir ein Array aller Schlüssel eines Objektes geben lassen:

Code:

var obj = {a:1, b:2};
Object.keys(obj).forEach(function(name){alert(name);});

tklustig · 16. Feb. 2017

Wenn wir schon bei der for-Schleife sind:
folgender Code erzeugt bei mir den error:'Can not read property name of undefined...'

HTML:

 <!--<p Id="RowName_0">platzhalter</p>
<p id="ProdName_0">platzhalter</p>
<p id="RowName_1">platzhalter"</p>
<p id="ProdName_1">platzhalter"</p>
<p id="ProdName_2">platzhalter"</p> -->
<script>
var verbindung = new XMLHttpRequest();
verbindung.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        objekt = JSON.parse(this.responseText);		
	for (x in objekt) {
          var ausgabe="<p Id='Rowname_"+x+">platzhalter</p>";
	  document.write(ausgabe);
          document.getElementById("RowName_0").innerHTML += objekt.Rows[x].Name[x] + "<br>";
}		
	    document.getElementById("RowName_0").innerHTML = objekt.Rows[0].Name;       
	    document.getElementById("RowName_1").innerHTML = objekt.Rows[1].Name;
	    document.getElementById("RowName_2").innerHTML = objekt.Rows[2].Name;
            document.getElementById("ProdName_0").innerHTML = objekt.Products["4293205"].Name;
	    document.getElementById("ProdName_1").innerHTML = objekt.Products["4293206"].Name;
	    document.getElementById("ProdName_2").innerHTML = objekt.Products["4299407"].Name;
	    //document.getElementById("ProdName_2").innerHTML = objekt['Allergens']['0_']['Id']
	}
};
verbindung.open("GET", "https://my.qnips.com/dbapi/ha", true);
verbindung.send();
</script>

</script>

ansatt den Inhalt statisch auszugeben, müsste es doch möglich sein, die werte über eine Schleife auszulesen. Ob die dann auch ausgegeben werden,ohne im HTML-Teil explizit definiert zu sein,interessiert mich dann,wenn der mir unerklärliche Fehler behoben ist. Weiß jemand Rat?
Hier nochmals die Quelle:

Code:

{"Allergens":{"0_":{"Id":"0_","Label":"1"},"0_0":{"Id":"0_0","Label":"1A"},"0_1":{"Id":"0_1","Label":"1B"},"0_2":{"Id":"0_2","Label":"1C"},"0_3":{"Id":"0_3","Label":"1D"},"1_":{"Id":"1_","Label":"2"},"2_":{"Id":"2_","Label":"3"},"3_":{"Id":"3_","Label":"4"},"4_":{"Id":"4_","Label":"5"},"5_":{"Id":"5_","Label":"6"},"6_":{"Id":"6_","Label":"7"},"7_":{"Id":"7_","Label":"8"},"7_0":{"Id":"7_0","Label":"8A"},"7_1":{"Id":"7_1","Label":"8B"},"7_2":{"Id":"7_2","Label":"8C"},"7_3":{"Id":"7_3","Label":"8D"},"7_4":{"Id":"7_4","Label":"8E"},"7_5":{"Id":"7_5","Label":"8F"},"7_6":{"Id":"7_6","Label":"8G"},"7_7":{"Id":"7_7","Label":"8H"},"8_":{"Id":"8_","Label":"9"},"9_":{"Id":"9_","Label":"10"},"10_":{"Id":"10_","Label":"11"},"11_":{"Id":"11_","Label":"12"},"12_":{"Id":"12_","Label":"13"},"13_":{"Id":"13_","Label":"14"}},"Products":{"4293205":{"AllergenIds":["0_","8_","10_"],"ProductId":4293205,"Name":"Asiatische Wok-Pfanne","Price":{"Betrag":6.9}},"4293206":{"AllergenIds":["8_"],"ProductId":4293206,"Name":"Fasanenbrust \"Winzerin Art\"","Price":{"Betrag":5.7}},"4299359":{"AllergenIds":["0_","2_","6_"],"ProductId":4299359,"Name":"Pfefferbraten vom Schweinenacken","Price":{"Betrag":4.7}},"4299392":{"AllergenIds":["0_"],"ProductId":4299392,"Name":"Flammenkuchen Camembert","Price":{"Betrag":3.7}},"4299401":{"AllergenIds":["0_","6_"],"ProductId":4299401,"Name":"Quiche Lorraine, gefüllt mit Eiermilch, Speck und Käse","Price":{"Betrag":4.4}},"4299402":{"AllergenIds":["0_","5_"],"ProductId":4299402,"Name":"Knusprige Ente","Price":{"Betrag":5.9}},"4299404":{"AllergenIds":["2_"],"ProductId":4299404,"Name":"Eiersalat mit Äpfeln und Curry","Price":{"Betrag":1.1}},"4299405":{"AllergenIds":[],"ProductId":4299405,"Name":"Feldsalat mit Bündner Fleisch","Price":{"Betrag":1.3}},"4299407":{"AllergenIds":["7_"],"ProductId":4299407,"Name":"Frischer Feldsalat mit Himbeeren und Walnusskernen","Price":{"Betrag":1.1}},"4299411":{"AllergenIds":["6_"],"ProductId":4299411,"Name":"Kartoffel-Gurken-Salat mit Ziegenkäse","Price":{"Betrag":1.8}},"4299413":{"AllergenIds":["3_"],"ProductId":4299413,"Name":"Lachssalat","Price":{"Betrag":2.7}}},"Rows":[{"Name":"Aktion 1","Days":[{"Weekday":0,"ProductIds":[{"ProductId":4293205}]},{"Weekday":1,"ProductIds":[{"ProductId":4299402}]},{"Weekday":2,"ProductIds":[{"ProductId":4299359}]},{"Weekday":3,"ProductIds":[{"ProductId":4293205}]},{"Weekday":4,"ProductIds":[{"ProductId":4299402}]}]},{"Name":"Aktion 2","Days":[{"Weekday":0,"ProductIds":[{"ProductId":4293206}]},{"Weekday":1,"ProductIds":[{"ProductId":4299401}]},{"Weekday":2,"ProductIds":[{"ProductId":4299392}]},{"Weekday":3,"ProductIds":[{"ProductId":4293206}]},{"Weekday":4,"ProductIds":[{"ProductId":4299401}]}]},{"Name":"Salatbar","Days":[{"Weekday":0,"ProductIds":[{"ProductId":4299404}]},{"Weekday":1,"ProductIds":[{"ProductId":4299405}]},{"Weekday":2,"ProductIds":[{"ProductId":4299411}]},{"Weekday":3,"ProductIds":[{"ProductId":4299407}]},{"Weekday":4,"ProductIds":[{"ProductId":4299413}]}]}]}

Dormilich · 16. Feb. 2017

tklustig schrieb:
folgender Code erzeugt bei mir den error:'Can not read property name of undefined...'

ist ja auch logisch ...

Code:

for ([COLOR="#0000FF"]x[/COLOR] in [COLOR="#FF0000"]objekt[/COLOR]) {
    ... [COLOR="#FF0000"]objekt[/COLOR].Rows[[COLOR="#0000FF"]x[/COLOR]].Name

kkapsner · 16. Feb. 2017

Rows ist ein Array und man sollte da nicht mit for...in arbeiten. Entweder du verwendst ARRAY.forEach() oder du machst eine normal for-Schleife mit Überprüfumg auf .length.

tklustig · 16. Feb. 2017

Dormilich schrieb:
ist ja auch logisch ...

Code:

for ([COLOR="#0000FF"]x[/COLOR] in [COLOR="#FF0000"]objekt[/COLOR]) { ... [COLOR="#FF0000"]objekt[/COLOR].Rows[[COLOR="#0000FF"]x[/COLOR]].Name

Ändert nix!
Sowohl

HTML:

for (var x in objekt.Rows[x].Name) {
	var ausgabe="<p Id='Rowname_"+x+">platzhalter</p>";
	document.write(ausgabe);
   document.getElementById("RowName_0").innerHTML += objekt.Rows[x].Name + "<br>";
}

als auch

HTML:

for (var x in objekt ) {
	var ausgabe="<p Id='Rowname_"+x+">platzhalter</p>";
	document.write(ausgabe);
   document.getElementById("RowName_0").innerHTML += objekt.Rows[x].Name + "<br>";
}

führt zur Fehlermeldung 'Uncaught TypeError: Cannot read property 'innerHTML' of null'
Denke, das liegt an dem Umstand,dass

Code:

 document.getElementById("RowName_0").innerHTML += objekt.Rows[x].Name + "<br>";

auf "RowName_0" bezogen bleibt. Muss ich das also auch noch abändern,oder wie??
Hat kkaspner jetzt Recht oder soll ich Dormilich folgen...?

Dormilich · 16. Feb. 2017

tklustig schrieb:
Hat kkaspner jetzt Recht oder soll ich Dormilich folgen...?

Wir haben beide recht, reden aber von verschiedenen Sachen.

kkapsner · 16. Feb. 2017

Abgesehen davon, dass man da for...in nicht verwenden sollte, hast du in x ja die Namen der Eigenschaften von objekt und nicht die von objekt.Rows drin... aber probier's doch einfach mal mit .forEach().

PS: document.writ() solltest du sofort wieder vergessen - v.a. in einem Event-Calback ist es unbrauchbar.

Dormilich · 16. Feb. 2017

Ansonsten, schau dir mal an, was for..in eigentlich macht!

tklustig · 16. Feb. 2017

Sorry, hat sich überschnitten mit Euren Meldungen. Versuche es jetzt also mit der for/each-Schleife

Was meinst du mit 'document.write' soll ich vergessen ?? Wie sonst kann ich dynamischen HTML-Code erzeugen. Muss schliesslich die p Tags mit der Schleife erzeugen,oder??

Dormilich · 16. Feb. 2017

Wie sonst kann ich dynamischen HTML-Code erzeugen.

z.B. mit document.createElement()

Was meinst du mit 'document.write' soll ich vergessen ??

Genau das, was da steht. document.write() mach nur Probleme, wenn man nicht weiß, wie es zu benutzen ist.

[GELÖST] Ausgabe von JSON Datei ohne Werte

New member

Moderator

New member

New member

New member

New member

Moderator

New member

New member

New member

Super Moderator

New member

New member

Super Moderator

New member

New member

Super Moderator

New member

New member

New member