JSON Datensätze darstellen.

sid61

Mitglied
Hallo,

ich beschäftige mich derzeit mit einem etwas kniffligen Problem.
Ich möchte in einer Google Map Karte eine Möglichkeit unterbringen, die es mir erlaubt -

  • Wenn ich einen Marker anklicke

eine Anfrage zu senden in dieser Form..

Code:
GEvent.addListener(map, 'click', function(overlay, latlng) {
          var selectedWebService = document.getElementById('webserviceSelect').value;
          var script = document.createElement('script');
          document.body.appendChild(script);
          script.src = 'http://ws.geonames.org/' + selectedWebService + 'JSON?lang=de&lat=' + latlng.lat() + '&lng=' + latlng.lng() + '&callback=loadJSON';
          document.getElementById('result').innerHTML = 'Sende Anfrage an ' + script.src;

Diese Routine ist so aufgebaut, das ich die Daten in diesem Format erhalte :

Code:
{"geonames":[{"summary":"Kirche im am Nordrand des Spreewalds gelegenen
 Dorf Straupitz. Sie wurde nach Plänen des bekannten Architekten Karl
 Friedrich Schinkel erbaut und stellt mit ihrer vollständig erhaltenen
 ursprünglichen Innenausstattung ein Baudenkmal von überregionaler Bedeutung dar. (...)",
 "distance":3.4693748222439,
 "title":"Dorfkirche Straupitz",
 "wikipediaUrl":"de.wikipedia.org/wiki/Dorfkirche_Straupitz",
 "elevation":0,
 "countryCode":
 "DE",
 "lng":14.12055,
 "feature":"landmark",
 "thumbnailImg":"http://www.geonames.org/img/wikipedia/143000/thumb-142193-100.jpg",
 "lang":"de",
 "lat":51.91105,
 "population":0}]}

Nun habe ich aber das Problem, das ich ja bereits für die normalen Marker eine
GEvent.addListener(map, 'click', function benutze, um ein ganz normales Bubble Window anzuzeigen.

Gleichzeitig möchte ich aber erreichen, das ich mit Klick auf diesen Marker die Routine zur Beschaffung der Daten starte und das Ergebnis dann hier ausgebe..

Also quasi - Marker werden angezeigt für die Objekte, die ich in der DB habe. Wenn ich auf einen Marker klicke, dann wird nicht nur das Bubble Fenster vom Marker angezeigt, sondern im Hintergrund auch die Daten geladen und nach Empfang dargestellt.

Code:
 <div id="result" style="width:500px; background-color: #eee; overflow: scroll; font-family: Courier">Results of last operation will be shown here.</div>

Quasi, wenn ich den Marker anklicke, dann soll er mir die empfangenen Daten ausgeben.

Geht das ?
Wo positioniere ich hierbei den GEvent.addListener - kann ich mehrere davon benutzen oder muss ich anders an dieses Problem heran gehen ?

Würde mich freuen, wenn mir jemand dazu was sagen kann..

Liebe Grüße
Sid
 
Zuletzt bearbeitet:
Hallo Sven,

jo - habe mal das eine oder andere getestet und es scheint wirklich zu funktionieren. Ich habe dafür - (das scheint immer so zu sein) ein neues Problem festgestellt.

Hatte in etlichen Seiten gegoogelt, aber nichts gefunden, was einen wirklich zufrieden stellt.
Mit dem JSON Dienst von geonames.org kann man echt viel anfangen, aber....

Wie decodiere ich den String :
Code:
{"weatherObservation":{"clouds":"n/a",
"weatherCondition":"n/a",
"observation":"EDDB 151820Z 26005KT CAVOK 21/14 Q1021 NOSIG",
"windDirection":260,
"ICAO":"EDDB",
"elevation":48,
"countryCode":"DE",
"lng":13.5166666666667,
"temperature":"21",
"dewPoint":"14",
"windSpeed":"05",
"humidity":64,
"stationName":"Berlin-Schoenefeld",
"datetime":"2008-07-15 18:20:00",
"lat":52.3666666666667,
"hectoPascAltimeter":1021}}

so, das ich mir die Werte aussuchen kann, die ich benötige. Also sinngemäß dann so, das ich die Begriffe gegen Deutsche austauschen kann und nur die nehme, die ich brauche (Beispiel: Grad Celsius : 23)

Bei meiner Datenbankabfrage hatte ich das so gelöst :
Code:
json = array();
while(list($key,$values) = each($list)) {
	$i++;
       if ($values[2]<>'c') {
	$json[] = htmlspecialchars("p{$i}:{lat:{$values[0]},lng:{$values[1]},type:'{$values[2]}',id:'{$values[3]}',address:'{$values[4]}',
state:'{$values[5]}',postcode:'{$values[6]}',price:'{$values[7]}',name:'{$values[8]}',
art:'{$values[9]}',category:'{$values[10]}',agent:'{$values[11]}',agentphone:'{$values[12]}'
,thumb:'{$values[13]}'}");

Aber von Geonames.org bekomme ich ja schon den kompletten Inhalt geliefert. Kann Ihn also so nicht zuordnen, wie hier gezeigt.

Wie kann ich den String, der geliefert wird nun wieder zerhacken und mir die Teile herausholen, die ich benötige ? Generell ist es eben die Frage, denn auch bei Wikipedia JSON Ausgabe ist der Inhalt schon vollständig.

Wenn ich also dem Beispiel :
var map;
Code:
    function load() {
      if (GBrowserIsCompatible()) {
        map = new GMap2(document.getElementById("map"), {draggableCursor: 'crosshair'});
        map.setCenter(new GLatLng(37.4419, -122.1419), 13);
	map.addControl(new GLargeMapControl());
	GEvent.addListener(map, 'click', function(overlay, latlng) {
          var selectedWebService = document.getElementById('webserviceSelect').value;
          var script = document.createElement('script');
          document.body.appendChild(script);
          script.src = 'http://ws.geonames.org/findNearByWeatherJSON?lang=de&lat=' + latlng.lat() + '&lng=' + latlng.lng() + '&callback=loadJSON';
          document.getElementById('result').innerHTML = 'Sende Anfrage an ' + script.src;
        });
      }
    }
  function replacer(key, value) {
    if (typeof value === 'number' && !isFinite(value)) {
        return String(value);
    }
    return value;
}
    function loadJSON(result) {
	
      document.getElementById('result').innerHTML = JSON.stringify(result);
	
    }
folgen würde, dann kann ich nur alles ausgeben und es ist nicht formatiert.

Uff... Hoffe, das ich mich soweit verständlich ausgegöbelt habe ;-)

Liebe Grüße
Der andere Sven aus Heidesee

P.S.
Dennoch schon mal vielen Dank für deine vorherige Antwort, hat mir schon sehr geholfen !
 
Wie decodiere ich den String

Da gibt es nichts zu dekodieren, er ist ja nicht kodiert :)

Dieser String ist eine Repräsentation eines Objektes, du kannst daraus per eval() das Objekt wiederherstellen, und dann wie üblich auf seine Eigenschaften zugreifen:
Code:
str='{"weatherObservation":{"clouds":"n/a","weatherCondition":"n/a","observation":"EDDB 151820Z 26005KT CAVOK 21/14 Q1021 NOSIG","windDirection":260,"ICAO":"EDDB","elevation":48,"countryCode":"DE","lng":13.5166666666667,"temperature":"21","dewPoint":"14","windSpeed":"05","humidity":64,"stationName":"Berlin-Schoenefeld","datetime":"2008-07-15 18:20:00","lat":52.3666666666667,"hectoPascAltimeter":1021}}';

eval('objekt='+str);

alert(objekt.weatherObservation.temperature);
 
Hallo Sven,

o.K. - ich glaube, das habe ich begriffen. Ich habe mal einen Teststring gebastelt, der auch soweit funktioniert und in etwa so aussieht..

Code:
eval('objekt='+result);
test=('Wolkenbildung: ' +  objekt.weatherObservation.clouds + ' · Temperatur: ' + 
objekt.weatherObservation.temperature + ' Grad Celsius\nWindgeschwindigkeit: ' + 
objekt.weatherObservation.windSpeed + ' Knoten');</div>

Was ich aber immer noch nicht verstehe ist, wie bekomme ich das runde Schwein durch das eckige Schlüsselloch ? ;-)

Beispiel :

JSON kommt so an -

Code:
{"weatherObservation":{"clouds":"n/a",
"weatherCondition":"n/a",
"observation":"EDDB 151820Z 26005KT CAVOK 21/14 Q1021 NOSIG",
"windDirection":260,
"ICAO":"EDDB",
"elevation":48,
"countryCode":"DE",
"lng":13.5166666666667,
"temperature":"21",
"dewPoint":"14",
"windSpeed":"05",
"humidity":64,
"stationName":"Berlin-Schoenefeld",
"datetime":"2008-07-15 18:20:00",
"lat":52.3666666666667,
"hectoPascAltimeter":1021}}

wobei es ja auch mal mehr Daten sein könnten (Beispiel - Wikipedia, bis zu 10 solcher Datensätze) hier beim Wetter erst mal nur einer pro Klick.

Wie muss ich es denn nun anstellen, das ich diese Ausgabe an meine neue Routine übergebe ?

Also JSON kommt an -> geht durch mein Kauderwelch -> wird nun so zurückgeschrieben, das ich vor Freude Luftsprünge machen kann

Entschuldige, wenn ich mich dumm ausdrücke - habe wirklich nicht sehr viel Ahnung von Javascript. Aber muss ich dann die ankommenden Datensätze JSON dann nicht in ein array innerhalb einer Schleife schreiben, bis alles durch ist und dann irgendwie auf der anderen Seite alles noch mal umwandeln in meine Wünsche und das muss ja dann wiederum nochmals bis zum Abruf wieder irgendwo reingeschrieben werden ?

War das ungefair so richtig ?

Gruss
Der andere Sven..
 
Zuletzt bearbeitet:
Das Dumme ist, dass die Daten nicht einheitlich ankommen...beim Wetter kommt ein Objekt an, bei Wiki als Array....da müsstest du in deiner Routine etwas vorschalten, was beides auf einen gemeinsamen Nenner bringt(Array oder Objekt)
 
Das Dumme ist, dass die Daten nicht einheitlich ankommen...beim Wetter kommt ein Objekt an, bei Wiki als Array....da müsstest du in deiner Routine etwas vorschalten, was beides auf einen gemeinsamen Nenner bringt(Array oder Objekt)

Hallo Sven,

gibt es denn dafür ein verständliches Beispiel ?

oder etwas, was mir das ganze veranschaulichen kann ?

Liebe Grüße
Sven
 
Moin...

Mir ist noch nicht so ganz klar, welche Gemeinsamkeit für dich die beiden Objekte haben,...wozu die gemeinsame Routine?

lg von Sven aus Beeeeerlin;-)
 
Hallo Sven,

ich habe gestern nochmal einiges gelesen, was ich mal ausprobieren möchte. Ich will mal ein paar Schritte machen und poste dann nochmal den Code , der es dir vielleicht besser ermöglicht, meinen wirren Gedanken zu folgen ;-)

