[JQUERY] JSON -Auslesen - Unflexibel-->Flexibel erwünscht

tklustig · 17. Feb. 2017

[Erledigt]JSON -Auslesen - Unflexibel-->Flexibel erwünscht

Hallo Leute,
habe bisher eigentlich nie größere Projekte in JavaScript programmiert, sondern eher Serverseitig in PHP.
Habe jetzt die Aufgabe bekommen, eine JSON-Datei über AJAX einzubinden und mit JQuery auszulesen. Die Beispielausgabe habe ich hinbekommen,allerdings erachte ich die Lösung als unzureichend. Vor allem frage ich mich, wie bzw. mit welcher Schleife ich das Auslesen flexibler gestalten könnte.
Momentan ist es doch so, dass das Skript 'zusammenbricht' wenn sich die ProduktId (Zählerindizie der inneren Schleife) ändert.
Für Feedback und/oder Ratschläge vorab vielen Dank!

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 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>
</body>
</html>

[JQUERY] JSON -Auslesen - Unflexibel-->Flexibel erwünscht

tklustig

New member