JSFiddle - React, Tailwind, and code Playground

by nikoshr

HTML

<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="http://backbonejs.org/backbone-min.js"></script>

JavaScript

var data = {
  "id": 1,
  "title": "Test Survey",
  "groups": [
    {
      "id": 1,
      "title": "Basic Questions",
      "questions": [
        {
          "id": 1,
          "title": "Which is your favorite color?"
        },
        {
          "id": 2,
          "title": "Do you have any other hobbies?"
        }
      ]
    },
    {
      "id": 2,
      "title": "Working Questions",
      "questions": [
        {
          "id": 3,
          "title": "Do you think working exp is very important?"
        }
      ]
    }
  ]
};


var Question = Backbone.Model.extend({});
var QuestionsCollection = Backbone.Collection.extend({
    model: Question
});

var Group    = Backbone.Model.extend({
    initialize: function(data) {
        this.questions = new QuestionsCollection();
        this.parse(data);
    },
    parse: function(data) {
        if (data.questions) {
            this.questions.reset(data.questions);
        }
        return _.omit(data, 'questions');
    }
});
var GroupsCollection = Backbone.Collection.extend({
    model: Group
});

var Survey   = Backbone.Model.extend({
    initialize: function(data) {
        this.groups = new GroupsCollection();
        this.parse(data);
    },
    parse: function(data) {
        if (data.groups) {
            this.groups.reset(data.groups);
        }
        return _.omit(data, 'groups');
    }
});

var s = new Survey(data);
var g = s.groups.at(0);
console.log(g.get('title'));
var q = g.questions.at(0);
console.log(q.get('title'));