JSFiddle - React, Tailwind, and code Playground

by Abra Cadabra

JavaScript

var StateViewModel = function (data) {
    this.name = ko.observable();
    this.$type = 'StateViewModel';
    ko.mapping.fromJS(data, mapping, this);
}

var CityViewModel = function (data) {
    this.name = ko.observable();
    this.$type = 'CityViewModel ';
    ko.mapping.fromJS(data, mapping, this);
}

var StreetViewModel = function (data) {
    this.name = ko.observable();
    this.$type = 'StreetViewModel';
    ko.mapping.fromJS(data, mapping, this);
}

var mapping = {
    'cities': {
        create: function (options) {
            return new CityViewModel(options.data);
        }
    },
        'streets': {
        create: function (options) {
            return new StreetViewModel(options.data);
        }
    }
}


var data = {
    state: {
        name: 'SD',
        cities: [{
            name: 'Sioux Falls',
            streets: [{
                number: 1
            }, {
                number: 3
            }]
        }, {
            name: 'Rapid City',
            streets: [{
                number: 2
            }, {
                number: 4
            }]
        }]
    }
};

var vm = new StateViewModel(data.state)

debugger;

console.log(vm);
console.log(vm.$type);
console.log(vm.cities());
console.log(vm.cities()[0].$type);
console.log(vm.cities()[0].streets());
console.log(vm.cities()[0].streets()[0].$type);