Looking to Apply a Unique Function to a Specific Object in an Array
In my current project, I have set up a forEach loop to iterate through various records from a database. Each record generates a 'panel' on the interface.
Preview of the panels:
https://i.sstatic.net/JpNA4.png
The issue arises when dealing with a landscape photo for the first panel, causing alignment problems with the rest due to its larger width requirement. To address this, I need to implement an exception within the loop to handle this unique case.
Here's the code snippet:
fetch(
"https://(apiurl)/" ) //sending a GET request to the database
.then(handleError) //switches to .catch if error occurs
.then((data) => {
data.records.forEach((record) => {
let galleryitem = document.createElement("li");
galleryitem.setAttribute("class", "splide__slide is-visible");
galleryitem.setAttribute("aria-hidden", "false");
galleryitem.setAttribute("tabindex", "0");
galleryitem.setAttribute("style", "margin-right: 28px; width: 25vw");
listing.appendChild(galleryitem);
let gallerycontent = document.createElement("div");
gallerycontent.setAttribute("class", "slider-square");
galleryitem.appendChild(gallerycontent);
let imgwrapper = document.createElement("div");
imgwrapper.setAttribute("class", "slider-square_img");
gallerycontent.appendChild(imgwrapper);
let de_img = document.createElement("img");
de_img.setAttribute("class", "slider-square_photo");
de_img.setAttribute("src", record.fields.ArtLink);
de_img.setAttribute("loading", "lazy");
de_img.setAttribute("sizes", "(max-width: 479px) 84vw, (max-width: 991px) 48vw, 36vw");
imgwrapper.appendChild(de_img);
let textcontent = document.createElement("div");
textcontent.setAttribute("class", "text-opacity");
gallerycontent.appendChild(textcontent);
let art_title = document.createElement("h3");
art_title.setAttribute("class", "slider_title");
art_title.textContent = record.fields.Title;
textcontent.appendChild(art_title);
let art_desc = document.createElement("h3");
art_desc.setAttribute("class", "slider_descriptor");
art_desc.textContent = record.fields.Descriptor;
textcontent.appendChild(art_desc);
});
})
.catch(function writeError(err) {
//captures and logs errors
})
My attempts at including a conditional statement within the loop to adjust the width uniquely for the first image have been unsuccessful. An example would be:
if (data.records.record == [0]) { galleryitem.setAttribute("style", "margin-right: 28px; width: 50vw"); }
However, this approach doesn't produce the desired outcome. Any suggestions?
(Also, noteworthy is that I'm utilizing the splidejs library for the slider functionality)
EDIT: Inclusive of the complete code for clarity, along with a captured section from the array table >> https://i.sstatic.net/r6AzN.png