Как правильно перебрать циклом слайды и карточки внутри них?

Question

[Кирилл]

https://codesandbox.io/s/mystifying-proskuriakova-huimi

Есть объект с данными для карточек, 6 карточек и 2 слайда. Нужно перебрать все это циклом, чтобы в каждый слайд вставлялись по 3 карточки с заполненными данными из объекта, и если добавить в объект еще 3 карточки, то чтобы они корректно отобразились. Подскажите, как это можно сделать?

Comments

[alex4answ]

ничего не понял, еще раз, что нужно?
начальный объект => результат

[Кирилл]

alex4answ,
Объект с данными можно сделать другим, например добавить еще промежуточный массив со слайдами, не суть, главное результат.
результат должен быть таким:

<SwiperSlide1 className='slide1'>
  <div className='slide-row'>
    <Card1 />
  </div>
  <div className='slide-row'>
    <div className='slide-col'>
      <Card2 />
    </div>
    <div className='slide-col'>
      <Card3 />
    </div>
  </div>
</SwiperSlide1>
<SwiperSlide2 className='slide2'>
  <div className='slide-row'>
    <Card4 />
  </div>
  <div className='slide-row'>
    <div className='slide-col'>
      <Card5 />
    </div>
    <div className='slide-col'>
      <Card6 />
    </div>
  </div>
</SwiperSlide2>

Answer 1

[0xD34F]

Нужны две вещи.

Первая - функция, которая порежет массив на куски:

const chunks = (arr, chunkSize) => Array.from(
  { length: Math.ceil(items.length / chunkSize) },
  (n, i) => items.slice(i * chunkSize, (i + 1) * chunkSize)
);

Вторая - компонент карточки:

const Card = props => (
  <div className="style-review__slide-row">
    <a className="style-card style-review__style-card" href="#">
      <div className="style-card__overlay">
        <div className="style-card__title">{props.title}</div>
        <div className="style-card__category">
          {props.category}
        </div>
      </div>
    </a>
  </div>
);

После этого останется только получить массив, состоящий из массивов данных для отдельных карточек:

const chunkedItems = chunks(items, 3);

И отрендерить его:

<Swiper>
  {chunkedItems.map(cardItems => (
    <SwiperSlide className="swiper-slide style-review__slide">
      {cardItems.map(n => <Card {...n} />)}
    </SwiperSlide>
  ))}
</Swiper>

Comments

[Кирилл]

Очень интересное решение, спасибо. Есть только один момент, который я более подробно указал в комментарии и его стоило отдельно упомянуть в вопросе:

Вот структура, которая должна быть на выходе

<SwiperSlide1 className='slide1'>
  <div className='slide-row'>
    <Card1 />
  </div>
  <div className='slide-row'>
    <div className='slide-col'>
      <Card2 />
    </div>
    <div className='slide-col'>
      <Card3 />
    </div>
  </div>
</SwiperSlide1>
<SwiperSlide2 className='slide2'>
  <div className='slide-row'>
    <Card4 />
  </div>
  <div className='slide-row'>
    <div className='slide-col'>
      <Card5 />
    </div>
    <div className='slide-col'>
      <Card6 />
    </div>
  </div>
</SwiperSlide2>

То есть первая карточка попадает внутрь строки, а следующие 2 попадают в столбцы внутри следующей строки.

Пока я сделал следующим образом:
1. переписал объект с данными таким образом, чтобы проще было перебирать

объект

const slides = [
      {
        cards: [
          {
            title: 'Заголовок1',
            category: 'Категория1,
          },
           {
            title: 'Заголовок2',
            category: 'Категория2,
          },
           {
            title: 'Заголовок3',
            category: 'Категория3,
          },
        ],
      },
      {
        cards: [
          {
            title: 'Заголовок4',
            category: 'Категория4,
          },
           {
            title: 'Заголовок5',
            category: 'Категория5,
          },
          {
            title: 'Заголовок6',
            category: 'Категория6,
          },
        ],
      },
]

