javascriptでjson形式の配列からデータを取得する方法

Question

私は問題に直面しています。私がhttp://headers.jsontest.com/を使うとき、私は価値を得る。ここに私のコード

<div id="ip"></div> 


<script type="text/javascript"> 
    var getJSON = function(url) { 
     return new Promise(function(resolve, reject) { 
      var xhr = new XMLHttpRequest(); 
      xhr.open('get', url, true); 
      xhr.responseType = 'json'; 
      xhr.onload = function() { 
       var status = xhr.status; 
       if (status == 200) { 
        resolve(xhr.response); 
       } 
       else { 
        reject(status); 
       } 
      }; 
      xhr.send(); 
     }); 
    }; 

    getJSON('http://headers.jsontest.com/').then(function(data) {   

     for(x in data){ 
      ip.innerText = data.Host;  
     } 

    }, function(status) { 
      alert('Something went wrong.'); 
    }); 

</script> 

あるしかし、私は、このリンクを使用するとき、私は任意の値My Linkを得ることはありません。それは、デフォルトのデータ・フォーマット{data}場合

getJSON('http://67.225.137.209/index.php/queue_manage_api/queue/doc_id/3536/loc_id/4696/username/9791a47fef07649b1c3e70749e898153/password/2d593e25d0560b19fd84704f0bd24049/format/json').then(function(data) {   

    for(x in data){ 
     ip.innerText = data.id;  
    } 

    }, function(status) { 
     alert('Something went wrong.'); 
}); 

を働いていないのはなぜ、私は、デフォルト値を取得する。しかし[{data}]のようなデータ形式は、私はまた、任意の値を取得していない場合。私のデータフォーマットは[{data}]です。だから私のデータを取得する方法

Answer 1

以下のコードを編集しても問題ありません。それは私に望ましい出力を与える。

<script type="text/javascript"> 

    $.ajax({ 
     xhrFields: {cors: false}, 
     url: "http://67.225.137.209/index.php/queue_manage_api/queue/doc_id/3536/loc_id/4696/username/9791a47fef07649b1c3e70749e898153/password/2d593e25d0560b19fd84704f0bd24049/format/json", 
     type: "GET", 
     crossDomain: true, 
     dataType: "jsonp", 

     success: function (response) { 
      var resp = response; //JSON.parse(response); 

      //alert(resp); //.status); 

      for(x in resp){ 
       document.getElementById("ip").innerHTML += resp[x].name+" "+resp[x].id+" "; 
      } 
     }, 
     error: function (xhr, status) { 
      alert("error"); 
     } 
    }); 
</script> 

Answer 2

ブラウザのセキュリティが発砲しています。あなたの返事に、このヘッダを追加することにより、CORSを有効にする必要があります

Access-Control-Allow-Origin:* 

[ネットワーク]タブ（F12）を見れば、あなたはhttp://headers.jsontest.com/はすでにそれをやっていることがわかります。ここで

あなたがCORSについての詳細情報読むことができます：サーバーがない場合は、あなたをhttps://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

を、あなたはCORSを追加することはできません、そして、彼らは、セキュリティと呼ばれていることをしない理由を（持っていますので、理由のxD ）。多分彼らは気付かず、あなたはそれを可能にするように頼むことができます。

Protip：フロントエンドコードをチェックするときは、常に開発ツール（F12）を開いて（コンソールタブ）行うようにしてください。