如何从HTML CSS和JS中的API获取数据

-1

写使用HTML，CSS和JS，做下面的Web应用程序：

显示使用该API获取用户的列表：https://jsonplaceholder.typicode.com/users。当你点击一个用户时，通过使用这个API https://jsonplaceholder.typicode.com/albums显示与该用户关联的相册列表。当你点击一个相册时，使用这个API显示与该相册相关联的图像列表

我不知道如何做到这一点我认为我需要创建一个类并使用第一个API中的数据之后创建成员我有点失落。我已经学习了HTML CSS和JS的基础知识，但是翻阅所有内容并搜索互联网似乎没有帮助。如果有人知道关于这个问题的很好的信息来源，我会非常感激。

来源

2017-01-23 Richard Knox

你被困在什么时候用户和他们各自的专辑列表一个非常基本的例子？获取数据，建模数据或显示数据？你有什么尝试？从获取数据开始，有数百万种资源可以实现这一点 - 尝试在现代浏览器或jQuery的'$ .ajax'上提供新的'fetch' API。 –

你将会使用JSON对象，你可以试试这个网站：http://youmightnotneedjquery.com/，因为它教授了一些没有任何lib的基础知识。 – sheldonled

SO是一个针对具体问题的问答网站，而不是针对广泛领域的详细论坛。 – Rob

基本上，您需要对给定的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>

来源

2017-01-23 12:47:02

如何从HTML CSS和JS中的API获取数据

回答

相关问题