Data modeling and loading/saving

[Wet Feet]

I would like to know how to model my nested data structure to work with Knockout.

Let's take an example. Conceptually, a company can have multiple departments, and each department has multiple employees. Each employee has several data fields like name, id, title, telephone number etc.

A very simple way of writing this in JavaScript could be like this:

var companyData =
[
  {
    name: "HR"
    employees:
      [
        {
          name: "Sally",
          id: 1,
          title: "Consultant",
          phone: "+1-202-555-0148"
        },
        {
          name: "Mary",
          id: 2,
          title: "Recruiter",
          phone: "+1-202-555-0150"
        },
        {
          name: "Elaine",
          id: 3,
          title: "Manager",
          phone: "+1-202-555-0167"
        }
      ]
  },
  {
    name: "IT"
    employees:
      [
        {
          name: "Tom",
          id: 1,
          title: "Technician",
          phone: "+1-202-666-0824"
        },
        {
          name: "Dick",
          id: 2,
          title: "Engineer",
          phone: "+1-202-666-0431"
        },
        {
          name: "Harry",
          id: 3,
          title: "Programmer",
          phone: "+1-202-666-0876"
        }
      ]
  }
]

Now, under Knockout, what is the appropriate way to turn them into ko.observables and ko.observableArrays?

Possible Method 1

Should I just create an ko.observableArray and stick the mega nested array above?

var company = ko.observableArray(companyData);

Possible Method 2

Should I create classes like Company, Department and Employee and turn every property and array as ko.observable and ko.observableArray one-by-one?

var Company = function(departments){
  return ko.observableArray(departments);
}

var Department = function(name, employees){
  return {
    name: ko.observable(name),
    employees: ko.observableArray(employees)
  }
}

var Employee = function(name, id, title, phone){
  return {
    name: ko.observable(name),
    id: ko.observable(id),
    title: ko.observable(title),
    phone: ko.observable(phone)
  }
}

var company = new Company([
  new Department("HR", [
    new Employee("Sally", 1, "Consultant", +1-202-555-0148"),
    new Employee("Mary", 2, "Recruiter",     "+1-202-555-0148"),
    new Employee("Elaine", 3, "Manager",      "+1-202-555-0148")

  ]),
  new Department("IT", [
    new Employee("Tom", 4, "Technician", "+1-202-555-0148"),
    new Employee("Dick", 5, "Engineer", "+1-202-555-0148"),
    new Employee("Harry", 6, "Programmer", "+1-202-555-0148")
  ])
]);

Saving to JSON string and loading back into observables

On a related note, when saving to storage, we can do a shortcut to turn it into a JSON string:

var dataString = ko.toJSON(company);

And then store it or send it over the network.

However when loading it back, is there any shortcut one liner to parse and turn them back into observables again?

Currently, it is recommended to use:

var parsed = JSON.parse(dataString);

The parsed is just a plain JavaScript data structure like companyData.  Do we have to write a loop to iterate through the parsed JSON string, and use observableArray push function to insert the employee and department one-by-one? Can I instead do this:

var company = ko.observableArray(parsed);