Ich poste dann noch mal meine Versuche...

Bei der gemeinsamen Routine waren meine Gedanken, das man die Daten der derzeit sichtbaren Marker abfragt und wie für die Routine der Marker bereit stellt, so das man diese dann nach seinen Wünschen entweder im Marker Info Window (tab) ablegt oder in die Sidebar schreibt. Dabei orientiere ich mich immer auf den Seiten, wo diese Beispiele vorhanden sind.

In meinem Fall aus dem Buch von UWMike (Google Maps & PHP) und Mike (Google Group) - (The Guy what play the Guitar). Leider stehen mir dabei immer wieder meine Unkenntnis im Wege, so das es für einen Profi wie dich sicher komisch aussieht ;-)

Gruss
Sven
 
Mmmh, ich weiss jetzt nicht, ob es das ist, worauf du hinauswillst, aber hier habsch mal was :)
Code:
<body>
<script type="text/javascript">
<!--
a='{"weatherObservation":{"clouds":"n/a","windSpeed":"0.5"}}';
b='{"temperature":"21","countryCode":"DE"}';
c='{"geonames":[{"summary":"Zusammenfassung(...)","title":"Dorfkirche Straupitz"}]}';
d='{"test":{"ichBleibeWieIchBin":"Jawoll","meNot":"ich aber nicht"}}';
e='{"foo":"bar"}';

