JSON rocks.

JavaScript Object Notation – Det er et enkelt data-format med lite overhead, det er en genial måte å bruke et allerede eksisterende språk på.

På ett av de mange track’ene på Bekks fagdag i Mars 2009, jobbet vi med JavaScript og rammeverk og teknologier knyttet til det. Ett av fokusområdene var JSON. Under følger en kort intro til JSON, samt noen eksempler på tjenester som tilbyr åpne JSON-API’er og kode som viser hvordan man kan importere og bruke dataen.

Hva er JSON

JSON er en måte å representere data på vha. enkel (og standard) JavaScript. Det betyr at man ikke trenger noen plugin eller noe rammeverk hverken på server- eller klient-side for å bruke det.

Et lite JSON-objekt:

var myObject = ({
	"field":"value hmhmhm",
	"childobj":{
		"childfield":"childvalue"
	}
});

For å “vise”  verdien til felter/objektet “field”:

 alert( myObject.field.value );

Eller child-objektet “childobj” sitt “childfield”:

 alert( myObject.field.childobj.childvalue );

Importering av JSON-data

Man kan som kjent bruke AJAX til å hente data dynamisk inn på en side uten å relaste hele siden. En sikkerhetsbegrensning i måten nettlesere behandler AJAX-requester på hindrer henting av data fra en webside som ligger på en annen server enn der hoved-siden ligger. For eksempel går det greit at siden som ligger på http://www.bekk.no/ henter søkeresultater vha AJAX fra http://www.bekk.no/search/ . Men det er ikke mulig for http://www.bekk.no/ å hente noe fra feks http://search.bekk.no/ vha. standard AJAX (uten noen form for proxy).

Derimot er det greiere å få hentet inn JSON fra andre kilder enn sin egen server.  Må kan injecte en ny javascript-kilde-referanse i HTML-dom’en. Følgende kodesnutt viser i klartekst hvordan det går til:

 document.getElementsByTagName("head")[0].appendChild( <em>jsonScriptBlock</em> );

Innholdet i variabelen jsonScriptBlock er HTML og kan være noe ala dette:
<script src=”http://api.flickr.com/services/feeds/news.gne?format=json” type=”text/javascript”/>

Når den linjen settes inn i HTMLdom’en vil browseren laste ned og eksekvere JavaScriptet som mottas. Dette skjer på samme måte som man inkluderer vanlige JavaScript-filer i HTML’en. Den eneste lille forskjellen er at det skjer dynamisk, og typisk etter at siden er lastet og gjerne som en del av interaksjon med brukeren.

Vi har data. Now what?

Første linje i JSON-responsen fra Flickr ser ca slik ut:

 jsonFlickrFeed({...

Ettersom typen på og innholdet i fila som nettopp har blitt lastet ned er JavaScript, vil nettleseren eksekvere innholdet. I dette tilfellet betyr det at den vil kjøre funksjonen jsonFlickrFeed( arg ); Argumentet er JSON-objektet, som representerer dataen vi har forespurt fra Flickr. Men funksjonen  jsonFlickrFeed finnes ikke ennå, og den står vi fritt til å lage (les: vi må, ellers skjer det fint lite):

 function jsonFlickrFeed( json ){
  // Gjør ting med JSON-objektet
}

Hva vi vil gjøre med JSON-objektet avhenger selvsagt litt av hva tilbyderen av dataen har inkludert, og av hvordan datastrukturen ser ut. For Flickr inneholder JSON-strukturen først noen header-felter med litt info om dataen, og deretter kommer en array med items man kan løpe gjennom for å hente ut forskjellige felter fra.

Eksempel

Dette eksempelet forutsettet at vi har javascript-rammeverket Prototype inkludert på HTML-siden, og at man har ett DIV-element på HTML-siden med id=flickrContent.

/**
  En generell funksjon for å sette inn en SCRIPT-tag med gitt src-URL i HEAD
  i HTML-dokumentet.
*/
function injectScript( url ){
	var scriptBlock = new Element( "script", {'src': url,'type':'text/javascript' });
	document.getElementsByTagName("HEAD")[0].appendChild( scriptBlock );
}
 
/**
  Kaller bare injectScript, med vår flickr-URL.
*/
function injectFlickrJson(){
	injectScript( 'http://api.flickr.com/services/feeds/photos_public.gne?format=json&tags=bekk' );
}
 
/**
  Dette er funksjonen som JSON-responsen fra Flickr kaller når den blir lastet av nettleseren.
*/
function jsonFlickrFeed( resp ){
	// For hver item som ligger i arrayen items i JSON-objektet...
	resp.items.each( function( item ){
        	// .. gjør følgende: Put item sin description inn i
		// ett nytt DIV-elemenent og legg det inn i
		// elementet 'flickrContent' som er en DIV i HTML-dokumentet vårt.
		$('flickrContent').appendChild( new Element( "div" ).update( item.description ) );
	});
}

Og det var det hele. Resultatet skal være at en rekke bilder og tekst dukker opp i flickrContent-DIV’en. Ser man nøye på URL’en i funksjonen injectFlickrJson ser man parametert tags=bekk. En enkel utvidelse av denne funksjonen er å la den ta i mot et argument som kan sendes med til flickr. Dermed har man implementert et “søk” blandt alle flickrs millioner av bilder, med ca 9 linjer kode.

Hva kan man bruke denne teknikken til

Flere og flere tjenester som sitter på større mengder data, enten det er nyheter, bilder, værdata, trafikkdata, økonomi-ting, statistikk osv, åpner opp for bruk av hele eller deler av dataen sin. Ved å gi ut slik data til mange kloke hoder kan det komme uventede resultater. Kanskje det finnes sammenhenger mellom tempraturene i Sør-Afrika og økonomien på Island. Kan det være mindre tafikk i Bærum enn i indre Oslo Øst når Storebrand holder pressekonferanse?

Ekstern data kan også brukes til å berike ditt eget innhold. Har du artikler som handler om teknologi, og hvor teknologi-ord går igjen i teksten, kan det kanskje være en ide å knytte disse ordene til nyheter og andre artikler som tagget med den aktuelle teknologien. Disse nyhetene og artiklene kan da være hentet med JSON fra andre kilder og matchet med din artikkel-tekst. Stedsnavn kan knyttes til både værdata og bilder. Selskaper kan knyttes til børs-informasjon.

Kilder og andre ressurser

• http://www.json.org/
• http://www.prototypejs.org/learn/json
• http://flickr.com – http://flickr.com/services/feeds/
• http://twitter.com – http://apiwiki.twitter.com/REST+API+Documentation#TheEasiestWaytoPlayAroundwiththeTwitterAPI
• http://api.yr.no/weatherapi/documentation
• http://www.bbc.co.uk/programmes/developers

PS.

Merk at denne artikkelen ikke berører hverken kode-kvalitet eller sikkerhet. Det man får tilbake fra andre i form av JSON kan inneholde funksjonskall som kan være en sikkerhets risiko. Det man bør alltid utføre santitization på JSON-responsen.