Как получить данные из API в HTML CSS и JS

Question

Вот мое задание;

Написать веб-приложения с использованием HTML, CSS и JS, который делает следующее:

Показать список пользователей извлекаться с помощью этого API: https://jsonplaceholder.typicode.com/users. Когда вы нажимаете на пользователя, отобразите список альбомов, связанных с этим пользователем, с помощью этого API https://jsonplaceholder.typicode.com/albums. Когда вы нажимаете на альбом, отобразите список изображений, связанных с этим альбомом, используя этот API

Я не уверен, как это сделать Я думаю, что мне нужно создать класс и использовать данные из первого API чтобы создать участников после этого, я как бы потерял. Я изучил основы HTML CSS и JS, но все это и поиск в Интернете, похоже, не помогает. Если кто-то знает хороший источник информации по этому вопросу, я был бы очень благодарен.

Answer 1

В основном вам необходимо выполнить вызовы AJAX для данных API и заполнить целевой контейнер <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>