создание таблицы с использованием JSON объектов, почему последняя строка имеет 'td' из двух строк и одну пустую строку на первом месте - PullRequest
Новая
       4

создание таблицы с использованием JSON объектов, почему последняя строка имеет 'td' из двух строк и одну пустую строку на первом месте

1 голос
/ 13 января 2020

Я использую django шаблоны и имею JSON данные для рендеринга на нем. Но проблема в том, что первая строка пуста, когда более 1 объекта создано с использованием итерации. и последний объект имеет данные (td's) одной дополнительной строки.

Код здесь -

Передан JSON объект похож на этот: 

{"Academics": {"IB": {"IB_1st": {
            "id": 12, "group": 2, "group__group_group": "Academics-CBSE/IB-upto5th", "group__name": "German",
            "category__type": "Academics", "board__name": "IB", "tuition_class__name": "1st", "stream__name": null,
            "subject__name": "German", "streams": [null], "subjects": {"12": "German"}
        },
        "IB_Pre-Primary": {
            "id": 2339, "group": 2, "group__group_group": "Academics-CBSE/IB-upto5th", "group__name": "German",
            "category__type": "Academics", "board__name": "IB", "tuition_class__name": "Pre-Primary",
            "stream__name": null, "subject__name": "German", "streams": [null], "subjects": {"2339": "German"}
        }
    },
"CBSE": {"CBSE_2nd": {
        "id": 13, "group": 2, "group__group_group": "Academics-CBSE/IB-upto5th", "group__name": "German",
        "category__type": "Academics", "board__name": "CBSE", "tuition_class__name": "2nd", "stream__name": null,
        "subject__name": "German", "streams": [null], "subjects": {"13": "German"}},
    "CBSE_3rd": {
        "id": 15, "group": 2, "group__group_group": "Academics-CBSE/IB-upto5th", "group__name": "German",
         "category__type": "Academics", "board__name": "CBSE", "tuition_class__name": "3rd", "stream__name": null,
          "subject__name": "German", "streams": [null], "subjects": {"15": "German"}
        }
    }
}}

Создание элемента используя JQUERY в django шаблонах: 

        function myFun(group_list_record) {
            var group_dict_record = group_list_record[0];
            var table = $('<table>');
            var content = '<thead><tr><th>CATEGORY</th>  <th>BOARD</th>  <th>TUITION CLASS  </th>  <th>STREAM</th>  <th>SUBJECT</th></tr></thead>';

            table_body = $('<tbody>');
            $(table).append(content);

            for (var category_key in group_dict_record) {
                var category = category_key;
                var category_dict = group_dict_record[category_key];
                if (group_dict_record.hasOwnProperty(category_key)) {
                    console.log(category_key + " -> " + group_dict_record[category_key]);

                    for (var board_key in category_dict) {
                        console.log("    "+board_key + " -> " + category_dict[board_key]);

                        var board = board_key;
                        var board_dict = category_dict[board_key];

                        for (var board_tuition_key in board_dict) {
                            console.log("       "+board_tuition_key + " -> " + board_dict[board_tuition_key]);


                            var table_row = $('<tr>').addClass(board_tuition_key); // .attr('id', board_tuition_key);


                            var board_tuition = board_tuition_key;
                            var board_tuition_dict = board_dict[board_tuition_key];

                            for (var records_key in board_tuition_dict) {

                                console.log(records_key);
                                if (records_key == 'category__type')
                                {
                                    var category_column = $('<td>');
                                    category_column.text(board_tuition_dict.category__type);
                                }

                                if (records_key == 'board__name')
                                {
                                    var board_column = $('<td>');
                                    board_column.text(board_tuition_dict.board__name);
                                }

                                if (records_key == 'tuition_class__name')
                                {
                                    var tuition_class_column = $('<td>');
                                    tuition_class_column.text(board_tuition_dict.tuition_class__name);
                                }

                                if (records_key == 'streams')
                                {
                                    var stream_column = $('<td>');
                                    stream_column.text(board_tuition_dict.streams);
                                }
                                if (records_key == 'subjects')
                                {
                                    var subjects_column = $('<td>');
                                    for (sub in board_tuition_dict.subjects)
                                    {
                                        var subject_name = board_tuition_dict.subjects[sub];
                                        var delete_tag = $('<div>').addClass('delete-group-sepc').text(subject_name);
                                        console.log("               Subjects:"+sub + " -> " + board_tuition_dict.subjects[sub]);
                                        subjects_column.append(delete_tag);
                                        delete_tag.attr('data-id', sub);
                                    }
                                }

                            table_row.append(category_column);
                            table_row.append(board_column);
                            table_row.append(tuition_class_column);
                            table_row.append(stream_column);
                            table_row.append(subjects_column);

                            }
                        table_body.append(table_row).attr('id', board_tuition_key);
                        }
                    }
                }
            }
            table.append(table_body);
            $('#ajax_response').append(table);
            // $('#ajax_response').children().replaceWith(table);

        }

, предоставляя изображение экрана вывода: проверьте это здесь

обратите внимание на пустое изображение.

Ответы [ 2 ]

0 голосов
/ 13 января 2020

Подумайте о том, чтобы разбить функции еще немного. Например: 

$(function() {
  function makeTable(tObj, props) {
    if (tObj == undefined) {
      tObj = false;
    }
    var t;
    if (props == undefined) {
      t = $("<table>");
    } else {
      t = $("<table>", props);
    }
    $("<thead>").appendTo(t);
    $("<tbody>").appendTo(t);
    if (tObj) {
      t.appendTo(tObj);
    }
    console.log("Created Table");
    return t;
  }

  function populateHead(tbl, keyArr) {
    var thd;
    if ($("thead", tbl).length) {
      thd = $("thead", tbl);
    } else {
      thd = $("<thead>").appendTo(tbl);
    }
    var row = $("<tr>").appendTo(thd);
    var c = 0;
    $.each(keyArr, function(i, k) {
      $("<th>").html(k).appendTo(row);
      c++;
    });
    console.log("Created " + c + " Headers");
    return c;
  }

  function populateBody(tbl, dataArr) {
    var tbd, row, c = 0;
    if ($("tbody", tbl).length) {
      tbd = $("tbody", tbl);
    } else {
      tbd = $("<tbody>").appendTo(tbl);
    }
    $.each(dataArr, function(i, r) {
      row = $("<tr>").appendTo(tbd);
      c++;
      $.each(r, function(j, c) {
        $("<td>").html(c).appendTo(row);
      });
    });
    console.log("Created " + c + " Rows");
    return c;
  }

  function makeTableData(o) {
    var d = [];
    var cats = Object.keys(o);
    var r = [];
    $.each(o[cats[0]], function(k, v) {
      r.push(cats[0]);
      r.push(k);
      $.each(v, function(j, x) {
        r.push(x['tuition_class__name']);
        r.push(x['stream__name']);
        r.push(x['subject__name']);
      });
      d.push(r);
    });
    console.log("Data:", d);
    return d;
  }

Как вы можете видеть, теперь вы можете больше сосредоточиться на создании массива табличных данных. 

[ // Row container
  ["cell 1", "cell 2", "cell 3"],
  ["cell 1", "cell 2", "cell 3"],
  ["cell 1", "cell 2", "cell 3"]
];

Этот алгоритм можно настроить в makeTableData() функция. Введите ваш объект (от AJAX я предполагаю), а затем введите полученную матрицу в функцию populateBody().

0 голосов
/ 13 января 2020

В этом блоке есть проблема: вы добавляете поля (category_column, board_column et c) несколько раз. 

table_row.append(category_column);
table_row.append(board_column);
table_row.append(tuition_class_column);
table_row.append(stream_column);
table_row.append(subjects_column);

Я подготовил работающий фрагмент: 

var group_list_record = [{
	"Academics": {
		"IB": {
			"IB_1st": {
				"id": 12, "group": 2, "group__group_group": "Academics-CBSE/IB-upto5th", "group__name": "German",
				"category__type": "Academics", "board__name": "IB", "tuition_class__name": "1st", "stream__name": null,
				"subject__name": "German", "streams": [null], "subjects": {"12": "German"}
			},
			"IB_Pre-Primary": {
				"id": 2339, "group": 2, "group__group_group": "Academics-CBSE/IB-upto5th", "group__name": "German",
				"category__type": "Academics", "board__name": "IB", "tuition_class__name": "Pre-Primary",
				"stream__name": null, "subject__name": "German", "streams": [null], "subjects": {"2339": "German"}
			}
		},
		"CBSE": {
			"CBSE_2nd": {
				"id": 13, "group": 2, "group__group_group": "Academics-CBSE/IB-upto5th", "group__name": "German",
				"category__type": "Academics", "board__name": "CBSE", "tuition_class__name": "2nd", "stream__name": null,
				"subject__name": "German", "streams": [null], "subjects": {"13": "German"}
			},
			"CBSE_3rd": {
				"id": 15, "group": 2, "group__group_group": "Academics-CBSE/IB-upto5th", "group__name": "German",
				"category__type": "Academics", "board__name": "CBSE", "tuition_class__name": "3rd", "stream__name": null,
				"subject__name": "German", "streams": [null], "subjects": {"15": "German"}
			},
      
		}
	}
}];

function myFun(group_list_record) {
    var group_dict_record = group_list_record[0];
    var table = $('<table>');
    var content = '<thead><tr><th>CATEGORY</th>  <th>BOARD</th>  <th>TUITION CLASS  </th>  <th>STREAM</th>  <th>SUBJECT</th></tr></thead>';

    table_body = $('<tbody>');
    $(table).append(content);

    for (var category_key in group_dict_record) {
        var category = category_key;
        var category_dict = group_dict_record[category_key];
        if (group_dict_record.hasOwnProperty(category_key)) {
            // console.log(category_key + " -> " + group_dict_record[category_key]);

            for (var board_key in category_dict) {
                // console.log("    "+board_key + " -> " + category_dict[board_key]);

                var board = board_key;
                var board_dict = category_dict[board_key];

                for (var board_tuition_key in board_dict) {
                    // console.log("       "+board_tuition_key + " -> " + board_dict[board_tuition_key]);


                    var table_row = $('<tr>').addClass(board_tuition_key); // .attr('id', board_tuition_key);


                    var board_tuition = board_tuition_key;
                    var board_tuition_dict = board_dict[board_tuition_key];

                    for (var records_key in board_tuition_dict) {

                        // console.log("records_key: " + records_key);
                        if (records_key == 'category__type')
                        {
                            var category_column = $('<td>');
                            category_column.text(board_tuition_dict.category__type);
                        }

                        if (records_key == 'board__name')
                        {
                            var board_column = $('<td>');
                            board_column.text(board_tuition_dict.board__name);
                        }

                        if (records_key == 'tuition_class__name')
                        {
                            var tuition_class_column = $('<td>');
                            tuition_class_column.text(board_tuition_dict.tuition_class__name);
                        }

                        if (records_key == 'streams')
                        {
                            var stream_column = $('<td>');
                            stream_column.text(board_tuition_dict.streams);
                        }
                        if (records_key == 'subjects')
                        {
                            var subjects_column = $('<td>');
                            for (sub in board_tuition_dict.subjects)
                            {
                                var subject_name = board_tuition_dict.subjects[sub];
                                var delete_tag = $('<div>').addClass('delete-group-sepc').text(subject_name);
                                // console.log("               Subjects:"+sub + " -> " + board_tuition_dict.subjects[sub]);
                                subjects_column.append(delete_tag);
                                delete_tag.attr('data-id', sub);
                            }
                        }
                        
                        /* this is a wrong place
                        table_row.append(category_column);
                        table_row.append(board_column);
                        table_row.append(tuition_class_column);
                        table_row.append(stream_column);
                        table_row.append(subjects_column);
                         */
                    }
                    /* this is a correct place */
                    /* preparing all fields in a loop and than append it once */
                    table_row.append(category_column);
                    table_row.append(board_column);
                    table_row.append(tuition_class_column);
                    table_row.append(stream_column);
                    table_row.append(subjects_column);
                    table_body.append(table_row).attr('id', board_tuition_key);
                }
            }
        }
    }
    table.append(table_body);
    $('#ajax_response').append(table);
    // $('#ajax_response').children().replaceWith(table);

}
        
        
        
myFun(group_list_record);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="ajax_response"></div>
...