function jimBob(j,m,s)
{
  r='';
  eval('this.obj='+j+((m!=null)?'.'+m:''));
  for(i=3;i<jimBob.arguments.length;++i)
    {
      r+='<li>'
      if(typeof jimBob.arguments[i]=='string')
        {
          r+=jimBob.arguments[i]+s+this.obj[jimBob.arguments[i]];
        }
      else
        {
          r+=jimBob.arguments[i][1]+s+this.obj[jimBob.arguments[i][0]]
        }
    }
  return((r=='')?'nix':'<ul>'+r+'</ul>')
}


document.write(jimBob(a,'weatherObservation','=&gt;',['clouds','Wolken'],['windSpeed','Windgeschwindigkeit'])+'<hr>');
document.write(jimBob(b,null,':',['temperature','Temperatur'],'countryCode')+'<hr>');
document.write(jimBob(c,'geonames[0]','=&gt;',['summary','Zusammenfassung'],['title','Titel'])+'<hr>');
document.write(jimBob(d,'test','-','ichBleibeWieIchBin',['meNot','Ich nicht'])+'<hr>');
document.write(jimBob(e,null));

//-->
</script>

a-e sind mal testhalber JSON-Notationen, jimBob() wird sie verarbeiten(habs mal so genannt, weil es ja nichts mit J(a)son zu tun hat,da ja eval() benutzt wird...aber darum gehts ja auch nicht :-()

Die Argumente für jimBob:
  1. der String mit der JSON-Notation

  2. Das Zielobjekt in diesem String, aus dem die Eigenschaften geholt werden sollen, wenn der komplette String genommen werden soll, muss dort null hin

  3. ein String, der Zwischen Name und Wert stehen soll

  4. Danach beliebig viele Argumente, jenachdem was ausgegeben werden soll.
    Wenn der Attributname unverändert ausgegeben werden soll, wird er als String notiert, andernfalls ein Array:
    • 1. Array-Element->der originale Attributname
    • 2. Array-Element-> Das, was stattdessen angezeigt werden soll

Ist sicher noch ausbaufähig, aber als Ansatz sollte es schon mal nutzbar sein.
 
Zurück