HTML CSSとJSでAPIからデータを取得する方法

Question

ここに私の割り当てがあります。 https://jsonplaceholder.typicode.com/users：ユーザーのリストは、このAPIを使用してフェッチ

ディスプレイ：

は、次の処理を行い、HTML、CSS、およびJSを使用してWebアプリケーションを作成します。ユーザーをクリックすると、このAPI https://jsonplaceholder.typicode.com/albumsを使用して、そのユーザーに関連付けられたアルバムの一覧が表示されます。アルバムをクリックすると、このAPIを使用してそのアルバムに関連付けられた画像のリストを表示します

私はクラスを作成し、最初のAPIのデータを使用する必要があると思いますそれ以降のメンバーを作成するには、私は一種の迷子だ。私はHTML CSSとJSの基礎を学びましたが、そのすべてを行き来し、インターネットを検索することは役に立たないようです。誰かが被験者に関する良い情報源を知っていれば、私は非常に幸運です。

Answer 1

基本的には、指定されたAPIにAJAX呼び出しを行い、ターゲットコンテナ<div>に結果を移入する必要があります。 AngularJSを使用することができれば、私はそれをお勧めしたいと思います。そうでない場合は、少なくともjQueryを使用することができれば幸いです。ここで

は、あなたが何に立ち往生しているユーザーが

<div id="users"></div> 

<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
<script> 
$.ajax({ 
    url: "https://jsonplaceholder.typicode.com/users", 
    success: function(users) { 
     for (var i = 0; i < users.length; i++) { 
      var user = document.createElement("div"); 
      user.id = 'user-' + users[i].id; 
      user.className = 'user'; 
      span = document.createElement('span'); 
      span.innerHTML = users[i].name; 
      albums = document.createElement('ul'); 
      albums.className = 'albums'; 
      user.appendChild(span); 
      user.appendChild(albums); 
      user.addEventListener("click", function(){ 
       var that = this; 
       var userId = this.id.split('-')[1]; 
       var dest = this.getElementsByClassName('albums')[0]; 
       dest.innerHTML = ''; 
       $.ajax({ 
        url: "https://jsonplaceholder.typicode.com/albums", 
        success: function(albums) { 
         for (var j = 0; j < albums.length; j++) { 
          if (albums[j].userId == userId) { 
           console.log(albums[j].userId, ' == ', userId); 
           var li = document.createElement('li'); 
           li.innerHTML = albums[j].title; 
           dest.appendChild(li); 
          } 
         } 
        } 
       }) 
      }); 
      document.getElementById('users').appendChild(user); 
     } 
    } 
}); 
</script>