読者です 読者をやめる 読者になる 読者になる

【JavaScript】RandomAPIでサンプル個人情報を取得する

 

アプリの機能に個人データを管理するものがあるとき、

名前、メールアドレス、顔写真などのサンプルがあると

開発するときに便利ですよね。

適当につくるのだった面倒くさいですからね。

 

そんな個人データのサンプルを提供しているAPIのご紹介です。

 

f:id:stanleyblenz:20161126150852p:plain

 

 

f:id:stanleyblenz:20161126150927p:plain

 

 

このような感じで取得できます。

 

 

JavaScript(index.js)

// 「次へ」ボタンをクリックしてJSONデータを読み込み
var btn = document.getElementById('btn');
btn.addEventListener('click', function() {
  var script = document.createElement('script');
  script.src = "http://api.randomuser.me/?callback=jsonData";
  document.body.appendChild(script);
  document.body.removeChild(script);
})
//コールバックされた「jsonData」を読み込み
function jsonData(data) {
  var result = data.results[0];
  var img = document.getElementById('img');
  var name = document.getElementById('name');
  var email = document.getElementById('email');
  img.src = result.picture.large;
  name.textContent = result.name.first + " " + result.name.last;
  email.textContent = result.email;
}

 

▼HTML(index.html)

<body>
  <img id="img" src="">
  <p id="name"></p>
  <p id="email"></p>
  <button id="btn">次へ</button>
  <script type="text/javascript" src="js/index.js"></script>
</body>