Bind both the table inside the Div using Knockoutjs

Sign in to answer this question.

• 

  Jaganathan Bantheswaran12y agoPosted Apr 3, 2014, 8:16 AM

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

  Jaganathan Bantheswaran12y agoPosted Jan 20, 2014, 6:47 AM

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

  Murali krishna Ande12y agoPosted Jan 17, 2014, 5:52 AM

  Hi, Thanks for the Reply, I tried the code provided by you. But I am getting error in reading "result[index].Key.DeptName" showing unable to get property "DeptName" --Regards, Murali krishna
• 

  Jaganathan Bantheswaran12y agoPosted Jan 17, 2014, 1:59 AM

  Hi,
  
  Your view part,
  
  

  
   
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  EmpID	Name	Salary	Action

  
  

  
  
  
  
  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;
  }