Ajax Возврат к тексту, а не к html

У меня есть полный код для получения значений из PHP через Jquery AJAX с типом данных JSON. Но после выполнения ajax он не отвечает на html. Это стало текстом.

результат стал таким.

$("#category li").one('click', function() {

    var catId = $(this).attr("id");

    var that = this;

    $.ajax({
            type: 'GET',
            url: '<?php echo base_url()."dashboard/getsubcategory/"; ?>'+catId,
            dataType: 'html',
            data: { category: catId},
            beforeSend: function() {
                $("#loader").show();
            }
        })

    .done(function(data){
        var categories = JSON.parse(data)

        $.each(categories, function(k,category) {

            that.after('<li class = "collection-item">'+category.id+'</li>');

        });

    })
    .fail(function() {

        alert( "Fetch failed." );

    });

});

Вывод JSON:

[
  {
    "id": "7",
    "name": "Blazer & Suits"
  },
  {
    "id": "8",
    "name": "Blouses & Shirts"
  },
  {
    "id": "9",
    "name": "Friendly URL in CodeIgniter"
  }
]

Почему он вернулся к:

<li class = "collection-item">7</li>
<li class = "collection-item">8</li>
<li class = "collection-item">9</li>

результат, который я ожидал,

<li class = "collection-item">7</li>
<li class = "collection-item">8</li>
<li class = "collection-item">9</li>

предварительный просмотр:

http://prntscr.com/n1x0ey

Пожалуйста помоги ..

Спасибо большое.