Ajax Возвращаясь к тексту, а не HTML

Question

У меня есть полный код для получения значений из 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

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

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

Answer 1

Вы сохраняете в переменной эту ссылку на элемент и используете ее для добавления к документу. Вы должны обернуть элемент перед вызовом метода после.

Кроме того, при вызове ajax вы устанавливаете значение dataType в html , когда кажется, что вы ожидаете json .

Итак, в итоге ваш код должен выглядеть так:

$("#category li").one('click', function() {
    var $that = $(this);
    var catId = $that.attr("id");

    $.ajax({
        type: 'GET',
        url: '<?php echo base_url()."dashboard/getsubcategory/"; ?>'+catId,
        dataType: 'json',
        data: { category: catId},
        beforeSend: function() {
            $("#loader").show();
        }
    })
    .done(function(data) {
        data.forEach(function(category) {
            $that.after('<li class="collection-item">'+category.id+'</li>');
        });
    })
    .fail(function() {
        alert( "Fetch failed." );
    });
});