2017-03-25 16 views
0

外部JSONのデータをHTMLに保存するにはどうすればよいですか?外部JSONのデータをHTMLに保存するにはどうすればよいですか?

私はウェブサイトhttp://api.nbp.pl/api/exchangerates/rates/A/USD?format=jsonを持っており、のみをこのクエリから保​​存し、htmlファイルのPLN値でそれを掛ける必要があります。誰も私を助けることができますか?

ダニエル。

+0

あなたはjQueryのを持っていますか?もちろん、 – Mazz

+0

。 jQuery 3.1.1。 – clamsioPL

答えて

0

あなたはjQueryのを持っている場合、私は知らないので、私はのXHR例取った:私たちは基本的に私たちはJSONファイルをロードすることを可能にする機能getJSONを追加https://mathiasbynens.be/notes/xhr-responsetype-json

を。

data.rates[0].midでは、midの値にアクセスできます(レートは配列です)。 jQueryを使って

var getJSON = function(url, successHandler, errorHandler) { 
 
\t var xhr = typeof XMLHttpRequest != 'undefined' 
 
\t \t ? new XMLHttpRequest() 
 
\t \t : new ActiveXObject('Microsoft.XMLHTTP'); 
 
\t xhr.open('get', url, true); 
 
\t xhr.onreadystatechange = function() { 
 
\t \t var status; 
 
\t \t var data; 
 
\t \t // https://xhr.spec.whatwg.org/#dom-xmlhttprequest-readystate 
 
\t \t if (xhr.readyState == 4) { // `DONE` 
 
\t \t \t status = xhr.status; 
 
\t \t \t if (status == 200) { 
 
\t \t \t \t data = JSON.parse(xhr.responseText); 
 
\t \t \t \t successHandler && successHandler(data); 
 
\t \t \t } else { 
 
\t \t \t \t errorHandler && errorHandler(status); 
 
\t \t \t } 
 
\t \t } 
 
\t }; 
 
\t xhr.send(); 
 
}; 
 

 
getJSON('https://api.nbp.pl/api/exchangerates/rates/A/USD?format=json', function(data) { 
 
\t alert(data.rates[0].mid); 
 
}, function(status) { 
 
\t alert('Something went wrong.'); 
 
});

これは動作します:

$.getJSON('https://api.nbp.pl/api/exchangerates/rates/A/USD?format=json', 
function(data){ 
    alert(data.rates[0].mid); 
},function(error){ 
    console.log(error); 
}); 
+0

ああ、ありがとうございます:D – clamsioPL

+0

jQueryの例を追加しました;) – Mazz

+0

[this](http://codepen.io/clamsioPL/pen/bqjEPW)のようなコードを修正しました。 ありがとう、もう一度:) – clamsioPL

-1
<html> 
<head> 
<script type="text/javascript" > </script> 

<script> 

    $(function() { 


    var people = []; 

    $.getJSON('people.json', function(data) { 
     $.each(data.person, function(i, f) { 
      var tblRow = "<tr>" + "<td>" + f.firstName + "</td>" + 
      "<td>" + f.lastName + "</td>" + "<td>" + f.job + "</td>" + "<td>" + f.roll + "</td>" + "</tr>" 
      $(tblRow).appendTo("#userdata tbody"); 
    }); 

    }); 

}); 
</script> 
</head> 

<body> 

<div class="wrapper"> 
<div class="profile"> 
    <table id= "userdata" border="2"> 
    <thead> 
      <th>First Name</th> 
      <th>Last Name</th> 
      <th>Email Address</th> 
      <th>City</th> 
     </thead> 
     <tbody> 

     </tbody> 
    </table> 

</div> 
</div> 

</body> 
</html> 

people.json 

{ 
    "person": [ 
     { 
      "firstName": "Clark", 
      "lastName": "Kent", 
      "job": "Reporter", 
      "roll": 20 
     }, 
     { 
      "firstName": "Bruce", 
      "lastName": "Wayne", 
      "job": "Playboy", 
      "roll": 30 
     }, 
     { 
      "firstName": "Peter", 
      "lastName": "Parker", 
      "job": "Photographer", 
      "roll": 40 
     } 
    ] 
} 

Hope i will help you :) 
+0

コードがインラインコメントであるか、コードの前後に簡単な説明が付いているかを説明することを忘れないでください。この方法で人々はこれが「コードのみの」答えであると主張しません。 –

関連する問題