JSFiddle - React, Tailwind, and code Playground

by jgarrido

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.3/backbone-min.js"></script>

JavaScript

var data = {
	"title": "Seinfeld",
	"seasons": [
		{
			"seasonNumber": 4,
			"episodes": [
				{
					"episodeTitle": "No Soup For You",
					"episodeNumber": 3,
					"description": "THe local soup guy doesn't give Seinfield soup"
				},
				{
					"episodeTitle": "Revenge on the Soup Nazi",
					"episodeNumber": 4,
					"description": "Seinfield gets revenge on the Soup Nazi"
				}
			]
		},
		{
			"seasonNumber": 5,
			"episodes": [
				{
					"episodeTitle": "Ellen Gets a Tat",
					"episodeNumber": 4,
					"description": "Ellen gets a new tattoo, everyone goes ballistic"
				}
			]
		},
		{
			"seasonNumber": "other",
			"episodes": [
				{
					"episodeTitle": "Revenge on the Soup Nazi",
					"episodeNumber": 4,
					"description": "Seinfield gets revenge on the Soup Nazi"
				}
			]
		}
	]
};

EpisodeModel = Backbone.Model.extend({
	parse: function(data, options) {
		console.info("EpisodeModel.parse() ", data, options);
		return data;
	}
});

EpisodeCollection = Backbone.Collection.extend({
	model: EpisodeModel,
	parse: function(data, options) {
		console.info("EpisodeCollection.parse() ", data, options);
		return data.episodes;
	}
});

SeasonModel = Backbone.Model.extend({
	parse: function(data, options) {
		console.info("SeasonModel.parse() ", data, options);
		var episodeCollection = new EpisodeCollection(data, {parse: true});
		this.set('episodes', episodeCollection);
		this.set('seasonNumber', data.seasonNumber);
	}
});

SeasonCollection = Backbone.Collection.extend({
	model: SeasonModel,
	parse: function(data, options) {
		console.info("SeasonCollection.parse() ", data, options);
		return data.seasons;
	}
});

SeriesModel = Backbone.Model.extend({
	parse: function(data, options) {
		console.info("SeriesModel.parse() ", data, options);
		var seasonCollection = new SeasonCollection(data, {parse: true});
		this.set('seasons', seasonCollection);
	}
});

var series = new SeriesModel(data, {parse: true});
console.info("series: ",...