Can you please guide me on retrieving information from an API using HTML, CSS, and JavaScript?

Question

Can you please guide me on retrieving information from an API using HTML, CSS, and JavaScript?

My task is to develop a web application using HTML, CSS, and JS with the following functionality:

Retrieve a list of users from this API: https://jsonplaceholder.typicode.com/users. Upon clicking on a user, show a list of albums associated with that user by utilizing this API: https://jsonplaceholder.typicode.com/albums. Further, upon clicking on an album, display a list of images linked to that specific album through another API.

I am unsure about how to proceed with this. I believe I need to establish a class and utilize data from the initial API to create members. However, beyond that point, I am feeling stuck. Although I have a basic understanding of HTML, CSS, and JS, my attempts at finding solutions online have proven unfruitful. If anyone can recommend a reliable source for information on this topic, I would deeply appreciate it.

javascript html css json ajax

Answer 1

Answer №1

In order to display data from APIs on a webpage, you can utilize AJAX calls and populate specific container elements like <div>s with the retrieved information.

For instance, here is a simple jQuery example that demonstrates how to showcase a list of users and their albums upon selecting a user:

<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>

Answer 2

In order to display data from APIs on a webpage, you can utilize AJAX calls and populate specific container elements like <div>s with the retrieved information.

For instance, here is a simple jQuery example that demonstrates how to showcase a list of users and their albums upon selecting a user:

<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>

Can you please guide me on retrieving information from an API using HTML, CSS, and JavaScript?

Answer №1

Similar questions

Decoding a Json containing a JsonArray at its root with the help of Retrofit

What is the best way to share information among Vue3 single file component instances?

Converting Variable Values to Element IDs in JavaScript: A Helpful Guide

Despite having unique ids, two file input forms are displayed in the same div in the image preview

Tips for managing JSON data in Node.js

What is the best way to modify the appearance of the button?

How can I activate a disabled option number 2 after selecting option number 1?

Hovering over the top menu items in AngularJS will reveal dropdown submenus that will remain visible even when moving the cursor

Storing dataset characteristics in a JSON file utilizing Vue.js form response

Tips for fetching data from a Django REST API endpoint and displaying it in a Flutter Dropdown widget

A continuous jQuery method for updating select option values

Include a hyperlink in an email using PHP

Explore and target elements using browser inspection

A guide to accessing a specific element within a JSON object using Python

Compatibility of Blackberry Webworks

Set the datepicker to automatically show today's date as the default selection

How to maintain the focus within a jQuery dialog box

Adding a "Learn More" hyperlink in a JavaScript loop

Is it possible to conditionally redirect using Vue router?

There is an error in the TypeScript code where it is not possible to assign a string or