Javascriptを使用したAPIへのアクセス

Question

私は最初のWebアプリケーションを作成しています。単純なチャレンジのために、ユーザーのいくつかのOverwatch統計情報を表示したいと思います。私が作ったボットではNodeJSを使ってこれを達成できましたが、今はNodeJSを使うことができません。

stats = { 
    name: "This", 
    lastName: "That" 
} 

document.getElementById("overwatchStats").innerHTML = stats.name; 

が、このJSONデータがhttps://owapi.net/api/v3/u/Calvin-1337/statsからです：私は、私はローカルでJSONを持っていた場合、私はそうのようにアクセスできることを知っています。だから私はこれのようにアクセスする方法はわかりません（jqueryは好まれませんが、それが不可能な場合や複雑な場合は使用します）。

Answer 1

私はこれがうまくいくかどうかは確かではありませんでした。結果をXMLHttpRequestとJSON.parseを使って配列に格納するだけで、データを取得できます。

オブジェクトをループしてdivに出力するように更新しました。これをどのように行うことができるかの例を示すためです。

var statsButton = document.getElementById('get-stats'); 
 
statsButton.addEventListener('click', function() 
 
    { 
 
    var url = 'https://owapi.net/api/v3/u/Calvin-1337/stats'; 
 
    GetContent(url); 
 
    }, false); 
 

 
function GetContent(url, response) 
 
{ 
 
    var responseContainer = document.getElementById('response-div'); 
 
    
 
    if (typeof response === 'undefined') {  
 
     xmlhttp = new XMLHttpRequest(); 
 
     xmlhttp.open("GET", url, true); 
 

 
     xmlhttp.onreadystatechange = function() 
 
     { 
 
      //when new content is ready check if animation is still occuring, 
 
      //if it is, add an event listener, otherwise replace content 
 
      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) 
 
      { 
 
       GetContent(url, xmlhttp.responseText); 
 
      } 
 
     }; 
 

 
     xmlhttp.timeout = 10000; 
 
     
 
     xmlhttp.ontimeout = function() 
 
     { 
 
      responseContainer.innerHTML = 'Request timed out.'; 
 
      xmlhttp.abort(); 
 
     }; 
 

 
     xmlhttp.send(); 
 
    } else { 
 
     var decodedResponse = JSON.parse(response); 
 
     var content = processResponse(decodedResponse, 0); 
 
     responseContainer.innerHTML = content; 
 
    } 
 
} 
 

 
function processResponse(response, tab) 
 
{ 
 
    var newHTML = ''; 
 
    if (typeof response === 'object') { 
 
    for (var property in response) { 
 
     if (response.hasOwnProperty(property)) { 
 
     newHTML += '<div>' + addTab(tab) + property + ': ' + 
 
      processResponse(response[property], + (tab + 1)) + '</div>'; 
 
     } 
 
    } 
 
    } else { 
 
    newHTML = response; 
 
    } 
 

 
    return newHTML; 
 
} 
 

 
function addTab(count) { 
 
    var tabs = ''; 
 
    for (var i = 0; i < count; i++) { 
 
    tabs += '&nbsp&nbsp'; 
 
    } 
 

 
    return tabs; 
 
}

<div id="response-div"> 
 
</div> 
 
<input type="button" value="Get Stats" id="get-stats">

Answer 2

おそらくXMLHttpRequestと呼ばれるものを探している、または単にXHRされています。 MDN hereに関するチュートリアルがあります。

は基本的に、ここにあなたがいるためCORSのブラウザから直接使用することはできません

//Define a variable 
var xhr = new XMLHttpRequest(); 
//Add a callback 
xhr.onload = function() { 
    //The JSON will be stored as a string in the response property of the XHR 
    var json = JSON.parse(xhr.response); 
} 
//Open a connection to the API using a GET request 
xhr.open("GET", "https://owapi.net/api/v3/u/Calvin-1337/stats"); 
//Perform the request 
xhr.send();