Parsing The Response From Fetch Backbone - backbone.js

Question

I am not able to get the response string from the fetch method in my view render method.
The Collection Class Goes here.
Collection = (function(){
var Events;
Events = Backbone.Collection.extend({
url:function(){
//alert(urlOptions);
return this.urlParam;
// alert('API call :'+urlOptions);
},
initialize: function(models, options){
this.urlParam = options.urlParam || "";
},
parse: function( response ){
var parsed = Jath.parse(
[ '//notes', {
} ], response );
console.log(parsed);
return parsed;
}
});
return {
newInstance : function(models,options) { return new Events(models,options); }
};
})();
The View Goes Here
View = (function() {
'use strict';
var
htmlTemplate = _.template( $('#eventGridTemplate' ).html() ), // See templatesSearch.jsp
expanded = true, // By default the Events Grid extends to the bottom of the browser window.
BackboneView, applyStyles;
/**
* Apply CSS specific to this view
* Unfortunately, this View needs to modify its parent wrapper element.
* Otherwise the layout will break when it's resized. See templatesSearch.jsp.
* #param {Object} $elmt
* #param {Boolean} expand
*/
applyStyles = function( $elmt, expand ) {
var
top = '2px',
left = '2px',
pos = 'absolute',
right = '2px';
if ( expand ) {
$elmt.css({
"position" : pos,
"top" : top,
"left" : left,
"right" : right,
"bottom" : "2px"
});
$elmt.parent().css( 'bottom', '2px' );
} else {
$elmt.css({
"position" : pos,
"top" : top,
"left" : left,
"right" : right,
"bottom" : "50%"
});
$elmt.parent().css( 'bottom', '50%' );
}
};
// See 'http://backbonejs.org/#View-constructor' for more info
BackboneView = Backbone.View.extend({
onAiringsBtn : function( event ) {
// If the Events Grid container was expanded, contract it.
// If it was contracted, expand it.
expanded = expanded ? false : true;
applyStyles( this.$('div'), expanded );
},
initialize : function() {
this.render();
},
render : function() {
// this.$el is the jQuery version of this.el
// Which is populated by options.el
// Which is part of the options object passed into the constructor
//alert('Start Date:' +$('#datepicker').datepicker('getDate'));
var eventsCollection = Collection.newInstance([],{urlParam:'http://localhost:8080/adtglobal/2.0/api/events?startDate=2013-11-05T00:00:00-0400&endDate=2013-11-06T00:00:00-0400'});
//console.log(eventsCollection.url());
eventsCollection.fetch({
success : function(eventsCollection , response){
console.log(eventsCollection.toJSON());
alert(eventsCollection.toJSON());
}
});
this.$el.html( htmlTemplate );
applyStyles( this.$('div'), true );
}
});
//-------------------------------------------------------------------------------------------------------------------
// Public API
//-------------------------------------------------------------------------------------------------------------------
return {
newInstance : function(options) { return new BackboneView(options); }
};
})();
I get The response as success and i see the xml in the browser console, but how do i parse it here ??
The response is here
<Events xmlns="urn:api:2.0">
<PageNavigation showing="45"></PageNavigation>
<Event id="400515625" href="400515625" source="SDR">
<OrgHierarchy>
<level id="56" typeId="100" title="Soccer" description="Sport" href="../sporthierarchy?levelId=56&levelTypeId=100"></level>
<level id="2902" typeId="101" title="UEFA" description="Confederation" href="../sporthierarchy?levelId=2902&levelTypeId=101" parentId="56" parentType="100"></level>
</OrgHierarchy>
<EventType id="1">Standard Event</EventType>
<League id="1860">UEFA > Polish Orange Ekstraklasa</League>
<EventTitleText>Ruch Chorzow vs. Zawisa Bydgoszcz</EventTitleText>
<CompetitionType id="1">Team vs Team</CompetitionType>
<EventCompetitors>
<Teams>
<HomeTeam id="73960" href="../teams/73960">Ruch Chorzow</HomeTeam>
<AwayTeam id="107278" href="../teams/107278">Zawisa Bydgoszcz</AwayTeam>
</Teams>
</EventCompetitors>
</Event>
</Events>

Answer 1

well, it seems you are not using Jath correctly.
you need to define a template that matches your XML.
I have not used Jath before, but I will try to create a simple template for you:
//in your parse
var template = [ "//Events", {id: "#id", eventType: 'EventType'}];
return Jath.parse(template, response );
try this first and see if you have something in your collection.
it seems you have nested resources in your response, so you will have to complete the template.
or, if you don't have to use Jath, try something simpler: here's an example jsfiddle, you should be able to see the parsed JSON in the console.
http://jsfiddle.net/5j57T/
EDIT: xml to json code is from: http://davidwalsh.name/convert-xml-json
NOTE: you need to parse that json again into an array of objects you need, in order to make your app work!
=====================
EDIT: another example (works better than the previous fiddle)
http://jsfiddle.net/5j57T/1/
uses a jquery library http://www.fyneworks.com/jquery/xml-to-json/
there's only one issue, since there's only one event in your events, it cannot be parsed to an array by default, you will have to do that manually. If, there's always only one event per response, you can do something like this:
parsed = [$.xml2json(xmlDoc.getElementsByTagName('event')[0])]
or you can just do
parsed = $.map(xmlDoc.getElementsByTagName('event'), function(eventXml) {
return $.xml2json(eventXml);
});
working jsfidde: http://jsfiddle.net/5j57T/2/
==========================
EDIT:
I think by default, backbone is expecting a JSON response from the server. You will have to overwrite it's fetch() function so support XML. so in your collection definition, add this:
fetch: function (options) {
options = options || {};
options.dataType = "xml";
return Backbone.Collection.prototype.fetch.call(this, options);
}
here's a working jsfiddle: http://jsfiddle.net/5j57T/4/
Ignore the 'data' and 'type' options I passed to fetch(), and the url, all of that are just to make Ajax request work on jsfiddle. You shouldn't have those in your app.
In this demo, when the XML is returned, it's parsed into the collection correctly. You should be able to see your collection in the console.
======
If all of your backend services return XML only. I'd suggest overwrite the Backbone.sync function to make it work for other methods like save().