jQueryを使用して安心してAPIを引き出す

Question

誰かがこれについて私の頭を傷つけるのを手伝ってもらえますか？たとえば、jqueryを使ってこのJSONフィードをHTML文書にプルする方法を教えてください。私はすべてのヘルプは本当にいただければ幸い

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

などh2タグに「base_title」を通じて引きたいです。

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の問題に遭遇することがあります。