knockout.js
Trabajando con knockout foreach vinculante con JSON

Trabajando con bucles anidados

Aquí está la estructura JSON que vamos a utilizar.

{
  "employees": [
    {
      "firstName": "John",
      "lastName": "Doe",
      "skills": [
        {
          "name": "javascript",
          "rating": 5
        }
      ]
    },
    {
      "firstName": "Anna",
      "lastName": "Smith",
      "skills": [
        {
          "name": "css",
          "rating": 5
        },
        {
          "name": "javascript",
          "rating": 5
        }
      ]
    },
    {
      "firstName": "Peter",
      "lastName": "Jones",
      "skills": [
        {
          "name": "html",
          "rating": 5
        },
        {
          "name": "javascript",
          "rating": 3
        }
      ]
    }
  ]
};

Esta estructura json puede asignarse a una variable o puede ser una respuesta de cualquier api.

Como podemos ver en este JSON, hay un nodo externo de empleados que contiene información sobre ellos, y hay un nodo interno que informa sobre las habilidades de cada empleado.

así que aquí vamos a crear un anidado para cada uno utilizando nocaut para cada uno. Aquí está el html

<ul id="employee" data-bind="foreach: employee">
   <li data-bind="text:firstName + ' ' + lastName">
   </li>
   <ul data-bind="foreach : skills">
        <li data-bind="text: name">
        </li>
      <ul>
        <li>
          Rating : <!-- ko text: rating --><!-- /ko -->
        </li>
      </ul>
   </ul>
</ul>

Aquí en el html anterior hay dos listas que contienen bucle foreach. El bucle externo mantendrá el nodo externo de la estructura json que es empleados. Bucle interior mantiene las habilidades de cada empleado. Dentro de cada bucle podemos acceder a las propiedades del nodo correspondiente. Para un ejemplo, podemos acceder al nombre y la calificación dentro del bucle de habilidades no desde afuera.

A continuación se muestra el código javascript.

var employeeViewModel = function(){
  var self = this;
  self.employee = ko.observableArray(employees);//here we can assign json
}
var viewModel = new employeeViewModel();
ko.applyBindings(viewModel);

Desde el punto de vista de javascript no hay mucho código. podemos asignar directamente nuestro json a un observblearray que será utilizado por Html.