如何使用Ajax创建分组结果jQuery

Question

我正在尝试创建一个分组显示，其中数组的对象具有共同的年份。

年 超速驾驶类车票 ... ...

我试图用if语句在for循环内创建一个嵌套的for循环，以捕获具有相同年份的数组中的对象

    $.ajax('/api/ExpiationsWebAPI', {
        timeout: 2000
    })
        .then(function (data) {
            console.log(data)

            var tableEl = $('<table class="table">')
            var headerTitle = $('<tr>')
            var headerEl = $('<tr>')
            $('<th colspan="2" class="title">').text('Speeding Category by Year').appendTo(headerTitle)
            headerTitle.appendTo(tableEl)
            $('<th class="speedingTitle">').text('Speeding Category').appendTo(headerEl)
            $('<th class ="ticketsTitle">').text('Tickets Issued').appendTo(headerEl)
            headerEl.appendTo(tableEl)
            var headerYear = $('<tr>')

            for (var item of data) {


                if ($('<tr>').text(item.year) != this.headerYear) {

                    headerYear.appendTo(tableEl)
                }

                $('<tr>').text(item.year).appendTo(headerYear)

                 for (var i = 0; i = data.length; i++) {
                    var dataRow = $('<tr>').attr('data-id', item.id)
                    var object = data[i]

                     if ($('<td>').text(item.year) === headerYear) {
                         //console.log(headerYear)
                         //console.log($('<td>').text(item.year))
                        $('<td class="speeding">').text("Speeding by " + item.expiationCategory).appendTo(dataRow)
                        $('<td class="tickets">').text(item.ticketCount).appendTo(dataRow)
                        dataRow.appendTo(tableEl)
                    }

                    dataRow.on('click', function () {
                        alert($(this).attr('data-id'))
                    })

                }


            }

            tableEl.appendTo('#table')


        }, function (e) {
            console.log(e)
        })


</script>

我似乎无法获得正确的输出

输出应为： 线-年，数据线，数据线...线-年，数据线，数据线...

相反，我得到： 行-年，数据行，行-年，数据行，行-年，数据行，