Currently, I am in the process of learning how to use AJAX with vanilla JS. My goal is to implement a limit on the amount of data received from an API, specifically restricting it to 10 objects maximum.
The API url that I am working with can be found here: https://jsonplaceholder.typicode.com/photos
However, I have encountered an issue where the GET request fetches a large amount of data, approximately 5000 objects, which is much more than I need. I am looking for a solution to filter and work with only a limited amount of data.
Below is a snippet of the JavaScript code I am using:
const next = document.getElementsByTagName("button"),
body = document.querySelector("body");
body.addEventListener("DOMContentLoaded",runEvents);
function runEvents(){
nextBtn();
}
function nextBtn(){
//setting up the XMLHTTPObject ajax object
const xhr = new XMLHttpRequest();
xhr.open("GET", "https://jsonplaceholder.typicode.com/photos", true);
xhr.onprogress = function(){
document.getElementsByTagName("img").setAttribute("src", "img/loading.gif");
};
xhr.onload = function(){
if(this.status === 200){
document.getElementsByTagName("p").textContent = "Data Found"
//I would like to handle the received data here
}else{
document.getElementsByTagName("img").style.display = "none";
document.getElementsByTagName("p").textContent = "Data not found";
}
};
}