I am fetching data from a real estate API.It is an array of houses for sale.This array has 50 items but I want to display only first 10 of them in the UI so that later on i can add buttons for next and previous pagination.I am getting undefined in the UI.
index.html
<!--Property container-->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-4 gap-y-8 p-3" id="property-container">
</div>
app.js
const properties = document.querySelector("#property-container");
let arrayList = [];
let page = 0;
//Fetch data from an API
document.addEventListener("DOMContentLoaded", sanFranciscoProperties);
function sanFranciscoProperties() {
fetch(
`https://realtor.p.rapidapi.com/properties/v2/list-for-sale?sort=relevance&city=San%20Francisco%20&limit=50&offset=0&state_code=CA`,
{
method: "GET",
headers: {
"x-rapidapi-host": "realtor.p.rapidapi.com",
"x-rapidapi-key": "My_API_Key",
},
}
)
.then((res) => {
return res.json();
})
.then((response) => {
console.log(response);
propertiesForSale(response);
})
.catch((err) => {
console.log(err);
});
}
//Create div card for each house and fill it with API data
function propertiesForSale(homes) {
let output = "";
for (let i = 1; i <= 50; i++) {
homes.properties.forEach((home) => {
let image = home.thumbnail ? home.thumbnail : "image-not-found.png";
let beds = home.beds ? home.beds : 0;
let baths = home.baths ? home.baths : 0;
output += `
<div class="h-64 px-2 py-2 border-1 border-black mt-4 mb-12">
<p class="font-sans text-xs text-gray-600 mb-1">Brokered by ${home.branding.listing_office.list_item.name}</p>
<a href="${home.rdc_web_url}" class="toggle-image" data-id="${home.id}">
<img src=${image}
alt=""
class="w-full h-full"></img>
<p class="font-sans text-sm mt-2"><span class="ml-3">For Sale</span> <span class="font-semibold text-lg">$${home.price}</span></p>
<p class="font-sans text-sm"><span class="ml-3 font-semibold">${beds}</span> bed <span class="font-semibold">${baths}</span> bath</p>
<p class="font-sans text-sm"><span class="ml-3">${home.address.line}</span>
<span class="ml-3">${home.address.city}</span>, <span>${home.address.state_code}</span> <span>${home.address.postal_code}</span>
</p>
</a>
</div>
`;
});
arrayList = arrayList.concat(output);
}
}
//Display first ten houses in UI
function showFirstTen() {
let output = "";
for (let i = 0; i < page + 10; i++) {
output += arrayList[i];
}
properties.innerHTML = output;
}
showFirstTen();