forEach 循环中的条件语句

Question

I am trying to run a unique function to a specific object in an array.

I currently have a forEach loop that iterates through different records in an imported database, which creates a 'panel' for every record.

Here is a preview:

As you can see, the first panel does not line up with the bottom of the others. This is because it is a landscape photo and so its width must me larger to compensate. However, to do this I must have some kind of exception in my forEach loop to set the width of that record uniquely.

Here is an the code I have written:

fetch(
"https://(apiurl)/" ) //here I run a GET request to my database
.then(handleError) // skips to .catch if error is thrown
.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: ${index === 0 ? 30 : 25}vw");
    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) {
  // catches the error and logs it
})

I have thought of running a conditional statement within the loop so that only the first image has its own width but to no avail. For example, I would do:

if (data.records.record == [0]) { galleryitem.setAttribute("style", "margin-right: 28px; width: 50vw"); }

This does not work as intended. Any ideas?

(It may also be useful to note is that I am using the splidejs library for the slider)

EDIT: I have added the full code for context, and here is a screenshot of a section of the array table >>

Answer 1

Just check the index of the item you're iterating over?

data.records.forEach((record, index) => {
    const galleryitem = document.createElement("li");
    galleryitem.setAttribute("aria-hidden", "false");
    galleryitem.setAttribute("tabindex", "0");
    galleryitem.style.cssText = `margin-right: 28px; width: ${index === 0 ? 50 : 25}vw`;
});

You also probably want to append the galleryitem to a container inside the loo;.

Answer 2

You can also do that:

 //--
.then( data  =>
  {
  let attributs = { 'aria-hidden':false, tabindex:0, style:'margin-right: 28px; width: 50vw' }  
  data.records.forEach( record =>
    {
    let galleryitem = Object.assign( document.createElement('li'), attributs)
    attributs.style = 'margin-right: 28px; width: 25vw'
    
    // ....
  });
})
.catch(....