[JQUERY] dynamischer Auslesen einer JSON-Datei mit JQuery

tklustig · 20. Feb. 2017

Hallo Leute, vorab die JSON-Datei

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
                  }
               ]
            }
         ]
      }
   ]

diese JSON-Datei soll dynamisch ausgelesen werden.
Ich hatte dafür folgende Lösung erarbeitet, die zwar eine korrekte Ausgabe liefert, allerdings verworfen wurde,da sie die ProductId(innerer Zählerindizie) verwendet.
Erwünscht ist eine Lösung, die die JSON unabhängig von der ProductId ausliest.
Dazu habe ich zunächst folgende Fragen:

Welche Schleife muss verwendet werden
Wie geht man prinzipiell vor

ich habe noch 4 Tage für die Lösung Zeit.
Weiß jemand Rat??

HTML:

<script>
function myFunction() {
    var absatz = document.createElement("p");
    document.getElementById("platzhalter_0").appendChild(absatz);
$.getJSON("https://my.qnips.com/dbapi/ha", function(daten) {
var output="<table border='3'>" ; // in PHP würde man hier den Block unterbrechen.
output+="<thead>";
output+="<tr>";
output+="<th>Kw 8</th>";
output+="<th>Montag<br>22.02.2016</th>";
output+="<th>Dienstag<br>23.02.2016</th>";
output+="<th>Mittwoch<br>24.02.2016</th>";
output+="</tr>";
output+="</thead>";
output+="<tfoot>";
output+="<tr>";
output+="<td colspan='4'><font color='black'>Alle Angaben ohne Gewähr</td>";
output+="</tr>";
output+="</tfoot>";
output+="<tbody>";

//liest iterativ die erste Spalte der Tabelle aus (Aktion1_Aktion2)
for (var i in daten.Rows) {
	output+="<tr><td class='rand'>" + daten.Rows[i].Name+"</td>";
	if(i==1) break; // liest iterativ den ersten Record der Tabelle aus (Asiatische Wokpfanne)
	for (var j in daten.Products) {
			output+="<td>" + daten.Products[j].Name+"<br>"; //liest die ersten drei Zusatzstoffe aus
			output+=daten['Allergens']['0_']['Label']+",";
			output+=daten['Allergens']['10_']['Label']+",";
			output+=daten['Allergens']['8_']['Label']+"<br>";
			output+=daten.Products[j].Price.Betrag+"0€"+"<br>";  //liest den Preis aus
			//output+="<td><b>Index:"+j+"</td></b>";  		   //gibt die ProduktId aus
			if(j==4293205){ // sobald erster Record vollständig ....
			output+="<td>" + daten.Products[4299402].Name+"<br>"; // weitere Records auslesen / knusprige Ente...
			output+=daten['Allergens']['0_']['Label']+",";
			output+=daten['Allergens']['5_']['Label']+"<br>";
			output+=daten.Products[4299402].Price.Betrag+"0€"+"<br>";
			output+="<td>" + daten.Products[4299359].Name+"<br>";
			output+=daten['Allergens']['0_']['Label']+",";
			output+=daten['Allergens']['2_']['Label']+",";
			output+=daten['Allergens']['6_']['Label']+"<br>";
			output+=daten.Products[4299359].Price.Betrag+"0€"+"<br>"; // bis Pfefferbraten
			break;
			
			}
			
	}
		
		
	
}

// die restlichen Records manuell auslesen
output+="<td>" + daten.Products[4293206].Name+"<br>";   //von Fasanenbrust bis...
output+=daten['Allergens']['8_']['Label']+"<br>";
output+=daten.Products[4293206].Price.Betrag+"0€"+"<br></td>";
output+="<td>"+daten.Products[4299401].Name+"<br>";
output+=daten['Allergens']['0_']['Label']+",";
output+=daten['Allergens']['6_']['Label']+"<br>";
output+=daten.Products[4299401].Price.Betrag+"0€"+"<br></td>";
output+="<td>"+daten.Products[4299392].Name+"<br>";
output+=daten['Allergens']['0_']['Label']+"<br>";
output+=daten.Products[4299392].Price.Betrag+"0€"+"<br></td>"; //Flammkuchen

//letzte Spalte iterativ erzeugen
for(var i in daten.Rows){
if(i==2) output+="<tr><td class='rand'>" + daten.Rows[i].Name+"</td>";} //sofern dritter und letzter Datensatz erreicht...
for (var j in daten.Products){
			output+="<td>" + daten.Products[4299404].Name+"<br>"; //alle Records von 'Salatbar' auslesen
			output+=daten['Allergens']['2_']['Label']+"<br>";
			output+=daten.Products[4299404].Price.Betrag+"0€"+"<br>";
			output+="<td>" + daten.Products[4299405].Name+"<br>";
			output+=daten.Products[4299405].AllergenIds+"<br>";
			output+=daten.Products[4299405].Price.Betrag+"0€"+"<br>";
			output+="<td>" + daten.Products[4299411].Name+"<br>";
			output+=daten['Allergens']['6_']['Label']+"<br>";
			output+=daten.Products[4299411].Price.Betrag+"0€"+"<br>";
			break;
			}
output+="</tr></tr></tbody>";
document.getElementById("platzhalter_0").innerHTML=output;	
	
	}//Ende der Funktion daten
);

}//Ende von myfunction


