PDA

View Full Version : Right method to process Complex Json Results



pkvenu
18 Oct 2011, 9:57 PM
I have a json object returned in the format below.


{
"ParkingFacilities": [
{
"VendorID": 1200,
"FacilityID": 902,
"ParkingType": "Garage",
"BARTValidationRequired": null,
"LotName": "California and Steiner Lot",
"City": "San Francisco",
"Street": "2450 California Street",
"Neighborhood": "Fillmore",
"Latitude": "37.790000",
"Longitude": "-122.430000",
"Distance": "",
"Availability": "Space Available: <b>30%</b> (210/65) <br>Current Price: $8/hr-$35/hr max <br />Open Today:",
"Details": null,
"Hours": "",
"Entrance": "",
"Contact": "",
"TodayTimings": null,
"TotalParkingSpace": 45,
"AvailableParkingSpace": 16,
"OccupiedParkingSpace": 29,
"PercentFull": 64,
"Rendering": 2,
"OwnershipAgencyType": null
}


],
"ParkingZones": [
{
"ZoneID": 1,
"City": "San Francisco",
"Neighborhood": "Fisherman's Wharf",
"CentralLatitude": 37.80696471,
"CentralLongitude": -122.41867077,
"LocationDescription": "Leavenworth & Beach",
"Total": 197,
"Available": 45,
"Availability": "Space Available: <b>45%</b> (89/197)",
"Occupied": 89,
"Distance": "0.4 Miles",
"Rendering": 3
}
]
}


I would like to know how do i create a model for this json structure and use then render it to draw points on the map.


Ext.regModel("parking.models.Facility", {
fields:
[
{ name: 'VendorID', type: 'int' },
{ name: 'FacilityID', type: 'int' },
{ name: 'ParkingType', type: 'string' },
{ name: 'BARTValidationRequired', type: 'auto' },
{ name: 'LotName', type: 'string' },
{ name: 'City', type: 'string' },
{ name: 'Neighborhood', type: 'string' },
{ name: 'Latitude', type: 'auto' },
{ name: 'Longitude', type: 'auto' },
{ name: 'Distance', type: 'auto' },
{ name: 'Availability', type: 'string' },
{ name: 'Details', type: 'string' },
{ name: 'Hours', type: 'auto' },
{ name: 'Entrance', type: 'string' },
{ name: 'Contact', type: 'auto' },
{ name: 'TodayTimings', type: 'auto' },
{ name: 'TotalParkingSpace', type: 'float' },
{ name: 'AvailableParkingSpace', type: 'float' },
{ name: 'OccupiedParkingSpace', type: 'float' },
{ name: 'PercentFull', type: 'auto' },
{ name: 'Rendering', type: 'int' },
{ name: 'OwnershipAgencyType', type: 'auto' }
]
});


Ext.regModel("parking.models.Zones", {
fields:
[
{ name: 'ZoneID', type: 'int' },
{ name: 'City', type: 'string' },
{ name: 'Neighborhood', type: 'string' },
{ name: 'CentralLatitude', type: 'auto' },
{ name: 'CentralLongitude', type: 'auto' },
{ name: 'LocationDescription', type: 'string' },
{ name: 'Total', type: 'float' },
{ name: 'Available', type: 'float' },
{ name: 'Availability', type: 'string' },
{ name: 'Occupied', type: 'float' },
{ name: 'Distance', type: 'auto' },
{ name: 'Rendering', type: 'int' }

]

});


Store I have created for parking Facility:


parking.stores.parkingFacility = new Ext.data.Store({
model: 'parking.models.Facility',
proxy: {
type: 'ajax',
url: 'GetParkingFacilityByCity.json',
reader: {
type: 'json',
root: 'ParkingFacilities'
}
},
autoLoad:true
});


This is how i render it in my view


var map = new Ext.Map({
title: 'Map',
useCurrentLocation: true,
mapOptions: {
center: new google.maps.LatLng(37.381592, -122.135672),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP,
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.DEFAULT
}
},
listeners: {
maprender: function (comp, map) {
var image = 'icon_blueP.png';
data = parking.stores.parkingFacility;
for (var i = 0, ln = data.data.length; i < ln; i++) {
addMarkers(data.data.items[i], image);
}
}
}

});


var addMarkers = function (data,image) {

var latLng = new google.maps.LatLng(data.get('Latitude'), data.get('Longitude'));
var marker = new google.maps.Marker({
map: map.map,
position: latLng,
icon:image
});

google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});

// setTimeout( function(){ map.panTo (position); } , 1000);

}


Question is rather than creating 2 separate store. can i use a single store and then when rendering in the google maps use the single store to get all the information.

this is my first store


data = parking.stores.parkingFacility;
for (var i = 0, ln = data.data.length; i < ln; i++) {
addMarkers(data.data.items[i], image);
}

do i need to again call something like this again to add the 2 second set of markers


data 2= parking.stores.zones
for (var i = 0, ln = data.data.length; i < ln; i++) {
addMarkers(data.data.items[i], image);
}


or is there a better way to do this. can some one help me with samples.


Thanks
Pawan