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

Question

Изучаю создание сеток в JS

Сетка в два блока ширины и до бесконечности вниз. Есть импромизированный ответ с сервера - массив объектов.

Вот один из них.

 {

      text: '123123123',
      size: 'half',
      type: 'house',
      id: 2  
    },

Если будет не четное количество таких блоков, а за ними тот что занимает всю ширину, то появляется пустое место.

Есть другой масив объектов, с блоками выполняющими другой функционал, но такого же размера. Нужно понять, как их вставить в нужное место.

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

Вот моя реализация fullItemList - масив блоков smallItemList - масив блоков для пустых мест ([0] пока не имеет значения)

fullItemList.map((item, index) => {
if( (index +2) <= fullItemList.length && (index -2) <= fullItemList.length ) {
                if(
                    item.size === 'half'
                    && fullItemList[index-1 ].size  === 'Full'
                    && fullItemList[index+1 ].size  !== 'half'

                ) {
                    newArrf.splice(index+1,0, this.state.smallItemList[0])

                }
            }


        }

Answer 1

key - это ключ перед словом **дерево**
Значение - это количество.

    let val = ['**дерево**','куст','куст','**дерево**','трава','**дерево**'];

    let temp = new Object(); // Создаём объект, чтобы был и ключ и значение
    let count = 0; // счётчик
    let result = []; // Массив результата
    for(let i=0;i<val.length;i++){ // Перебираем
        if(val[i] != '**дерево**'){ // Если значение НЕ равно **дерево**, то...
            count += 1; // Прибавляем к счётчику единицу
        } else {
            
            if(i>0) { // Если ключ больше 0
                let iz = i - 1; // Получаем предыдущий ключ.
                temp['key'+iz] = count; // Добавляем в объект значение key и ключ перед словом, и значение по количеству элементов между
                count = 0; // Сбрасываем счётчик
            }
        }
    }
    result.push(temp); // Добавляем в объект в массив
    console.log(result); // Выводим в консоль

Answer 2

не ясно с какой целью вам там индекс перед деревом, и главное, перед каким именно в паре, а также, что с эти делать, если между парой ничего нет. но вот пример с индексами обоих деревьев в паре и числом всякой всячины перед ними.

const data = ['qwe','**дерево**','куст','куст','**дерево**','трава','**дерево**'];


let res = data.reduce(function(acc, v, idx){
           if(v != '**дерево**') return acc;
           
           if(acc.lastIdx != undefined){
             acc.data.push({
                  s: acc.lastIdx,
                  e: idx,
                  q: idx - acc.lastIdx - 1
                });
           }
           acc.lastIdx = idx;  
              
           return acc;           
       }, { lastIdx: undefined, data: [] }).data;
       
console.log(res);

Answer 3

В качестве ключа объект со строкой и индексом, в качестве значения повторы:

let arr = ['**дерево**','куст','куст','**дерево**','трава','**дерево**'];

let result = [];
let counter = 0;

arr.forEach((s,i, ar) => {
  if(s !== '**дерево**' && ar[i+1] === '**дерево**'){
    result.push({'beforeTree': s, 'index': i, 'num': counter});
    counter = 0;
  } else {
    counter++;
  }
})

console.log(result);

БЛОГ НА HUSL

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

Ответы (3 шт):