2. Функцию пока оставил с прямым указанием карточек в слайде, лучше ничего не придумал.

Функция

{data.slides.map((slide) => {
            return (
              <SwiperSlide>
                <div className='slide-row'>
                  <StyleCard data={slide.items[0]} />
                </div>
                <div className='slide-row'>
                  <div className='lide-col'>
                    <StyleCard data={slide.items[1]} />
                  </div>
                  <div className='slide-col'>
                    <StyleCard data={slide.items[2]} />
                  </div>
                </div>
              </SwiperSlide>
            );
          })}

Эта html структура сильно ввела в ступор...

[0xD34F]

Кирилл,

chunkedItems.map(([ first, ...rest ]) => (
  <SwiperSlide>
    <div className="slide-row">
      <Card {...first} />
    </div>
    <div className="slide-row">
      {rest.map(n => (
        <div class="slide-col">
          <Card {...n} />
        </div>
      ))}
    </div>
  </SwiperSlide>
))

[Кирилл]

0xD34F, то что нужно, спасибо!

[0xD34F]

Кирилл, или компонент дополнительный введите для .slide-row, который будет по-разному показывать разные данные:

const SlideRow = props => (
  <div className="slide-row">
    {props.item && <Card {...props.item} />}
    {props.items && props.items.map(n => (
      <div className="slide-col">
        <Card {...n} />
      </div>
    ))}
  </div>
);

chunkedItems.map(cardItems => (
  <SwiperSlide>
    <SlideRow item={cardItems[0]} />
    <SlideRow items={cardItems.slice(1)} />
  </SwiperSlide>
))

[Кирилл]

0xD34F, функция точно верная? возвращает такую ошибку:

[0xD34F]

Кирилл, какую "такую"?

[Кирилл]

0xD34F, undefined is not a function

[0xD34F]

Кирилл, и что тут непонятного?

[Кирилл]

0xD34F,

я пробую использовать ваш код:

slides.map(([ first, ...rest ]) => (
  <SwiperSlide>
    <div className="slide-row">
      <Card {...first} />
    </div>
    <div className="slide-row">
      {rest.map(n => (
        <div class="slide-col">
          <Card {...n} />
        </div>
      ))}
    </div>
  </SwiperSlide>
))

для этого объекта:

const slides = [
      {
        cards: [
          {
            title: 'Заголовок1',
            category: 'Категория1,
          },
           {
            title: 'Заголовок2',
            category: 'Категория2,
          },
           {
            title: 'Заголовок3',
            category: 'Категория3,
          },
        ],
      },
      {
        cards: [
          {
            title: 'Заголовок4',
            category: 'Категория4,
          },
           {
            title: 'Заголовок5',
            category: 'Категория5,
          },
          {
            title: 'Заголовок6',
            category: 'Категория6,
          },
        ],
      },
]

не понимаю я почему возвращает undefined. Мы в map заходим внутрь массива slides и разделяем карточки на 1 и 2. выглядит то правильно. Отчего undefined?

[0xD34F]

Кирилл,

для этого объекта

Ложь. Это вообще не объект. Синтаксически некорректный мусор. Исправьте, потом поговорим. И чтобы такого больше не было. А если считаете допустимым проявлять подобное наплевательское отношение к оформлению своих вопросов, то не ждите, что на них станут отвечать.

[Кирилл]

0xD34F,
Да, не объект, а массив.
Создал codesandbox для удобства.
Там я оставил свое старое решение, чтобы убедиться в корректности массива, а ваше оставил закомментированным. Если его раскомментировать, то покажет ошибку:

TypeError
Invalid attempt to destructure non-iterable instance.
In order to be iterable, non-array objects must have a [Symbol.iterator]() method.

Как я понял ошибка в том, что пытаюсь итерировать объект, а не массив. Но самостоятельно разобраться как это исправить не могу.

[0xD34F]

Кирилл, начинаю подозревать, что вам моя помощь не нужна. Или я что-то непонятное написал в предыдущем комментарии?