Bind both the table inside the Div using Knockoutjs

If the answer is helped you, make it as Correct answer.

This is just the logic.... you have to take care about the null & undefined checks.... Hope it helped you...

Hi,

Your view part,





Your viewmodel part,

var result = [{"Key":{"DeptID":1008641,"DeptName":"Loma Palisades","DeptAddress":"2799 Adrian Street, , SAN DIEGO, , PIN: 92110, US, PH: (619) 255-9944, ","ZipCode":"92110","DeptEmail":"[email protected]","DeptPic":""},"Value":[{"DeptID":1008641,"EmpNumber":3,"Bed":1,"Bath":1,"Salary":1609,"SQFeet":1025,"EmpDescription":"2989 Barnard \n002 carport\nnext to pool","EmpReadyDate":"/Date(1389119400000)/","EmpAvailableFlag":true,"EmpAvailableDate":"/Date(1390156200000)/","EmpMoveInDate":"/Date(1391020200000)/"},{"DeptID":1008641,"EmpNumber":1,"Bed":2,"Bath":1,"Salary":1609,"SQFeet":1025,"EmpDescription":"2991 Barnard \nCarport 06","EmpReadyDate":"/Date(1389119400000)/","EmpAvailableFlag":true,"EmpAvailableDate":"/Date(1390156200000)/","EmpMoveInDate":"/Date(1391020200000)/"},{"DeptID":1008641,"EmpNumber":4,"Bed":2,"Bath":2,"Salary":1609,"SQFeet":1025,"EmpDescription":"2989 1/2 Barnard\nReserved space 499","EmpReadyDate":"/Date(1389119400000)/","EmpAvailableFlag":true,"EmpAvailableDate":"/Date(1390156200000)/","EmpMoveInDate":"/Date(1391020200000)/"},{"DeptID":1008641,"EmpNumber":2,"Bed":3,"Bath":2,"Salary":1609,"SQFeet":1025,"EmpDescription":"2991 1/2 Barnard \nCarport 010","EmpReadyDate":"/Date(1389119400000)/","EmpAvailableFlag":true,"EmpAvailableDate":"/Date(1390156200000)/","EmpMoveInDate":"/Date(1391020200000)/"}]}]
,
  employeeSummary =[];


for(int index =0; index < result.length; index++)
{
  var empDetail = {};
  empDetail.departmentName = result[index].Key.DeptName;
  empDetail.departmentId = result[index].Key.DeptID;
  empDetail.count = result[index].Values.length;
  empDetail.employeeDetails = getEmployeeDetails(result[index].Values); // This will map & return you the array of employee details from the result.Values array [dont create any obsorvables, use just array. because we are not updating anything once its bound]
 
  employeeSummary[index] = empDetail; // Array of employee summary
}

function getEmployeeDetails(employees)
{
    var mappedEmployee = [];
  var employee = {};
  for(int index =0; index < employees.length; index++)
  {
  employee.id = employees[index].EmpNumber;
  employee.name = employees[index].EmpName;
  employee.salary = employees[index].EmpSalary;
  mappedEmployee[index] = employee;
  }
 
  return mappedEmployee;
}