Recently, I delved into the world of Javascript and API arrays to grasp the concept of retrieving and manipulating various APIs.
The topic of Javascript loops and arrays has been discussed numerous times, both here on StackOverflow and on other platforms.
Despite my efforts, I have struggled to pinpoint exactly what I need, perhaps due to my limited knowledge and search terms.
My current venture involves creating a WebApp that fetches data from an API (specifically the random user API) and showcases this data on the screen.
Execution and Challenge
Thus far, my focus has been on retrieving specific data from the API (with some success) and displaying it on a web browser. I aim to display multiple users simultaneously, limiting it to 15 users at a time (refreshing the browser should display another 15 random users from the API).
While I understand I can request multiple users directly using the results parameter, I am striving to accomplish this task using loops to enhance my understanding of fetching and displaying multiple sets of information.
Execution Strategy
The HTML file: It's pretty basic, containing a main div with an unordered list element. I plan to remove certain elements from the HTML and create them dynamically in the JS file using the innerHTML method as I progress.
CSS file: Currently minimalistic, as I'm prioritizing the JS file for now.
The Javascript file: Also simple at this stage. It includes a constant variable with the API URL, fetches data in JSON format, and then populates specific information (like first name and photo) in their designated IDs using document.getElementById().
My research has provided me with a foundational understanding of retrieving and displaying API data. However, I've hit a roadblock in understanding how to utilize for-loops or map() to iterate through my existing JS code and display data multiple times for multiple users.
Challenge Faced
Prior to integrating the for-loop, the JS file successfully retrieved information for a single random user, which was expected. However, upon adding the for-loop, it ceased to display anything without any helpful error messages to guide me through the issue.
To ensure I grasped the basics, I tested a simple for-loop that printed results in the console:
for ( var i = 0; i < 15 ; i++) {
console.log(i)
}
I've linked the code snippets to a JSbin URL. There, you can review the current status and the encountered issue.
Current HTML + JS files and output (JS Bin): I've commented out the for-loop to demonstrate its functionality up to a certain point.
const testapi = fetch("https://randomuser.me/api/?gender=male");
/*for ( var i = 0; i < testapi.length ; i++) {*/
testapi
.then(data => data.json())
.then(data => document.getElementById('test').innerHTML = "<h1>" + data.results[0].gender + "</h1>" + "<p>" + data.results[0].name.first + "</p>" + document.getElementById("myImg").setAttribute('src',data.results[0].picture.medium))
.catch(function(err) {
console.log('Fetch Error :-S', err);
});
/*}*/li {
display:flex;
flex-direction: column;
align-items:center;
box-shadow: 2px 4px 25px rgba(0, 0, 0, .1);
}<!DOCTYPE html>
<html lang="eng">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div>
<ul>
<li>
<div id="test"></div>
<img src="" id="myImg" />
</li>
</ul>
</div>
<script src="script.js"></script>
</body>
</html>Useful Websites Visited
- Loop through and pull in a certain amount of data
- Javascript for loop not looping through array
- JavaScript Loops
- Write JavaScript loops using map, filter, reduce and find