JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgithub.com/SteveSanderson/knockout.mapping/master/knockout.mapping.js"></script>

JavaScript

var data = {
    people: [
        {id: 1, age: 25,
         child : [{id : 1,childname : "Alice"},{id : 2,childname : "Wonderland"}]}, 
        {id: 2, age: 35}
    ],
    Address:[
        {AddressID : 1,City : "NewYork",
         cities : [{cityId :1,cityName : "NewYork"},{cityId :2,cityName : "California"}]},
        {AddressID : 2,City : "California",
         cities : [{cityId :1,cityName : "NewYork"},{cityId :2,cityName : "California"}]}
        
    ],
    isSelected : true,
    dataID : 6
};
var mappingOptions = {
    people: {
        create: function(options) {
            console.log("people");
            console.log(options);
            return ko.mapping.fromJS(options.data, childmappingOptions);
        }
    },
    Address: {
        create: function(options) {
            console.log("Address");
            console.log(options);
            return ko.mapping.fromJS(options.data, childmappingOptions);
        }
    }
}
var childmappingOptions = {
    child: {
        create: function(options) {
            return ko.mapping.fromJS(options.data, { observe: ["id","childname"]});
        }
    },
    cities :{
        create: function(options) {
            return ko.mapping.fromJS(options.data, { observe: ["cityId","cityName"]});
        }
    }
}
var r = ko.mapping.fromJS(data, mappingOptions);
//console.log(r);
//console.log("people");
//console.log(r.people());
//console.log("address" );
//console.log(r.Address());
//console.log("people's child");
//console.log(r.people()[0].child());
//console.log("address's city");
//console.log(r.Address()[0].cities());