使用jQuery拉動靜態API

Question

任何人都可以幫我一頭霧水了一會兒現在我該如何使用jQuery將這個JSON feed拖入HTML文檔中，例如，我想通過「base_title」拉入h2標籤等

http://ufc-data-api.ufc.com/api/v1/us/events

任何幫助將非常感激。

Answer 1

一旦您從該服務器獲得JSON響應，就可以解析響應，然後使用jQuery的.each()方法循環遍歷每個事件。之後，這只是渲染標記的問題。

function displayEvents(events, container) { 
    var allEventsMarkup = '<ul class="eventList">'; 
    $.each(events, function(i, event) { 
     var eventMarkup = '<li class="event">'; 
     eventMarkup += '<h2>' + event.base_title + '</h2>'; 

     // ...continue to display whatever properties 
     // you care about from the event object... 

     eventMarkup += '</li>'; 
     allEventsMarkup += eventMarkup; 
    }); 
    allEventsMarkup += '</ul>'; 
    container.html(allEventsMarkup); 
} 

var eventListContainer = $('body'); 
$.ajax({ 
    url: "http://ufc-data-api.ufc.com/api/v1/us/events", 
    dataType: "json" 
}).done(function(response) { 
    var events = JSON.parse(response); 
    displayEvents(events, eventListContainer); 
}); 

請注意，如果您的服務器沒有託管端點，則可能會遇到CORS問題。