javascript - Nested viewmodels and json in knockout.js -

i have seen questions , answers here resembles question here, either way more advanced implementation, or different direction.

the thing is, receive json string has nested information so:

{"studentbasedata":{     "studentguid":123456,     "firstname":"my name",     "lastname":"my last name",     "email":"email@email.com",     "password":123456,     "birthdate":"01-01-1986",     "picture":null,     "mobilephone":"123456789",     "gender":"hr."}, "primaryeducation":{     "name":"something",     "institution":"something",     "studystartdate":"2011-12-01",     "graduationdate":"2013-12-01",     "thesissubject":"something"}, "maddress":{     "street":"a road",     "streetnr":"12",     "zipcode":"1234",     "city":"a city"} } 

i can repackage viewmodel can understand (my knockout skills basic, learning this), problem when have send viewmodel backend. web api. web api expects same type of json returned.

this current viewmodel:

 var viewmodel = {       studentguid: ko.observable("<%=session["guid"]%>"),       firstname: ko.observable(""),       lastname: ko.observable(""),          email: ko.observable(""),       password: ko.observable(""),       birthdate: ko.observable(""),       day: ko.observable(""),       month: ko.observable(""),       year: ko.observable(""),       picture: ko.observable(""),       mobilephone: ko.observable(""),       gender: ko.observable(""),        street: ko.observable(""),       streetnr: ko.observable(""),       zipcode: ko.observable(""),       city: ko.observable(""),        primaryeducationname: ko.observable(""),       primaryeducationinstitution: ko.observable(""),       primaryeducationstudystartdate: ko.observable(""),       primaryeducationgraduationdate: ko.observable(""),       primaryeducationthesissubject: ko.observable("")     }; 

like said, simple. problem how replicate nesting. doing observables in viewmodel not work:

  studentbasedata.firstname: ko.observable(""),   studentbasedata.lastname: ko.observable(""),      studentbasedata.email: ko.observable(""), 

neither this:

"studentbasedata.firstname": ko.observable(""),   "studentbasedata.lastname": ko.observable(""),      "studentbasedata.email": ko.observable(""), 

and have seen like:

studentbasedata[ lastname: ko.observable(""), email": ko.observable("") ] 

that doesnt work either.

what should do?

this should work:

var viewmodel = {     studentbasedata: {         studentguid: ko.observable("<%=session["guid"]%>"),         firstname: ko.observable(""),         lastname: ko.observable(""),            email: ko.observable(""),         password: ko.observable(""),         birthdate: ko.observable(""),         day: ko.observable(""),         month: ko.observable(""),         year: ko.observable(""),         picture: ko.observable(""),         mobilephone: ko.observable(""),         gender: ko.observable(""),     },      maddress: {         street: ko.observable(""),         streetnr: ko.observable(""),         zipcode: ko.observable(""),         city: ko.observable(""),     },      primaryeducation: {         educationname: ko.observable(""),         educationinstitution: ko.observable(""),         educationstudystartdate: ko.observable(""),         educationgraduationdate: ko.observable(""),         educationthesissubject: ko.observable("")     } }; 

in html:

<span data-bind="text: primaryeducation.educationname"></span>