Блог

Главная - Вопросы по программированию - Как загрузить массивы для отображения в столбцы с несколькими строками?

Как загрузить массивы для отображения в столбцы с несколькими строками?

#javascript #html #arrays #reactjs #jsx

Вопрос:

Я хочу иметь массив, что-то вроде этого:

 let thisArray = [1,2,3,4,5,6,7,8];

и я хочу иметь возможность отобразить массив в столбец/строку 2×4.

 <div className='numberRow'>
    <div className='numberCol'>1</div>
    <div className='numberCol'>2</div>
</div>
<div className='numberRow'>
    <div className='numberCol'>3</div>
    <div className='numberCol'>4</div>
</div>
<div className='numberRow'>
    <div className='numberCol'>5</div>
    <div className='numberCol'>6</div>
</div>
<div className='numberRow'>
    <div className='numberCol'>7</div>
    <div className='numberCol'>8</div>
</div>

можно ли использовать map() и начать новую строку?

Ответ №1:

Вы можете разделить массив на куски по 2 , создав новый массив и используя Array.push и Array.splice , затем map через каждый элемент и построив HTML:

 let thisArray = [1, 2, 3, 4, 5, 6, 7, 8];

let split = []

while (thisArray.length > 0) {
  split.push(thisArray.splice(0, 2));
}

const HTML = split.map(e => `<div className='numberRow'>
    <div className='numberCol'>${e[0]}</div>
    <div className='numberCol'>${e[1]}</div>
</div>`).join('')

document.write(HTML) 
 [className=numberRow]{background-color:yellow;padding:10px}[className=numberCol]{background-color:lightgrey}

Ответ №2:

Вы можете использовать Array#reduce() метод для создания нужного массива данных, затем вы можете использовать Array#map() метод для создания HTML , как в следующей демонстрации:

 let thisArray = [1,2,3,4,5,6,7,8];
let twoCol = thisArray.reduce((acc,cur,i,a) => 2*i < a.length ? acc.concat([a.slice(2*i,2*i 2)]) : acc,[]);
console.log( twoCol );

let table = twoCol.map(([c1,c2]) => `<div className='numberRow'>
    <div className='numberCol'>${c1}</div>
    <div className='numberCol'>${c2}</div>
</div>`)
.join('');
console.log( table );
Метки: