Can I use a for loop in an .append() to make buttons/items?

DanielCarriveau
May 14, 2023
154 views
1 vote
2 Answers

I’m looking to dynamically (from data provided via whatever…jSon, XML, a static array, etc.) build a series of divs that in the end contain anchor tags (or buttons) with images inside of them.

This is what I have so far:

        $(document).ready(function () {
            let testButtonEntries = [
                { button_title: 'Employee Button Title', button_alt_text: 'Employee Alt Text', button_image: 'emp_button_title', link: 'insertsomelinkhere' },
{ button_title: 'Employee Button Title', button_alt_text: 'Employee Alt Text', button_image: 'emp_button_title', link: 'somelinktosomewhere.com/' },
{ button_title: 'Employee Button Title', button_alt_text: 'Employee Alt Text', button_image: 'emp_button_title', link: 'somelinktosomewhere.com/' },
{ button_title: 'Employee Button Title', button_alt_text: 'Employee Alt Text', button_image: 'emp_button_title', link: 'somelinktosomewhere.com/' },
{ button_title: 'Employee Button Title', button_alt_text: 'Employee Alt Text', button_image: 'emp_button_title', link: 'somelinktosomewhere.com/' },
{ button_title: 'Employee Button Title', button_alt_text: 'Employee Alt Text', button_image: 'emp_button_title', link: 'somelinktosomewhere.com/' },
{ button_title: 'Employee Button Title', button_alt_text: 'Employee Alt Text', button_image: 'emp_button_title', link: 'somelinktosomewhere.com/' },
{ button_title: 'Employee Button Title', button_alt_text: 'Employee Alt Text', button_image: 'emp_button_title', link: 'somelinktosomewhere.com/' },
{ button_title: 'Employee Button Title', button_alt_text: 'Employee Alt Text', button_image: 'emp_button_title', link: 'somelinktosomewhere.com/' },
{ button_title: 'Employee Button Title', button_alt_text: 'Employee Alt Text', button_image: 'emp_button_title', link: 'somelinktosomewhere.com/' },
{ button_title: 'Employee Button Title', button_alt_text: 'Employee Alt Text', button_image: 'emp_button_title', link: 'somelinktosomewhere.com/' },
{ button_title: 'Employee Button Title', button_alt_text: 'Employee Alt Text', button_image: 'emp_button_title', link: 'somelinktosomewhere.com/' },
{ button_title: 'Employee Button Title', button_alt_text: 'Employee Alt Text', button_image: 'emp_button_title', link: 'somelinktosomewhere.com/' },
{ button_title: 'Employee Button Title', button_alt_text: 'Employee Alt Text', button_image: 'emp_button_title', link: 'somelinktosomewhere.com/' },
{ button_title: 'Employee Button Title', button_alt_text: 'Employee Alt Text', button_image: 'emp_button_title', link: 'somelinktosomewhere.com/' },
{ button_title: 'Employee Button Title Last', button_alt_text: 'Employee Alt Text Last', button_image: 'emp_button_title_last', link: 'insertsomelinkhere.org' }
            ];

            for (let sections = 0; sections <= testButtonEntries.length % 15; sections++) {
                $('<div class="carousel-item">')
                    .append($('<div class="d-flex flex-wrap"/>').append(function () {
                        for (let i = 0; i < 15; i++) {
                            return $('<div/>')
                                .append($('<a/>', {
                                    href: testButtonEntries[i].link,
                                    title: testButtonEntries[i].button_title,
                                    target: '_blank'
                                }).append($('<img/>', {
                                    alt: testButtonEntries[i].button_alt_text,
                                    class: 'img-responsive',
                                    src: 'images/' + testButtonEntries[i].button_image + '.png'
                                })));
                        }
                    }))
                    .appendTo($('#employee-button-container'));
            }
        });

It produces what I want BUT (because obviously the return statement is gonna kick back the first result and that’s a wrap) it doesn’t get me 15 "buttons" in the 1st section and a single one in the 2nd section that I’m striving for.

Answers

Chosen as BEST ANSWER

Here is the answer I was looking for (just need to sleep on it lol)

$(document).ready(function () {
   let testButtonEntries = [
      { button_title: 'Employee Button Title', button_alt_text: 'Employee Alt Text', button_image: 'emp_button_title', link: 'insertsomelinkhere' },
      { button_title: 'Employee Button Title', button_alt_text: 'Employee Alt Text', button_image: 'emp_button_title', link: 'somelinktosomewhere.com/' },
      { button_title: 'Employee Button Title', button_alt_text: 'Employee Alt Text', button_image: 'emp_button_title', link: 'somelinktosomewhere.com/' },
      { button_title: 'Employee Button Title', button_alt_text: 'Employee Alt Text', button_image: 'emp_button_title', link: 'somelinktosomewhere.com/' },
      { button_title: 'Employee Button Title', button_alt_text: 'Employee Alt Text', button_image: 'emp_button_title', link: 'somelinktosomewhere.com/' },
      { button_title: 'Employee Button Title', button_alt_text: 'Employee Alt Text', button_image: 'emp_button_title', link: 'somelinktosomewhere.com/' },
      { button_title: 'Employee Button Title', button_alt_text: 'Employee Alt Text', button_image: 'emp_button_title', link: 'somelinktosomewhere.com/' },
      { button_title: 'Employee Button Title', button_alt_text: 'Employee Alt Text', button_image: 'emp_button_title', link: 'somelinktosomewhere.com/' },
      { button_title: 'Employee Button Title', button_alt_text: 'Employee Alt Text', button_image: 'emp_button_title', link: 'somelinktosomewhere.com/' },
      { button_title: 'Employee Button Title', button_alt_text: 'Employee Alt Text', button_image: 'emp_button_title', link: 'somelinktosomewhere.com/' },
      { button_title: 'Employee Button Title', button_alt_text: 'Employee Alt Text', button_image: 'emp_button_title', link: 'somelinktosomewhere.com/' },
      { button_title: 'Employee Button Title', button_alt_text: 'Employee Alt Text', button_image: 'emp_button_title', link: 'somelinktosomewhere.com/' },
      { button_title: 'Employee Button Title', button_alt_text: 'Employee Alt Text', button_image: 'emp_button_title', link: 'somelinktosomewhere.com/' },
      { button_title: 'Employee Button Title', button_alt_text: 'Employee Alt Text', button_image: 'emp_button_title', link: 'somelinktosomewhere.com/' },
      { button_title: 'Employee Button Title', button_alt_text: 'Employee Alt Text', button_image: 'emp_button_title', link: 'somelinktosomewhere.com/' },
      { button_title: 'Employee Button Title Last', button_alt_text: 'Employee Alt Text Last', button_image: 'emp_button_title_last', link: 'insertsomelinkhere.org' }
   ];

   let sectionStart = 0;
   let sectionEnd = 15;

   for (let sections = 0; sections < (Math.ceil(testButtonEntries.length / 15)); sections++) {
      $('<div class="carousel-item">')
         .append($('<div class="d-flex flex-wrap"/>').append(function () {
            let sectionButtons = '';

            for (let sectionItems = sectionStart; sectionItems < sectionEnd; sectionItems++) {
               let formedButton = $('<div/>')
                  .append($('<a/>', {
                     href: testButtonEntries[i].link,
                     title: testButtonEntries[i].button_title,
                     target: '_blank'
                  }).append($('<img/>', {
                     alt: testButtonEntries[i].button_alt_text,
                     class: 'img-responsive',
                     src: 'images/' + testButtonEntries[i].button_image + '.png'
                  })));

                  sectionButtons += formedButton[0].outerHTML;
             }

             return sectionButtons;
          }))
         .appendTo($('#employee-button-container'));

      sectionStart = sectionEnd;
      sectionEnd = sectionEnd + 15;
   }
});

(Edit)

We can use slice method to divide/split the main array into separate array chunks(with 15 elements each) and use map to build the HTML

 const rows = [];
    const size = 15;

    while (testButtonEntries.length > 0){
      rows.push(testButtonEntries.splice(0, size));
    }

    const data = rows.map((row) => {
      const elements = row.map((ele) => {
        const { button_title, link, button_image, button_alt_text } = ele;
        return `<div class=""><a href="${button_image}" title="${button_title}" target="_blank"><img src="images/${button_image}"  class="img-responsive" alt="${button_alt_text}"/></a></div>`;
      });
      return `<div class="carousel-item"><div class="d-flex flex-wrap">${elements}</div></div>`;
    });
    $("#employee-button-container").html(data);
  });

Please signup or login to give your own answer.

Click here to cancel reply.