</script>

Dormilich · 21. Feb. 2017

tklustig schrieb:
Welche Schleife muss verwendet werden

Wurde schon im letzten Thread vorgeschlagen: Array.forEach()

tklustig · 21. Feb. 2017

Soll mittels einer Vorgabe die Aufgabenstellung anhand der for/in-Schleife implementieren.

Folgender Code liest die Datei dynamisch aus,allerdings nicht so,wie erwünscht.

HTML:

<script>
function myFunction() {
    var absatz = document.createElement("p");
    document.getElementById("platzhalter_0").appendChild(absatz);
$.getJSON("https://my.qnips.com/dbapi/ha", function(daten) {
var output="<table border='3'>" ; // in PHP würde man hier den Block unterbrechen.
output+="<thead>";
output+="<tr>";
output+="<th>Kw 8</th>";
output+="<th>Montag<br>22.02.2016</th>";
output+="<th>Dienstag<br>23.02.2016</th>";
output+="<th>Mittwoch<br>24.02.2016</th>";
output+="</tr>";
output+="</thead>";
output+="<tfoot>";
output+="<tr>";
output+="<td colspan='4'><font color='black'>Alle Angaben ohne Gewähr</td>";
output+="</tr>";
output+="</tfoot>";
output+="<tbody>";

//liest iterativ die erste Spalte der Tabelle aus (Aktion1_Aktion2)



for (var i in daten.Rows) {
output+="<tr><td class='rand'>" + daten.Rows[i].Name+"</td>";
			
	for(var j in daten.Products){
	output+="<div id='platzhalter_0'><td>";
	output+=daten.Products[j].Name+"<br>";
	output+=+daten.Products[j].Price.Betrag+"€"+"</td>";
	}
		
} // ende von daten.Rows

output+="</tr></tr></tbody>";
document.getElementById("platzhalter_0").innerHTML=output;	
	
	}//Ende der Funktion daten
);

}//Ende von myfunction


</script>

Nach Mittwoch soll die Ausgabe aufhören und die folgenden Werte sollen auf die restlichen Tabellenfelder verteilt werden, anstatt sie jeweils komplett auszulesen.
Folgende Vorgabe habe ich wohl korrekt umgesetzt:
Vorgabe:

Code:

für jede currentRow in data.Rows baue eine tabellenzeile [tr] mit:
Code:
for (var i in daten.Rows) {
output+="<tr><td class='rand'>" + daten.Rows[i].Name+"</td>";.......

Folgende Vorgabe weiß ich nicht umzusetzen,

Code:

für jeden currentDay in currentRow.Days baue ein zeilenelement [td] mit:

,da ich nicht weiß, wie ich currentRow.Days codieren muss. Ein analoges

Code:

for(var j in daten.Days){
output+="<td>";

funktioniert nicht.
wenn mir jemand erläutern könnte, wie ich currentRow.Days kodieren soll,wäre mir sehr geholfen.
Anbei noch die JSON-Datei, sauber strukturiert:

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
                  }
               ]
            }
         ]
      }
   ]
}

