Неправильный рендеринг столбцов таблицы из данных JSON

Question

У меня следующая структура JSON:

{"rows": [

      {"row":[  
             {"cells": [
                   {"data": "Edit"},
                   {"data": "Add"}
             ]}
      ]},
      {"row":[
             {"cells": [
                   {"data": 1},
                   {"data": 2}
             ]}
      ]}
]} 

Для каждой «строки» в файле JSON будет строка таблицы, а для каждого «данных» - столбец строки.

Мой код выглядит так:

$.each(response.rows, function(index, rows){

     $.each(rows.row, function(index, row){
          $("tbody").append("<tr>"); 
          $.each(this.cells, function(){ 
               $("tr").append("<td>" + this.data + "</td>");
          });
          $("tbody").append("</tr>");
     });
}); 

Мой код генерирует строки / столбцы таблицы следующим образом:

Row 1 -- I get 4 columns with values "Edit"/"Add"/1/2 
Row 2 -- I get 2 columns with values 1/2. 

Если я добавлю еще одну «строку» в файл JSON, строки 1 и 2 будут отображены неправильно.

В строке 1 должно быть только 2 столбца со значениями «Редактировать» / «Добавить». Структура JSON выглядит правильно.

Может кто-нибудь сказать, что я делаю не так? Спасибо.

Answer 1

Это ваш синтаксис: http://jsfiddle.net/SXzny/ Это исправляет это, потому что он ссылается не на все теги, а на тот, который вы создали.

Например, заменить:

$.each(rows.row, function(index, row){
  $("tbody").append("<tr>"); 
  $.each(this.cells, function(){ 
       $("tr").append("<td>" + this.data + "</td>");
  });
  $("tbody").append("</tr>");
});

с:

$.each(rows.row, function(index, row){
  var element = $("tbody").append("<tr>"); 
  $.each(this.cells, function(){ 
       element.append("<td>" + this.data + "</td>");
  });
  $("tbody").append("</tr>");
});