• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[GELÖST] JSONP Daten auslesen

R

robinb112

New member
Hallo zusammen,
ich habe folgendes Problem und zwar möchte ich die Wetterdaten welche von DWD als JSONP bereitgestellt werden (http://www.dwd.de/DWD/warnungen/warnapp/json/warnings.json) mittels Javascript auslesen.
Das Problem ist nun folgendes dass DWD selbst schreibt: "Im Unterschied gibt es vor dem eigentlich JSON-Code zusätzlich den Präfix "warnWetter.loadWarnings(" und am Ende noch ein " );". Werden die Anfangs- und Endzeichen entfernt (z.B. durch Nutzung einer "Substring"-Funktion) erhält man den reinen JSON-Code". Die Frage ist nun wie genau stelle ich das an mit der Substring Funktion und wie kann ich die Daten welche ja in der JSON verschachtelt sind einzeln auslesen?

Danke für die Hilfe.
 
Zuletzt bearbeitet von einem Moderator:
Erzeuge doch auf deiner Seite einfach ein Objekt warnWetter, das eine Methode loadWarnings hat. Dann brauchst du gar nicht machen:
Code: 
<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<script type="text/javascript">
var warnWetter = {
	loadWarnings: function(obj){
		console.log(obj);
	}
};
</script>
<script type="text/javascript" src="http://www.dwd.de/DWD/warnungen/warnapp/json/warnings.json"></script>
<style type="text/css"></style>
</head>
<body>
inhalt
</body>
</html>

- - - Aktualisiert - - -

Zu der anderen Frage: was willst du denn mit den Daten von DWD dann machen?
 
Erst einmal danke für die Antwort. Ich möchte dann die Daten speziell für einen Landkreis auf einer Feuerwehr Website darstellen.
 
OK - du müsstest also durch die Warnungen durchiterieren (Object.keys() mit .forEach() könnte dabei helfen), nach dem Landkreis filtern und dann die übrig gebliebenen Elemente darstellen.
Bei welchem Schritt hast du Probleme?
 
Ok cool danke. Über die Console bekomme ich schon mal die Daten angezeigt. Aber wie kann ich nun die Daten für einen ganz bestimmten Wert ausgeben (regionName).
Ich hab das ganze mal so probiert aber das funktioniert leider nicht:
HTML: 
<script>
					var warnWetter = {
						loadWarnings: function(obj){
							var html =
								'<ul>' +
								'<li>Name: ' + regionName + '</li>' +
								'</ul>';

							$('#wetterdaten').html(html);
						}
					};
				</script>
 
robinb112 schrieb:
Ich hab das ganze mal so probiert aber das funktioniert leider nicht:
Zum Vergrößern anklicken....
Du greifst ja auch obj auch gar nicht zu und regionName ist nicht definiert...

Bevor du filterst, solltest du erst einmal einfach alle Daten anzeigen lassen. Also durch das Objekt, das in obj.warnings gespeichert ist, durchiterieren (hab' dir ja schon oben geschrieben, was du dafür verwenden könntest) und z.B. die headline-Eigenschaft der iterierten Objekte ausgeben lassen.
 
Ok, bin leider komplett neu auf diesem Gebiet. Also ich kann alle Daten über console.log(obj); anzeigen. Aber dann weiß ich leider nicht wie das mit dem durchiterieren gehen soll.
 
Hier mal ein Beispiel zum Iterieren verwendet man Schleifen wie for, for each , for in, while, do while
für Objekte eignen sich ( for in ) Schleifen sehr gut;

HTML: 
<!DOCTYPE html>

<html>
	<head><title></title>
		<meta charset="UTF-8" />
		<meta name="description" content=""/>
		<meta name="keywords" content=""/>
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<style>
ul{list-style:none; margin:20px 0 0 0;width:300px;}
ul li span:first-child{padding:0 12px 0 0;color:orange;font-weight:bold;}
</style>
   </head>
	<body>

<h3>Hallo Wetter</h3>

<script type="text/javascript">
var warnWetter = {


	loadWarnings: function(obj){

	for(var oi in obj.warnings){ 
	var lo = document.createElement('UL');
        var lst = '<li><span>Start:</span>'+ obj.warnings[oi][0].start +'</li>'+
	'<li><span>Ende:</span>'+ obj.warnings[oi][0].end +'</li>'+
	'<li><span>Name:</span>'+ obj.warnings[oi][0].regionName +'</li>'+
	'<li><span>Warn-Level:</span>'+ obj.warnings[oi][0].level +'</li>'+
	'<li><span>Type:</span>'+ obj.warnings[oi][0].type +'</li>';
	lo.innerHTML = lst;
	document.body.appendChild(lo);
	}
	}
};
</script>
<script type="text/javascript" src="http://www.dwd.de/DWD/warnungen/warnapp/json/warnings.json"></script>
	</body>
</html>
 
Zuletzt bearbeitet von einem Moderator:
... ich würde for...in nicht verwenden... kann schnell zu seltsamen Verhalten führen. Object.keys() ist meiner Meinung nach zu bevorzugen:
Code: 
<!DOCTYPE html>
<html>
	<head><title>Wetterwarnungen</title>
		<style>
		ul{list-style:none; margin:20px 0 0 0;width:300px;}
		ul li span:first-child{padding:0 12px 0 0;color:orange;font-weight:bold;}
		</style>
   </head>
	<body>
		<h3>Hallo Wetter</h3>
		<script type="text/javascript">
		var warnWetter = {
			loadWarnings: function(obj){
				Object.keys(obj.warnings).forEach(function(key){
					var warning = obj.warnings[key][0];
					var lo = document.createElement('UL');
					var lst = '<li><span>Start:</span>'+ warning.start +'</li>'+
					'<li><span>Ende:</span>'+ warning.end +'</li>'+
					'<li><span>Name:</span>'+ warning.regionName +'</li>'+
					'<li><span>Warn-Level:</span>'+ warning.level +'</li>'+
					'<li><span>Type:</span>'+ warning.type +'</li>';
					lo.innerHTML = lst;
					document.body.appendChild(lo);
				});
			}
		};
		</script>
		<script type="text/javascript" src="http://www.dwd.de/DWD/warnungen/warnapp/json/warnings.json"></script>
	</body>
</html>
 
Hey super, danke für eure Antworten.
Also die Liste mit allen Daten wird nun perfekt ausgegeben.
Wie schaffe ich es denn nun nur eine ganz bestimmte Region (regionName) abzurufen?
Habe es mit einem if (warning.regionName == name) { $("#wetter").html("Test"); } versucht aber das funktioniert leider nicht.
 
Ja ich habe jQuery auf der Seite laufen. Ich bekomme den Fehler "Uncaught TypeError: $ is not a function".
So habe ich es versucht:

Code: 
<script>
					var warnWetter = {
						loadWarnings: function(obj){
							Object.keys(obj.warnings).forEach(function(key){
								var warning = obj.warnings[key][0];
								       if (warning.regionName == 'Kreis Bergstraße') {
                                                                              $("#wetter").html("Test");
                                                                       }
								document.body.appendChild(lo);
							});
						}
					};
				</script>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben