create a divided html out of an array of html items at a specific loop

Question

I have this array of HTML items that I want them to be looped and inserted into group of HTMLs:

const htmlToBeLooped = [
  `<div>
        <span>ID: 2</span>
        <span>ID: name2</span>
    </div>`,
  `<div>
        <span>ID: 2</span>
        <span>ID: name2</span>
    </div>`,
  `<div>
        <span>ID: 3</span>
        <span>ID: name3</span>
    </div>`,
  `<div>
        <span>ID: 4</span>
        <span>ID: name4</span>
    </div>`,
  `<div>
        <span>ID: 5</span>
        <span>ID: name5</span>
    </div>`,
  `<div>
        <span>ID: 6</span>
        <span>ID: name6</span>
    </div>`,
  `<div>
        <span>ID: 7</span>
        <span>ID: name7</span>
    </div>`,
  `<div>
        <span>ID: 8</span>
        <span>ID: name8</span>
    </div>`,
  `<div>
        <span>ID: 9</span>
        <span>ID: name9</span>
    </div>`,
  `<div>
        <span>ID: 10</span>
        <span>ID: name10</span>
    </div>`
];

I want it to be converted to:

<div id="container-1">
    <div>
        <span>ID: 1</span>
        <span>ID: name1</span>
    </div>
    <div>
        <span>ID: 2</span>
        <span>ID: name2</span>
    </div>
    <div>
        <span>ID: 3</span>
        <span>ID: name3</span>
    </div>
</div>

<div id="container-2">
    <div>
        <span>ID: 4</span>
        <span>ID: name4</span>
    </div>
    <div>
        <span>ID: 5</span>
        <span>ID: name5</span>
    </div>
    <div>
        <span>ID: 6</span>
        <span>ID: name6</span>
    </div>
</div>

<div id="container-3">
    <div>
        <span>ID: 7</span>
        <span>ID: name7</span>
    </div>
    <div>
        <span>ID: 8</span>
        <span>ID: name8</span>
    </div>
    <div>
        <span>ID: 9</span>
        <span>ID: name9</span>
    </div>
</div>

<div id="container-4">
    <div>
        <span>ID: 10</span>
        <span>ID: name10</span>
    </div>
</div>

Given that there should be a maximum of 3(this is varied) items in each group.

After researching in StackOverflow I came up with this but it failed:

const loopLimit = 3;
const sectionsToBeShown = Math.ceil(htmlToBeLooped.length / loopLimit);

let html = '';

for(let i = 0; i < sectionsToBeShown; i++) {
    html += `<div id='container-${i + 1}'>`

    for(var x = 0; x < htmlToBeLooped.length; x += loopLimit){
        const limitedhtml = htmlToBeLooped.slice(x, x + loopLimit);

        for(var y = 0; y < limitedhtml.length; y++){
            html+= limitedhtml[i];
        }
    }

    html += `</div>`
}

document.write(html)

Would really appreciate someone's help as I've been stuck on this trying different approaches for a couple of hours now.

If you had an array of objects it would be much less painful. — Andy, Jul 01 '21 at 10:52
Why you have an array with html instead of use just value and wrap into html in the next step? — Simone Rossaini, Jul 01 '21 at 10:52
Here's your code, fixed: https://jsfiddle.net/tmxyav4h/ (just increase an external variable to move to the next array element) — , Jul 01 '21 at 11:00
@ChrisG Thank you! I don't know why this question got assigned as duplicate, it's literally not a duplicate, barely looks like the attached question that a mod thinks is a duplicate. — Cedric Hadjian, Jul 01 '21 at 11:02
Using the accepted on the duplicate: https://jsfiddle.net/adigas/y7psamrv/ — adiga, Jul 01 '21 at 11:06
@ChrisG I have reopened it. You can post it as an answer. It is about creating chunks but can be considered as a new question since their is issue creating the HTML. — adiga, Jul 01 '21 at 11:07

create a divided html out of an array of html items at a specific loop

0 Answers0