Sinds de release van Flash Builder 4.6 is het mogelijk om json te parsen zonder het gebruik van externe libraries.
Voor dit voorbeeld maken we gebruik van de iRail API.
Het parsen van JSON werkt alleen in Flash Builder 4.6 en hoger, maar voor de studenten die nog niet beschikken over deze versie heb ik goed nieuws, op de website van Adobe kan je als student gratis een licentie aanvragen voor Flash Builder 4.6.
De data kun je hier terugvinden, maar aangezien deze niet echt overzichtelijk wordt getoond in de doorsnee browser heb ik hieronder een verkorte versie bijgevoegd in een leesbaar formaat.
{
"version":"1.1",
"timestamp":"1353850340",
"station":[
{
"id":"BE.NMBS.008883006",
"locationX":"4.137658",
"locationY":"50.605075",
"name":"'s Gravenbrakel",
"standardname":"Braine Le Comte"
},
{
"id":"BE.NMBS.008895000",
"locationX":"4.038586",
"locationY":"50.943053",
"name":"Aalst",
"standardname":"Aalst"
},
{
"id":"BE.NMBS.008895125",
"locationX":"4.024773",
"locationY":"50.948316",
"name":"Aalst Kerrebroek",
"standardname":"Aalst Kerrebroek"
},
{
"id":"BE.NMBS.008891140",
"locationX":"3.447856",
"locationY":"51.092258",
"name":"Aalter",
"standardname":"Aalter"
},
{
"id":"BE.NMBS.008866001",
"locationX":"5.810614",
"locationY":"49.679975",
"name":"Aarlen",
"standardname":"Arlon"
}
]
}Zoals we hierboven zien zitten er 3 properties in onze JSON, namelijk version, timestamp en station. De station property is onze repeterende node en bevat de data waar we naar op zoek zijn.
Eerst moeten we enkele elementen klaarzetten voor we onze data kunnen inlezen en gebruiken.
Vervolgens zetten we in onze Actionscript een HTTPService object klaar om de call naar de iRail service te maken.
Dan definiëren we een nieuwe bindable ArrayCollection om onze stations in te steken en deze te databinden aan een datagrid.
public var stationService:HTTPService = new HTTPService();
[Bindable]public var acStations:ArrayCollection = new ArrayCollection();In onze mxml maken we een Datagrid die onze hele applicatie in beslag neemt, deze databinden we ook met de ArrayCollection die we eerder hadden klaargezet.
<s:DataGrid width="100%" height="100%" dataProvider="{acStations}" horizontalCenter="0" verticalCenter="0" />Tot zover de voorbereiding, nu komt het programmeerwerk.
We beginnen met het maken van een creationComplete event dat onze HTTPService de lucht instuurt als onze applicatie wordt geladen en een ResultEvent aan onze HTTPService hangt die we gaan gebruiken als onze data is ingelezen.
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
creationComplete="application1_creationCompleteHandler(event)">
protected function application1_creationCompleteHandler(event:FlexEvent):void
{
stationService.url= "http://api.irail.be/stations/?lang=nl&format=json";
stationService.addEventListener(ResultEvent.RESULT, httpComplete);
stationService.send();
}We hebben de url van de api aan onze HTTPService gehangen, hebben een ResultEvent aan onze service gehangen en hebben onze service de lucht ingestuurd.
In ons ResultEvent vinden we onze ingelezen data terug als String in de property result van het event object. Om onze data te gebruiken moeten we onze ingelezen string omzetten in een Actionscript object, om vervolgens onze repeterende node (station) in onze ArrayCollection te steken.
JSON.parse zet onze ingelezen JSON String om in een Actionscript Object. Als je nu een kijkje neemt in de debugger zul je zien dat onze repeterende node is omgezet in een propere Array die we gemakkelijk kunnen uitlezen.
Vervolgens steken we de data uit onze repeterende node in een ArrayCollection om deze te kunnen gebruiken in onze applicatie.
protected function httpComplete(event:ResultEvent):void
{
var stationsObj:Object = JSON.parse(String(event.result));
acStations = new ArrayCollection(stationsObj.station as Array);
}