Nested viewmodels and json in knockout.js

Question

I have seen questions and answers here that somewhat resembles my question here, but they are either way more advanced than my implementation, or is a different direction.

The thing is, a receive a json string that has nested information like so:

{"StudentBaseData":{
    "StudentGuid":123456,
    "FirstName":"my name",
    "LastName":"my last name",
    "Email":"[email protected]",
    "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 this to a viewmodel that i can understand (my knockout skills are very basic, i am just learning this), but the problem is when i have to send the viewmodel back to the backend. Which is a web api. The web api expects the same type of json to be returned.

This is my 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 i said, simple. But the problem is how to replicate the nesting. Doing the observables like so in the viewmodel does not work:

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

Neither does this:

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

And then i have seen something like:

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

That doesnt work either.

What should i do?

Catalin · Accepted Answer · 2013-05-13 07:59:24Z

2

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 your html:

<span data-bind="text: PrimaryEducation.educationName"></span>

answered May 13, 2013 at 7:59

Catalin

11.8k19 gold badges81 silver badges152 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Frederik T Over a year ago

Great! Fast answer, but before i implement it, how do i assign the values programmatically? Normally its "ViewModel.firstname("new value")".

Catalin Over a year ago

ViewModel.PrimaryEducation.educationInstitution("great");

Frederik T Over a year ago

Ok it took a while to implement and rework the page, but it works! Fantastic! :D Still needs a bit tidying up, but this is a huge step forward, perfect! Thanks a lot :)

Catalin Over a year ago

I am happy that helped you, everything has to start from somewhere..good luck!

Collectives™ on Stack Overflow

Nested viewmodels and json in knockout.js

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related