動態顯示JSON值列表格式

Question

我有一個從服務器的JSON響應，它看起來像（注：數據可能或多或少但結構是相同的）

{ 
    "events": [{ 
     "id": 852157, 
     "name": "Adelaide v Brisbane", 
     "timezone": "Australia/Darwin", 
     "timezoneOffset": 34200, 
     "time": 1401987600000, 
     "timeUtc": "2014-06-05T20:00:00+09:30", 
     "status": "live", 
     "wpRef": "852157", 
     "parentCategoryId": 7, 
     "parentCategoryName": "Australian Rules", 
     "categoryId": 9274, 
     "categoryName": "AFL R26 Matches", 
     "racingEvent": null, 
     "raceNumber": null, 
     "marketCount": 0, 
     "prefix": null, 
     "nameSeparator": null, 
     "markets": [], 
     "result": null 
    }, { 
     "id": 852217, 
     "name": "Geelong v Carlton", 
     "timezone": "Australia/Darwin", 
     "timezoneOffset": 34200, 
     "time": 1401987600000, 
     "timeUtc": "2014-06-05T20:00:00+09:30", 
     "status": "live", 
     "wpRef": "852217", 
     "parentCategoryId": 7, 
     "parentCategoryName": "Australian Rules", 
     "categoryId": 9274, 
     "categoryName": "AFL R26 Matches", 
     "racingEvent": null, 
     "raceNumber": null, 
     "marketCount": 0, 
     "prefix": null, 
     "nameSeparator": null, 
     "markets": [], 
     "result": null 
    }, { 
     "id": 852238, 
     "name": "Carlton v Hawthorn", 
     "timezone": "Australia/Darwin", 
     "timezoneOffset": 34200, 
     "time": 1401987600000, 
     "timeUtc": "2014-06-05T20:00:00+09:30", 
     "status": "live", 
     "wpRef": "852238", 
     "parentCategoryId": 7, 
     "parentCategoryName": "Australian Rules", 
     "categoryId": 9274, 
     "categoryName": "AFL R26 Matches", 
     "racingEvent": null, 
     "raceNumber": null, 
     "marketCount": 0, 
     "prefix": null, 
     "nameSeparator": null, 
     "markets": [], 
     "result": null 
    }] 
} 

我想顯示「名稱「屬性從JSON以列表格式。數據通過onClick方法從服務器檢索。由於返回的JSON數據可能會有所不同（即可能超過3個事件），因此我正在尋找動態顯示JSON數據。

列表

HTML視圖看起來類似：

<div id="someID" class="filtering"> 
    <h2>EVENTS</h2> 
    <ul> 
     <li><a href="">Name 1</a> 
     </li> 
     <li><a href="">Name 2</a> 
     </li> 
     <li><a href="">Name 3</a> 
     </li> 
    </ul> 
    <div class="clear"></div> 
</div> 

這是我的JS看，當我從服務器獲取JSON上單擊事件像

var navigation = { 

    sportSubCategoryBindClick: function (id, parentId) { 

     $("#" + id).live('click', function() { 

      var thisEl = this, 
       categoryId = $(this).attr('id'); 

      $.when(ajaxCalls.fetchEventsForCategory(id, parentId, days.fromToday)).done(function (eventsMap) { 

       // There are no events 
       if (eventsMap.events.length == 0) { 
        $('#mainError').show(); 
        $('div.main').hide(); 
       } else { 
        $('#' + categoryId).addClass('active'); 

        var events = eventsMap.events; 

        // If there are events 
        if (events.length > 0) { 

         navigation.drawAllEvents(events); 

        } 
       } 
       progressIndicator(false); 
      }); 
     }); 
    }, 

    drawAllEvents: function (events)  { 

     console.log(events); 
    } 
} 

如何動態填充的「名」字段從JSON列表視圖（drawAllEvents函數）中提到的HTML標記。也許我需要使用

$.each(result,function(index, value){ 
    // code goes over here 
}); 

但我不知道我該如何利用這個在我的情況。

Answer 1

您需要動態創建一個新的li元素，其中包含從傳遞的events獲取的數據並將其附加到DOM。事情是這樣的：

drawAllEvents: function (events) { 
    var $container = $('#someID ul'); 
    $.each(events, function(i, event) { 
     $('<a />', { text: event.name, href: '#' }).wrap('<li />').parent().appendTo($container); 
    }); 
} 

Example fiddle