tklustig · 22. Feb. 2017

Hat sich erledigt.
Anbei der Code.
Vielleicht kann ihn ja jemand gebrauchen.....

HTML:

<!Doctype html>
<html>*
<head>
<meta charset="utf-8">
<title>Qnips GmbH</title>
</head>
<body id="go">
<main>
<output id="zeit"></output><br><br>
</main>
<button class="button1" onclick="myFunction()">JSON komplett auslesen</button>
<div id="platzhalter_0"></div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>

output {
	height: 1.75em;
	background-image:
	repeating-linear-gradient(100deg, green, green, pink, pink 15px );
	border-radius: 0.5em;
	display: block;}
 
#zeit {
	-webkit-animation: steps 10s linear;
	animation: steps 10s linear;}
 
@keyframes steps { 
	from {width: 0% }
	to { width: 100% }
}
 
th{
	color:blue;}

#platzhalter_0{
	position:absolute;
	top:150px;
	color:red;
	width:80%;
	float:left;
	font-size:125%;
}

.rand{
	color:green}

.button1{
    float:left;
    font-family: Arial,sans-serif; 
    color:#F7FE2E;
    border-radius:7px; 
    font-size:20px; 
    background-color:#81BEF7; 
    height:30px; 
    width:280px; 
    padding:3px;}
	
@media only screen and (max-width:480px) {
#platzhalter_0{
	width:95%;
	font-size:100%;}
}

@media only screen and (max-width:364px) {
#platzhalter_0{
	width:80%;
	font-size:90%;}
}
</style>

<script>
function myFunction() {
    var absatz = document.createElement("p");
    document.getElementById("platzhalter_0").appendChild(absatz);
$.getJSON("https://my.qnips.com/dbapi/ha", function(daten) {
var output="<table border='3'>" ; // in PHP würde man hier den Block unterbrechen.
output+="<thead>";
output+="<tr>";
output+="<th>Kw 8</th>";
output+="<th>Montag<br>22.02.2016</th>";
output+="<th>Dienstag<br>23.02.2016</th>";
output+="<th>Mittwoch<br>24.02.2016</th>";
output+="</tr>";
output+="</thead>";
output+="<tfoot>";
output+="<tr>";
output+="<td colspan='4'><font color='black'>Alle Angaben ohne Gewähr</td>";
output+="</tr>";
output+="</tfoot>";

output+="<tbody>";

//liest iterativ die Objekte aus JSON aus

	for (var i in daten.Rows) {	//liest iterativ die Objekte aus JSON aus
		
		output += "<tr>";
		output += "<td>" + daten.Rows[i].Name;"</td>";
		
		for(var j in daten.Rows){
		
			var Id = daten.Rows[i].Days[j].ProductIds[0].ProductId; //da nur eine ProdId vorhanden: [0]
	
			for(var z in daten.Products){	
					
				output += "<td>" + daten.Products[Id].Name + "<br>";
				output += daten.Products[Id].Price.Betrag + " € <br>";
				output += daten.Products[Id].AllergenIds+ "</td>";
				
				break;
			}
		}
	
} // ende von daten.Rows

output+="</tr></tbody>";
document.getElementById("platzhalter_0").innerHTML=output;	
	
} );//Ende der Funktion daten


}//Ende von myfunction


</script>
</body>
</html>

Dormilich · 22. Feb. 2017

for(var j in daten.Rows){

Müsste das nicht

Code:

for(var j in daten.Rows[i].Days){

heißen?

[JQUERY] dynamischer Auslesen einer JSON-Datei mit JQuery

tklustig

New member

Dormilich

New member

tklustig

New member

tklustig

New member

Dormilich

New member