Как вывести в цикле на JS список альбомов?

Question

[DiaTMss]

Знатоки JS. Подскажите вроде бы тривиальная задача. Не могу вывести не на php не на js. Есть массив из 12 элементов. В цикле пробегаюсь по элементам массива предварительно задав условие, чтобы через каждые 2 блока выводился вспомогательный блок 12 % 2 === 0 Сколько нужно циклов чтобы вывести 7 вспомогательных блоков и 12 записей?

div
0
1
/div

div
2
3
/div

div
4
5
/div

div
6
7
/div

div
8
9
/div

div
10
11
/div

div
11
/div

Answer 1

[0xD34F]

const chunks = (arr, chunkSize) =>
  arr.reduce((acc, n, i) => (
    (i % chunkSize) || acc.push([]),
    acc[acc.length - 1].push(n),
    acc
  ), []);


const data = [...Array(12).keys()];
const chunkSize = 2;

const html = chunks(data, chunkSize)
  .map(n => `<div>${n.map(m => `<div>${m}</div>`).join('')}</div>`)
  .join('');

Comments

[DiaTMss]

Спасибо вам огромное!

Answer 2

[hzzzzl]

что-то я не понял что куда надо выводить

doublediv = []
arr = [0,1,2,3,4,5,6,7,8,9,10,11,12]

for (let i = 0; i < arr.length; i++) {
	if(doublediv.length < 2) {
		doublediv.push(arr[i])
	} else {
		console.log(doublediv)
		console.log('extra div')
		doublediv = [arr[i]]
	}
}

так?

Comments

[DiaTMss]

Да, спасибо вам огромное! Замучился с вставкой через innerHTML

<div class="box_album" id="box_album">

</div>

<div class="col_album row"> - вот этот вспомогательный div) 
                        <div class="album row">
                            <div class="cover_album">
                                <img src="images/cover_drippin_in_finesse.jpg">
                            </div>
                            <div class="info_album">
                                <h3>Drippin in Finesse</h3>
                                <h2>Lil Fil</h2>

                                <hr>

                                <p>Album contains 6 tracks</p>
                            </div>
                        </div>

                        <div class="album row">
                            <div class="cover_album">
                                <img src="images/cover_hard_way.jpg">
                            </div>
                            <div class="info_album">
                                <h3>Hard Way</h3>
                                <h2>Lil Fil</h2>

                                <hr>

                                <p>Album contains 6 tracks</p>
                            </div>
                        </div>
                    </div>

[hzzzzl]

DiaTMss, вообще есть подозрение, что ты хочешь выводить по два альбома в ряд просто?
может быть это проще сделать через css, если так

https://codepen.io/anon/pen/aMrNvB

[hzzzzl]

DiaTMss, можно к элементу добавлять дивы же так

html = `<div class="col_album row">.....` // пусть сюда идет весь хтмл дива
newDiv = document.createElement('div') // будущий элемент
newDiv.innerHTML = html  // в него бросаем содержимое
document.querySelector('#my-albums-wrapper').appendChild(newDiv) // и добавляем

выходит более наглядно, чем если всё делать типа wrapperHTML.innerHTML = wrapperHTML.innerHTML + `.....`

[DiaTMss]

hzzzzl, спасибо да верно по два альбома в ряд просто у меня потом json будет на css реализовал а на js не осилил(

for(var a = 0; album.id_album.length > a; a++)
{
if(a % 2 === 0)
        {
            box_album.innerHTML += '<div class="col_album row">';

            box_album.innerHTML += '</div>';
        }*/

        /*else
        {
            box_album.innerHTML += 
                '<div class="album row">' +
                    '<div class="cover_album">' +
                        '<img src="' + album.id_album[a].cover + '">' +
                    '</div>' +
                    '<div class="info_album">' +
                        '<h3>' + album.id_album[a].album + '</h3>' +
                        '<h2>' + album.id_album[a].artist + '</h2>' +
                        '<hr>' +
                        '<p>Album contains 6 tracks</p>' +
                    '</div>' +
                '</div>';
        }

var album =
    {
        'id_album' :
        [
            {
                cover : 'images/cover_drippin_in_finesse.jpg',
                album : 'Drippin in Finesse',
    			artist : 'Lil Fil',
            },

            {
                cover : 'images/cover_drippin_in_finesse.jpg',
                album : 'HARD WAY',
    			artist : 'Lil Fil',
            },
            
            {
                cover : 'images/cover_drippin_in_finesse.jpg',
                album : 'PIXEL',
    			artist : 'Lil Fil',
            },

            {
                cover : 'images/cover_drippin_in_finesse.jpg',
                album : 'ATMOSPHERIC',
    			artist : 'Lil Fil',
            },

            {
                cover : 'images/cover_drippin_in_finesse.jpg',
                album : 'AK​-​47',
    			artist : 'Lil Fil',
            },

            {
                cover : 'images/cover_drippin_in_finesse.jpg',
                album : 'KATANA BLADE',
    			artist : 'Lil Fil',
            },

            {
                cover : 'images/cover_drippin_in_finesse.jpg',
                album : 'CHAINS',
    			artist : 'Lil Fil',
            },
            
            {
                cover : 'images/cover_drippin_in_finesse.jpg',
                album : 'OUTER SPACE',
    			artist : 'Lil Fil',
            },

            {
                cover : 'images/cover_drippin_in_finesse.jpg',
                album : 'ILLUSIONS',
    			artist : 'Lil Fil',
            },

            {
                cover : 'images/cover_drippin_in_finesse.jpg',
                album : 'FLEXIN',
    			artist : 'Lil Fil',
            },

            {
                cover : 'images/cover_drippin_in_finesse.jpg',
                album : 'FLEXIN',
    			artist : 'Lil Fil',
            }
        ]
    }

[hzzzzl]

DiaTMss, йоу
https://codepen.io/anon/pen/xBNOyB

или во чуть поаккуратнее
https://codepen.io/anon/pen/PLvGjJ