JSONを外部ソースから解析する

Question

jsonファイルを他のURLから取得する方法はありますか？ 私のウェブサイトhttp://cricapi.com/api/cricket?apikey=TESTKEY0273にこのURLを解析したいと思います。

Answer 1

あなたは直接 APIを打つことができます。 jsonpリクエストを行う必要はありません。ドメインはすでにAccess-Control-Allow-Origin:*というヘッダーを持っていますので、どのドメインからでもAPIと直接対話できます。ドメイン間の問題は発生しません。

これは単純なJavaScriptソリューションです。 jQueryを使用している場合は、$.getまたは$.ajax関数を直接使用できます。

var xhr = new XMLHttpRequest(); 
 
xhr.open("GET", "https://cricapi.com/api/cricket?apikey=TESTKEY0273", true); 
 
xhr.onload = function (e) { 
 
    if (xhr.readyState === 4) { 
 
    if (xhr.status === 200) { 
 
     var dataRec = JSON.parse(xhr.responseText); 
 
     showData(dataRec); 
 
    } else { 
 
     console.error(xhr.statusText); 
 
    } 
 
    } 
 
}; 
 
xhr.onerror = function (e) { 
 
    console.error(xhr.statusText); 
 
}; 
 
xhr.send(null); 
 

 
function showData(list){ 
 
    list.data.forEach(function(v){ 
 
    
 
    var div = document.createElement('div'); 
 
    div.style.border = "1px solid"; 
 
    div.style.padding = "10px"; 
 
    var span = document.createElement('span'); 
 
    span.innerText = "Title : " + v.title; 
 
    div.appendChild(span); 
 
    var elem = document.getElementById("match"); 
 
    elem.appendChild(div); 
 
    
 
    }); 
 
}

<div id="match"> 
 
Matchs : 
 

 

 
</div>

Answer 2

jQueryを使用できる場合は、メソッドgetJSONを使用できます。

$.getJSON("https://cricapi.com/api/cricket?apikey=TESTKEY0273", 
 
    function(data) { 
 

 
    data.data.forEach(function(item) { 
 
     for (var key in item) { 
 
     $("#content").append($("<div />").append("<span>" + key + ": </span>").append(item[key])); 
 
     } 
 
     $("#content").append("<hr />"); 
 
    }); 
 
    });

#content>div { 
 
    margin-bottom: 10px; 
 
} 
 

 
#content span { 
 
    font-weight: bold; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="content"> 
 
</div>