0

このネストされた配列を素敵な html リストにするにはどうすればよいですか?

<ul id="droppable">
    <li value="id">lastname firstname</li>
    <li value="id">lastname firstname</li>
</ul>

この配列は、ajaxrequest から返されるものです。

[{
    "id": 87,
    "lastname": "BOUSSAUW",
    "firstname": "ANNEMIE"
}, {
    "id": 88,
    "lastname": "VEREENOOGHE",
    "firstname": "STEFAAN"
}, {
    "id": 89,
    "lastname": "VERHEYDEN",
    "firstname": "JOKE"
}]

私のajaxリクエスト：

$.ajax({
    type: 'GET',
    url: 'PHPCalls.php?CallID=GetGroupMembersJSON',
    data: { GroupID : str },
    success: function(data){
        var html = '';
        $.each(data, function(i, obj) {
            html += '<li id="' + obj.id + '">' + obj.lastname + ' ' + obj.firstname + '</li>';
        });

        $('#droppable').html(html);
    }
});

編集: ul-tag は既に存在していました。追加する必要はありませんが、言及しませんでした

私が得る結果は、これの長いリストです:

<li id="undefined">
    undefined undefined
</li>
4

1 に答える 1

3

JSON を解析してから、配列を反復処理する必要があります。

var json = '[{"id": 87,"lastname": "BOUSSAUW","firstname": "ANNEMIE"}, {"id": 88,"lastname": "VEREENOOGHE","firstname": "STEFAAN"}, {"id": 89,"lastname": "VERHEYDEN","firstname": "JOKE"}]';
var data = $.parseJSON(json);

$('#form').html('');

$.each(data, function(i, o) {
    $('#form').append('<li id="'+o.id+'">'+o.lastname+' '+o.firstname+'</li>');
});

http://jsfiddle.net/Recode/mDHfs/1/

于 2013-09-14T19:43:34.363 に答える