JQuery JSON AJAX вызов извлекает больше, чем ожидалось

Question

Я звоню в этот файл JSON:

{
    "data" : [
        {
            "type" : "file",
            "target" : "TheGreatest.doc",
            "workspace" : "Huddle Workspace One",
            "user" : "Chan Marshall" 
        },
        {
            "type" : "comment",
            "target" : "martes.mp3",
            "workspace" : "Huddle Workspace One",
            "user" : "Fernando Corona" 
        },
        {
            "type" : "file",
            "target" : "Papalon.pdf",
            "workspace" : "Huddle Workspace Two",
            "user" : "Tom Jenkinson" 
        },
        {
            "type" : "whiteboard",
            "target" : "My Manic & I",
            "workspace" : "Huddle Workspace One",
            "user" : "Laura Marling" 
        } 
    ],
    "error" : false,
    "code" : 200
}

С помощью jQuery AJAX по нажатию на ссылку:

    $('#content > .section > h2 > a').live('click',function() {

    $('#content > .section > ul').toggle();

    /*
        JSON
    */

    var $jsonURL = 'response.json';

    $.ajax({
        type: 'GET',
        url: $jsonURL,
        dataType: "json",
        success: function(data){

            var $html = '';

            $.each(data.data, function(i, data){

                if (data.type == 'file') {
                    var $string = 'workspace';
                } else if (data.type == 'comment') {
                    var $string = 'file';
                } else {
                    var $string = 'workspace';
                }

                $html += '<li class="' + data.type + '">';

                $html += '<strong>New ' + data.type + '</strong> was added to the ' + $string + ' ';

                $html += '<a href="' + data.target + '">' + data.target + '</a> ';

                $html += '<a href="' + data.workspace + '">' + data.workspace + '</a>';

                $html += ' by <a href="#">' + data.user + '</a>'; 

                $html += '</li>';   

                $('#content > .section > ul').append($html);    

            });

        },
        error:function (xhr, ajaxOptions, thrownError){
            alert(xhr.status);
            alert(thrownError);
        }           
    });

    return false;
});

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

Есть идеи, где я ошибаюсь?

Answer 1

Да, это потому, что вы определяете $html вне вашего $.each цикла, но продолжаете добавлять к нему внутри цикла. Попробуйте определить $html в начале вашей $.each функции.

Answer 2

Область вашей переменной $ html должна управляться так, чтобы она была «установлена ​​на первый элемент» с +, а не += в действии FIRST в цикле .each - так как вы добавляете его в зацикливание, а затем «сбрасывает» его для каждого элемента, вам необходимо установить его начало в начале этого цикла.

Я также заметил, что это:

        if (data.type == 'file') { 
            var $string = 'workspace'; 
        } else if (data.type == 'comment') { 
            var $string = 'file'; 
        } else { 
            var $string = 'workspace'; 
        } 

может быть проще:

        if (data.type == 'comment') { 
            var $string = 'file'; 
        } else { 
            var $string = 'workspace'; 
        }; 

Answer 3

Заменить это:

$html += '<li class="' + data.type + '">';

... этим:

$html = '<li class="' + data.type + '">';