WebDevTeam’s Blog

Web Development, JavaScript, CSS, Ajax, Web2.0, Usability, Interaction, Tools

Posts Tagged ‘json

jQuery und JSON – ein kleines Beispiel

leave a comment »

Ich möchte mich nicht outen, aber ich habe erst letzte Woche das erste mal wirklich mit JSON was gemacht, außer nur darüber zu lesen. Die Verarbeitung von JSON mit jQuery ist einfacher als ich angenommen habe.

JSON sieht einfach so aus:

[{"Vorname":"Marie", "Nachname":"Mueller", "vari_able":"deutsch"},
{"Vorname":"Heinz", "Nachname":"Ludwig", "vari_able":"deutsch"}]

Will man dieses per jQuery und Ajax in die Seite in das DIV mit der id „meineFamilie“

<div id="meineFamilie"></div>

einbinden, muss man nichts anderes tun, als der Ajax Funktion „json“ als dataType zu geben und im Falle des „success“ durch die einzelnen JSON Datensätze mit den Key / Value Paaren zu gehen.

var suffix = 'able';
function zeigeFamilie(url){
 jQuery.ajax({
  url:         url,
  dataType:    "json",
  beforeSend:  function(){alert('Es geht los...');},
  success:     function(data){
                // Variable zusammenbauen
                var zusammen = 'vari_' + suffix;
                // durch jedes Element iterieren
                jQuery.each(data, function(i){
                  jQuery('#meineFamilie').append('<p>'
                    + data[i].Vorname
                    + ' '
                    + data[i].Nachname
                    + ', '
                    + data[i][zusammen]
                    + '</p>');
                });
               },
  error:       function(e){alert('oops: ' + e);}
  });
}

In diesem Beispiel muss man der Funktion die URL mitgeben, woher das JSON geholt wird. Ausgegeben werden dann zwei Absätze mit jeweils den Vor- und Nachnamen und dem zusammengebauten Key. Wenn man also eine Variable erst im Skript zusammen bauen kann / muss, kann man nicht per „.“ darauf zugreifen sondern per „[]“.

Das wars auch schon (sofern ich in dem schnell zusammen geschriebenen Beispiel keine Fehler gemacht habe).

Written by webdevteam

April 7, 2009 at 2:28 pm

Veröffentlicht in Uncategorized

Tagged with ,